03-jquery-easy-uiとSpringMvcを組み合わせたログイン例


このブログは個人的な観点を代表しています.本人の経験が浅いので、間違いがあったら私信で訂正してください.ありがとうございます.
準備作業、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;
	}

	
	


}