准备工作,下载jquery-easyui-1.3.3.zip,以及jquery-2.0.0.js,将其放入WebRoot下,建立文件JS
为了页面引用easyui方便,建立jquery.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery-easyui-1.3.3/themes/default/easyui.css" type="text/css"></link> <script src="${pageContext.request.contextPath}/js/jquery-2.0.0.js" type="text/javascript" charset="utf-8"></script> <script src="${pageContext.request.contextPath}/js/jquery-easyui-1.3.3/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
然后创建登录页面
<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <jsp:include page="jquery.jsp"></jsp:include> <base href="<%=basePath%>"> <title>登录</title> <script type="text/javascript"> $(function(){ $('#dd').dialog({ title: '登录', closed: false, cache: false, closable:false, modal: false, shadow:false, buttons:[{ text:'登录', handler:function(){ $.messager.progress(); // display the progress bar $('#login_form').form('submit', { url:'${pageContext.request.contextPath}/userController/login', onSubmit: function(){ var isValid = $(this).form('validate'); if (!isValid){ $.messager.progress('close'); // hide progress bar while the form is invalid } return isValid; // return false will stop the form submission }, success: function(data){ var data = eval('(' + data + ')'); // change the JSON string to javascript object if (data.success){ $.messager.progress('close'); // alert(data.msg); location.replace("${pageContext.request.contextPath}/index.jsp"); // window.location.href="${pageContext.request.contextPath}/index.jsp"; // window.redirect('${pageContext.request.contextPath}/index.jsp',_self) ; } else{ $.messager.progress('close'); $.messager.alert('错误', data.msg, 'error'); } } }); } },{ text:'重置', handler:function(){ $('#login_form').form('clear'); } }] } ); $('#dd').dialog('center'); } ); </script> </head> <body> [align=center" width="280px" height="100px" > <tr height="20px] <td align="right" height="20px">用户名:</td><td height="20px"><input id="user_name" name="login_name" class="easyui-validatebox" required="required" /></td> </tr> <tr height="20px"> <td align="right" height="20px">密码:</td><td height="20px"><input id="password" name="passwd" type="password" class="easyui-validatebox" required="required" /></td> </tr> </table> </form> [/align] </body> </html>
以及userController,由于是示例,就任意账号密码都能登录成功
package cn.cy.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import cn.cy.dto.Json; import cn.cy.dto.TuserDto; @Controller @RequestMapping("/userController") public class UserController { @RequestMapping("/login") @ResponseBody public Json login(TuserDto user){ Json json = new Json(); json.setSuccess(true); json.setMsg("OK"); return json; } }
Json类代码为
package cn.cy.dto; public class Json implements java.io.Serializable { private boolean success = false; private String msg = ""; private Object obj = null; public boolean isSuccess() { return success; } public void setSuccess(boolean success) { this.success = success; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public Object getObj() { return obj; } public void setObj(Object obj) { this.obj = obj; } }
TuserDto 类代码为
package cn.cy.dto; import java.util.Date; import org.springframework.format.annotation.DateTimeFormat; import cn.cy.model.Tdept; public class TuserDto { private String user_id; private String login_name; private String passwd; private String real_name; private String phone_number; private String dept_id; private String group_ids; public String getUser_id() { return user_id; } public void setUser_id(String user_id) { this.user_id = user_id; } public String getLogin_name() { return login_name; } public void setLogin_name(String login_name) { this.login_name = login_name; } public String getPasswd() { return passwd; } public void setPasswd(String passwd) { this.passwd = passwd; } public String getReal_name() { return real_name; } public void setReal_name(String real_name) { this.real_name = real_name; } public String getPhone_number() { return phone_number; } public void setPhone_number(String phone_number) { this.phone_number = phone_number; } public String getDept_id() { return dept_id; } public void setDept_id(String dept_id) { this.dept_id = dept_id; } public String getGroup_ids() { return group_ids; } public void setGroup_ids(String group_ids) { this.group_ids = group_ids; } }