EasyUi的使用与代码编写(二)
EasyUi组件
EasyUI组件的简单介绍
easyUI提供了很多组件让我们使用，如下图所示：
使用这些组件可以帮助我们快速地进行项目开发，下面以一个用户登录程序为例讲解EasyUI组件的使用
EasyUI组件的使用
创建测试的JavaWeb项目
编写测试代码
编写一个用户登录页面Login1.html，用于输入用户名和密码进行登录，使用JQuery的ajax方法异步提交表单
Login1.html的代码如下：
1
2
3
4 EasyUI组件使用范例
5
6
7
8
9
10
11
12
13
14
15
16
17
18 $(function(){
19 //console.info(g_contextPath);
20 //console.info(g_basePath);
21 //页面加载完成之后创建登录的dialog
22 $('#loginAndRegisterForm').dialog({
23 title: '用户登录',
24 width: 240,
25 height: 150,
26 closable: false,//设置dialog不允许被关闭
27 cache: false,
28 modal: true,
29 buttons:[
30 {
31 text:'登录',
32 iconCls: 'icon-ok',
33 width:70,
34 height:30,
35 handler:function(){
36 //console.info(g_contextPath+'/servlet/LoginHandleServlet');
37 //console.info(g_basePath+'/servlet/LoginHandleServlet');
38 //console.info($('#loginForm').serialize());//在火狐中打印的结果：userName=gacl&userPwd=123
39 loginHandle();//处理用户登录
40 }
41 },
42 {
43 text:'重置',
44 iconCls: 'icon-ok',
45 width:70,
46 height:30,
47 handler:function(){
48 doReset('loginForm');
49 }
50 }
51 ]
52
53 });
54
55 /*重置form表单*/
56 function doReset(formId){
57 $(':input','#'+formId)
58 .not(':button, :submit, :reset, :hidden')
59 .val('')
60 .removeAttr('checked')
61 .removeAttr('selected');
62 }
63
64 /*处理用户登录*/
65 function loginHandle(){
66 $.ajax({
67 //url:g_contextPath+'/servlet/LoginHandleServlet',
68 url:g_basePath+'/servlet/LoginHandleServlet',//url表示服务器端处理用户登录的URL地址
69 /*data:{
70 //data表示要提交到服务器端的数据，通常的写法
71 "userName":$("#userName").val(),
72 "userPwd":$("#userPwd").val()
73 },*/
74 //data表示要提交到服务器端的数据，更加简洁的写法
75 data:$('#loginForm').serialize(),//serialize()方法的作用是将form表单中的内容序列化成字符串
76 cahe:false,
77 /*
78 用dataType来指明服务器端返回的数据格式是一个json字符串，客户端接收到返回的json字符串之后，
79 Jquery会自动把这个json字符串转换成一个Json对象
80 */
81 dataType:'json',
82 success:function(r){
83 //此时的r已经是经过Jquery处理过之后的Json对象了
84 //console.info(r.msg);
85 if(r && r.success){
86 //调用dialog的close方法关闭dialog
87 $('#loginAndRegisterForm').dialog('close');
88 $.messager.show({
89 title:'消息',
90 msg:r.msg
91 });
92 //登录成功后跳转到系统首页
93 //window.location.replace(g_basePath+'/index.jsp');
94 //window.location.href = g_basePath+'/index.jsp';
95 }else{
96 $.messager.alert('消息',r.msg);
97 }
98 }
99 });
100 }
101 });
102
103
104
105
106
107 孤傲苍狼
108
109
110
111
112
113 用户名：
114
115
116
117
118
119
120
121
122 密码：
123
124
125
126
127
128
129
130
131
132 Login1.html页面运行效果如下：
Login1.html中用到了一个Utils.js，Utils.js中有两个方法：getBasePath和getContextPath，分别用于获取Web应用的basePath和contextPath，获取Web应用的basePath和contextPath的目的就是为了在提交form表单到指定的Sevlet中进行处理时拼凑出处理请求的Servlet的绝对路径
例如：
url:g_contextPath+'/servlet/LoginHandleServlet'
url:g_basePath+'/servlet/LoginHandleServlet'
这样无论Servlet如何映射url-pattern，都可以正确找到该Servlet
Utils.js代码如下：
//立即执行的js
(function() {
//获取contextPath
var contextPath = getContextPath();
//获取basePath
var basePath = getBasePath();
//将获取到contextPath和basePath分别赋值给window对象的g_contextPath属性和g_basePath属性
window.g_contextPath = contextPath;
window.g_basePath = basePath;
})();
/**
* @author 孤傲苍狼
* 获得项目根路径，等价于jsp页面中
*
* 使用方法：getBasePath();
* @returns 项目的根路径
*
*/
function getBasePath() {
var curWwwPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
var localhostPath = curWwwPath.substring(0, pos);
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
return (localhostPath + projectName);
}
/**
* @author 孤傲苍狼
* 获取Web应用的contextPath，等价于jsp页面中
*
* 使用方法:getContextPath();
* @returns /项目名称(/EasyUIStudy_20141104)
*/
function getContextPath() {
return window.document.location.pathname.substring(0, window.document.location.pathname.indexOf('\/', 1));
};处理用户登录请求的Servlet的LoginHandleServlet代码如下：
package me.gacl.web.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import me.gacl.custom.model.Json;
public class LoginHandleServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//服务器端使用UTF-8编码将响应内容输出到客户端
response.setCharacterEncoding("UTF-8");
//通知客户端浏览器以UTF-8编码显示内容，避免产生中文乱码问题
response.setHeader("content-type", "text/html;charset=UTF-8");
String userName = request.getParameter("userName");
String userPwd = request.getParameter("userPwd");
Json json = new Json();
if (userName.equals("gacl") && userPwd.equals("123")) {
json.setMsg("登录成功");
json.setSuccess(true);
}else {
json.setMsg("用户名或密码错误，登录失败！");
json.setSuccess(false);
}
//使用alibaba(阿里巴巴)的fastJson工具类将Json对象转换成一个json字符串
String jsonStr = JSON.toJSONString(json);
//将json字符串作为响应内容输出到客户端浏览器。
response.getWriter().write(jsonStr);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}运行结果如下所示：
Login1.html中是以传统的ajax异步提交form表单的，下面我们来看看如何使用EasyUI提供的form组件来实现相同的功能，编写一个Login2.html，代码如下：
1
2
3
4 EasyUI组件使用范例
5
6
7
8
9
10
11
12
13
14
15
16
17
18 $(function(){
19 //console.info(g_contextPath);
20 //console.info(g_basePath);
21 $('#loginAndRegisterForm').dialog({
22 title: '用户登录',
23 width: 240,
24 height: 150,
25 closable: false,//设置dialog不允许被关闭
26 cache: false,
27 modal: true,
28 buttons:[
29 {
30 text:'登录',
31 iconCls: 'icon-ok',
32 width:70,
33 height:30,
34 handler:function(){
35 //console.info(g_contextPath+'/servlet/LoginHandleServlet');
36 //console.info(g_basePath+'/servlet/LoginHandleServlet');
37 //console.info($('#loginForm').serialize());//在火狐中打印的结果：userName=gacl&userPwd=123
38 loginHandle();//处理用户登录
39 }
40 },
41 {
42 text:'重置',
43 iconCls: 'icon-ok',
44 width:70,
45 height:30,
46 handler:function(){
47 doReset('loginForm');
48 }
49 }
50 ]
51
52 });
53
54 /*重置form表单*/
55 function doReset(formId){
56 $(':input','#'+formId)
57 .not(':button, :submit, :reset, :hidden')
58 .val('')
59 .removeAttr('checked')
60 .removeAttr('selected');
61 }
62
63 /*处理用户登录*/
64 function loginHandle(){
65 //使用EasyUI提供的form组件来提交表单
66 $('#loginForm').form('submit',{
67 //url:g_contextPath+'/servlet/LoginHandleServlet',
68 url:g_basePath+'/servlet/LoginHandleServlet',//url表示服务器端处理用户登录的URL地址
69 success:function(r){
70 //注意：此时的r只是一个普通的Json字符串，因此需要手动把它变成Json对象
71 //console.info(r);
72 //r = JSON.parse(r);//利用IE8支持的原生JSON对象的parse方法将json字符串转换成标准的JSON对象
73 //r=eval('('+r+')');//利用eval方法将将json字符串转换成标准的JSON对象
74 r = $.parseJSON(r);//利用Jquery的parseJSONfang将json字符串转换成标准的JSON对象
75 //console.info(r);
76 if(r && r.success){
77 //调用dialog的close方法关闭dialog
78 $('#loginAndRegisterForm').dialog('close');
79 $.messager.show({
80 title:'消息',
81 msg:r.msg
82 });
83 //登录成功后跳转到系统首页
84 //window.location.replace(g_basePath+'/index.jsp');
85 //window.location.href = g_basePath+'/index.jsp';
86 }else{
87 $.messager.alert('消息',r.msg);
88 }
89 }
90 });
91 }
92 });
93
94
95
96
97
98 孤傲苍狼
99
100
101
102
103 用户名：
104
105
106
107
108 密码：
109
110
111
112
113
114
115
运行效果如下：
parser源码分析
/**
* parser模块主要是解析页面中easyui的控件
*/
$.parser = {
// 是否自动解析
auto: true,
// 可以被解析的控件
plugins:['linkbutton','menu','menubutton','splitbutton','layout',
'tree','window','dialog','datagrid',
'combobox','combotree','numberbox','validatebox',
'calendar','datebox','panel','tabs','accordion'
],
// 解析函数
parse: function(context){
if ($.parser.auto){
for(var i=0; i
关注
打赏
![]()
1665965058
查看更多评论
最近更新
- 深拷贝和浅拷贝的区别（重点）
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state，props，refs（你学废了吗）
- 【脚手架VueCLI】从零开始，创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解（含代码）
- 【React】DOM的Diffing算法是什么？以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面？
