03-jquery-easy-uiとSpringMvcを組み合わせたログイン例
このブログは個人的な観点を代表しています.本人の経験が浅いので、間違いがあったら私信で訂正してください.ありがとうございます.
準備作業、jquery-easyui-1.3.3をダウンロードします.zip、およびjquery-2.0.0.js,それをWebRootの下に入れてファイルJSを作成する
ページ参照easyuiの便利さのためにjqueryを確立する.jsp
ログインページを作成します
およびuserControllerは、例であるため、任意のアカウントパスワードにログインできます.
Jsonクラスコードは
TuserDtoクラスコードは
準備作業、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;
}
}