登录页面

导入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" onclick="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;
    }
}

LibrarySystem图书管理系统(六)

登录页面

第一步：添加Bootstrap和JQuery

第二步：创建login.html

第三步：创建loginJS.js

第四步：修改UserController.java

第五步：测试运行

猜你喜欢