一、EasyUI组件的简单介绍
easyUI提供了很多组件让我们使用,如下图所示:
使用这些组件可以帮助我们快速地进行项目开发,下面以一个用户登录程序为例讲解EasyUI组件的使用
二、EasyUI组件的使用
2.1、创建测试的JavaWeb项目
2.2、编写测试代码
编写一个用户登录页面Login1.html,用于输入用户名和密码进行登录,使用JQuery的ajax方法异步提交表单
Login1.html的代码如下:
<!DOCTYPE html> <html> <head> <title>EasyUI组件使用范例</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入JQuery --> <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script> <!-- 引入EasyUI --> <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 --> <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <!-- 引入EasyUI的样式文件--> <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/> <!-- 引入EasyUI的图标样式文件--> <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/> <script type="text/javascript" src="js/Utils.js"></script> <script type="text/javascript"> $(function(){ //console.info(g_contextPath); //console.info(g_basePath); //页面加载完成之后创建登录的dialog $('#loginAndRegisterForm').dialog({ title: '用户登录', width: 240, height: 150, closable: false,//设置dialog不允许被关闭 cache: false, modal: true, buttons:[ { text:'登录', iconCls: 'icon-ok', width:70, height:30, handler:function(){ //console.info(g_contextPath+'/servlet/LoginHandleServlet'); //console.info(g_basePath+'/servlet/LoginHandleServlet'); //console.info($('#loginForm').serialize());//在火狐中打印的结果:userName=gacl&userPwd=123 loginHandle();//处理用户登录 } }, { text:'重置', iconCls: 'icon-ok', width:70, height:30, handler:function(){ doReset('loginForm'); } } ] }); /*重置form表单*/ function doReset(formId){ $(':input','#'+formId) .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); } /*处理用户登录*/ function loginHandle(){ $.ajax({ //url:g_contextPath+'/servlet/LoginHandleServlet', url:g_basePath+'/servlet/LoginHandleServlet',//url表示服务器端处理用户登录的URL地址 /*data:{ //data表示要提交到服务器端的数据,通常的写法 "userName":$("#userName").val(), "userPwd":$("#userPwd").val() },*/ //data表示要提交到服务器端的数据,更加简洁的写法 data:$('#loginForm').serialize(),//serialize()方法的作用是将form表单中的内容序列化成字符串 cahe:false, /* 用dataType来指明服务器端返回的数据格式是一个json字符串,客户端接收到返回的json字符串之后, Jquery会自动把这个json字符串转换成一个Json对象 */ dataType:'json', success:function(r){ //此时的r已经是经过Jquery处理过之后的Json对象了 //console.info(r.msg); if(r && r.success){ //调用dialog的close方法关闭dialog $('#loginAndRegisterForm').dialog('close'); $.messager.show({ title:'消息', msg:r.msg }); //登录成功后跳转到系统首页 //window.location.replace(g_basePath+'/index.jsp'); //window.location.href = g_basePath+'/index.jsp'; }else{ $.messager.alert('消息',r.msg); } } }); } }); </script> </head> <body><div id="loginAndRegisterForm"> <form method="post" id="loginForm"> <table> <tr> <th style="text-align:left;"> 用户名: </th> <td> <!-- class="easyui-textbox"表示使用EasyUI的textbox组件--> <input type="text" id="userName" style="width:150px;" name="userName" class="easyui-textbox"/> </td> </tr> <tr> <th style="text-align:left;"> 密码: </th> <td> <input type="password" id="userPwd" style="width:150px;" name="userPwd" class="easyui-textbox"/> </td> </tr> </table> </form> </div> </body> </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; })(); /** * 获得项目根路径,等价于jsp页面中 * <% String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> * 使用方法: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); } /** * 获取Web应用的contextPath,等价于jsp页面中 * <% String path = request.getContextPath(); %> * 使用方法: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,代码如下:
<!DOCTYPE html> <html> <head> <title>EasyUI组件使用范例</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入JQuery --> <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script> <!-- 引入EasyUI --> <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 --> <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <!-- 引入EasyUI的样式文件--> <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/> <!-- 引入EasyUI的图标样式文件--> <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/> <script type="text/javascript" src="js/Utils.js"></script> <script type="text/javascript"> $(function(){ //console.info(g_contextPath); //console.info(g_basePath); $('#loginAndRegisterForm').dialog({ title: '用户登录', width: 240, height: 150, closable: false,//设置dialog不允许被关闭 cache: false, modal: true, buttons:[ { text:'登录', iconCls: 'icon-ok', width:70, height:30, handler:function(){ //console.info(g_contextPath+'/servlet/LoginHandleServlet'); //console.info(g_basePath+'/servlet/LoginHandleServlet'); //console.info($('#loginForm').serialize());//在火狐中打印的结果:userName=gacl&userPwd=123 loginHandle();//处理用户登录 } }, { text:'重置', iconCls: 'icon-ok', width:70, height:30, handler:function(){ doReset('loginForm'); } } ] }); /*重置form表单*/ function doReset(formId){ $(':input','#'+formId) .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); } /*处理用户登录*/ function loginHandle(){ //使用EasyUI提供的form组件来提交表单 $('#loginForm').form('submit',{ //url:g_contextPath+'/servlet/LoginHandleServlet', url:g_basePath+'/servlet/LoginHandleServlet',//url表示服务器端处理用户登录的URL地址 success:function(r){ //注意:此时的r只是一个普通的Json字符串,因此需要手动把它变成Json对象 //console.info(r); //r = JSON.parse(r);//利用IE8支持的原生JSON对象的parse方法将json字符串转换成标准的JSON对象 //r=eval('('+r+')');//利用eval方法将将json字符串转换成标准的JSON对象 r = $.parseJSON(r);//利用Jquery的parseJSONfang将json字符串转换成标准的JSON对象 //console.info(r); if(r && r.success){ //调用dialog的close方法关闭dialog $('#loginAndRegisterForm').dialog('close'); $.messager.show({ title:'消息', msg:r.msg }); //登录成功后跳转到系统首页 //window.location.replace(g_basePath+'/index.jsp'); //window.location.href = g_basePath+'/index.jsp'; }else{ $.messager.alert('消息',r.msg); } } }); } }); </script> </head> <body><div id="loginAndRegisterForm"> <form method="post" id="loginForm"> <table> <tr> <th style="text-align:left;">用户名:</th> <!-- class="easyui-textbox"表示使用EasyUI的textbox组件--> <td><input type="text" id="userName" style="width:150px;" name="userName" class="easyui-textbox"/></td> </tr> <tr> <th style="text-align:left;">密码:</th> <td><input type="password" id="userPwd" style="width:150px;" name="userPwd" class="easyui-textbox"/></td> </tr> </table> </form> </div> </body> </html>