webx 框架入门一

来阿里实习一个多月了，被拉着直接上新项目。由于新项目要使用webx，webx框架是淘宝的框架，比较厚重又复杂，但是性能毋庸置疑（毕竟每年双十一都挺过来了）。由于webx文档较少，基本都是阿里内部使用。在网上看了一个14年实习的师兄（现在在B2B基础架构）写的文章，觉得很有用，就收藏一下：

1、快速搭建webx应用：在命令行中输入如下命令：（前提是安装了maven）详细参考webx官方文档：http://webx.github.io/

mvn archetype:generate -DgroupId=com.alibaba.webx 
-DartifactId=tutorial1 -Dversion=1.0-SNAPSHOT 
-Dpackage=com.alibaba.webx.tutorial1 
-DarchetypeArtifactId=archetype-webx-quickstart 
-DarchetypeGroupId=com.alibaba.citrus.sample 
-DarchetypeVersion=1.8-DinteractiveMode=false

然后进入项目目录，输入mvn clean install命令，再输入mvn jetty:run命令即可运行。以上代码是使用jetty运行该项目。因为在pom文件中已经默认配置好了jetty，所以可以直接启动。jetty默认端口号是8081，启动好之后，可以在浏览器输入 localhost:8081 回车进入项目页面

2、接下来开始写代码，首先我们来写一个登录页面：src/main/webapp/app1/templates/screen/login.vm


<form action="$app1Link.setTarget("login")"method="post">
$csrfToken.hiddenField
<input type="hidden"name="action" value="login_action"/>
#set ($group = $form.login.defaultInstance)
<p>登录</p>
<p>#if($errorMsg) $errorMsg #end</p>
<p>
<input type="text"name="$group.name.key"value="$!group.name.value"/>
#if(!$group.name.valid)
$group.name.message
#end
<input type="password"name="$group.passwd.key"value="$!group.passwd.value"/>
#if(!$group.passwd.valid)
$group.passwd.message
#end
<input type="submit"name="event_submit_do_check"/>
</p>
</form>

首先，webx页面使用velocity模板文件编写，所以，文件名以.vm为扩展名然后就是一个from表单，form的action填写的内容为
$app1Link.setTarget("login")
其中app1Link是webx3的url broker服务，他会根据特定配置动态渲染url，他是代表项目的根目录，调用setTarget方法，将target设置为login,这段代码的意思是，如果表单验证没通过，该页面还会跳转到本页面，本页面的地址就是用login这个target跳转过来的。因为该页面的名字是login（这就是webx框架的约定大于配置原则）接下来我们看隐藏域：这个隐藏域的作用是，当页面通过表单验证之后，我们会跳转到隐藏域的value所指明的target。这里配置的是一个action，那么pipeline会把执行转交到LoginAction类手中（原因也是遵循webx框架的约定大于配置原则）。具体执行哪个方法我们接下来会讲到，LoginAction做了哪些工作接下来也有写。#set($group=$form.login.defaultInstance)
这里相当于定义了一个变量。该变量是个表单验证实例，接下来的if语句是控制是否输入错误信息的，仅当field验证通过时（即$group.field.valid=true），才显示错误信息。对于空白表单和通过验证的字段而言，$group.field.valid为true。

3、接着我们再创建两个类
第一个类是个实体类：com.alibaba.webx.tutorial1.app1.Visitor.java


public class Visitor {
    privateString name;
    privateString passwd;
    publicString getPasswd() {
        returnpasswd;
    }
    publicvoid setPasswd(String passwd) {
this.passwd = passwd;
    }
    publicString getName() {
        returnname;
    }
    publicvoid setName(String name) {
this.name = name;
    }
}

这个类没什么好说的，就是一个javabean的实体类，主要用于表单元素的注入。

接着，我们开始写action类。
com.alibaba.webx.tutorial1.app1.module.action.LoginAction.java


import com.alibaba.citrus.turbine.Navigator;
import com.alibaba.citrus.turbine.dataresolver.FormGroup;
import com.alibaba.webx.tutorial1.app1.Visitor;
public class LoginAction {

    publicvoid doCheck(@FormGroup("login")Visitor visitor,Navigator nav){
        String name = visitor.getName();
        String passwd = visitor.getPasswd();
        if("admin".equals(name)&&"admin".equals(passwd)){
            nav.redirectTo("app1Link").withTarget("form/welcome").withParameter("name",name);
        }else{

        }
    }
}

LoginAction.java代码解析

该类只有一个方法，doCheck。首先当login.vm表单提交后，会执行本类的doCheck方法。
@FormGroup(“login”)Visitor visitor 这个注解是个牛逼的注解，他同时做了几件事，第一是表单验证，如果表单验证通过，则执行doCheck方法，如果不通过，不执行方法，然后，取得form和login group对象，并将group中的数据注入到Visitor对象中。根据设置好的名字，name注入到name中，passwd注入到passwd中。
nav.redirectTo(“app1Link”).withTarget(“form/welcome”).withParameter(“name”,name); 这就是做页面跳转啦。。

4、然后我们还要修改WEB-INF/app1/form.xml,增加一下内容


<group name="login">
<field name="name"displayName="你的名字">
<fm-validators:required-validator>
<message>必须填写 $\{displayName\}</message>
</fm-validators:required-validator>
</field>
<field name="passwd"displayName="你的名字">
<fm-validators:required-validator>
<message>必须填写 $\{displayName\}</message>
</fm-validators:required-validator>
</field>
</group>

这个表单验证就不仔细说了，应该可以看得懂，看不懂的看官方文档吧

至此，项目所需要的代码就全都写完了。可以尝试在浏览器输入http://localhost:8081/login.htm
首先，用户名和密码都不填写，点击提交
填写用户名密码都填写成admin点击提交。这个时候你应该会看到你想看到的结果的。

秒客网

webx 框架入门一

相关文章