登录页面
- 导入Bootstrap-3.3.7.min
- 导入JQuery-1.7.1.min
- 创建html
- ajax表单验证
- 返回成功页面
第一步:添加Bootstrap和JQuery
第二步:创建login.html
<!doctype html>
<html lang="zh">
<script src="js/loginJS.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">
<script src="js/bootstrap-3.3.7.min.js"></script>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图书管理系统</title>
<!--<link rel="stylesheet" type="text/css" href="css/styles.css">-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<h2>用户登录</h2>
<div class="form-group">
<input type="text" id="username" class="form-control" placeholder="请输入用户名">
</div>
<div class="form-group">
<input type="password" id="password" class="form-control" placeholder="请输入密码">
</div>
<div class="form-group">
<button class="btn btn-primary btn-default" οnclick="login_submit()" type="submit">登录</button>
</div>
</div>
</div>
</div>
</body>
第三步:创建loginJS.js
function login_data(){
var username = document.getElementById("username");
var password = document.getElementById("password");
var data = {};
data["username"] = username.value;
data["password"] = password.value;
return data;
}
function login_submit(){
var data = login_data();
$.ajax({
url:"loginUser",
type:"POST",
data:data,
dataType:"JSON",
success:function (result) {
if(result == true){
alert("登录成功,立刻跳转管理页面!");
setTimeout('window.location.href="indexpage.html"');
}else{
alert("用户名或密码错误!");
}
},
error:function () {
alert("请求错误!");
}
});
}
第四步:修改UserController.java
package com.ray.controller;
import com.ray.entity.User;
import com.ray.service.UserService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* @author Ray
* @date 2018/5/23 0023
*/
@Controller
public class UserController {
private Logger logger = LoggerFactory.getLogger(this.getClass());
@Resource
private UserService userService;
/**
* 用户注册
* @RequestMapping 请求路径
* @ResponseBody 返回JSON数据
*/
@RequestMapping("insertUser")
@ResponseBody
public boolean insertUser(HttpServletRequest request, HttpServletResponse response){
String username = request.getParameter("username");
String password = request.getParameter("password");
String email = request.getParameter("email");
boolean result = userService.checkRegister(username,password,email);
if(result){
return true;
}
return false;
}
/**
* 用户登录
* @RequestMapping 请求路径
* @ResponseBody 返回JSON数据
*/
@RequestMapping("loginUser")
@ResponseBody
public boolean loginUser(HttpServletRequest request, HttpServletResponse response){
String username = request.getParameter("username");
String password = request.getParameter("password");
//控制台输出 -> 测试
System.out.println("login_username: " + username);
System.out.println("login_password: " + password);
HttpSession session = request.getSession();
User user = userService.checkLogin(username, password);
if(user != null){
session.setAttribute("username", user.getUserName());
return true;
}
return false;
}
}
第五步:测试运行