代码上来说的话我个人感觉还是有很大的进步空间的🐾加油啦，下面展示主要的代码内容，展示几个界面吧，不太好看，见谅哈🙋♀️
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
function login_username(){
$.get({
url:"${pageContext.request.contextPath}/judge",
data: {"username" : $("#username").val()},
success:function (data){
console.log($("#username").val());
if(data.toString()==='ok'){
$("#userInfo").css("color","green");
}
$("#userInfo").html(data);
}
})
}
function login_pwd(){
$.get({
url:"${pageContext.request.contextPath}/judge",
data: {"pwd" : $("#pwd").val()},
success:function (data){
if(data.toString()==='ok'){
$("#pwdInfo").css("color","green");
}
$("#pwdInfo").html(data);
}
})
}
</script>
</head>
<body>
<!-- End Backgrounds -->
<div class="container" id="login">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="login">
<h1>Login</h1>
<%-- 如果用户都填完信息之后后台检测不到该用户--%>
${msg};
<!-- Loging form -->
<form action="${pageContext.request.contextPath}/login" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="name" placeholder="Enter username" onblur="login_username()">
<span id="userInfo"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" onblur="login_pwd()">
<span id="pwdInfo"></span>
</div>
<div class="form-check">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="form-check-label">Remember me</label>
<label class="forgot-password">
<a href="#">Forgot Password?</a>
</label>
</div>
<br>
<button type="submit" class="btn btn-lg btn-block btn-success">Sign in</button>
</form>
<!-- End Loging form -->
</div>
</div>
</div>
</div>
</body>
</html>
重点就是对于ajax的拦截处理！！！千万不能忘记！！不然ajax很可能不起作用！可以去看看我的这篇文章：
传送门🌬🌬
package com.xmonster.interceptor;
import com.xmonster.pojo.User;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class LoginInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
String requestURI = request.getRequestURI();
if(requestURI.contains("login")){
return true;
}
HttpSession session = request.getSession();
User user = (User)session.getAttribute("USER_SESSION");
if(user!=null){
return true;
}
// 判断是不是ajax请求
String XRequested = request.getHeader("X-Requested-With");
if(XRequested.equals("XMLHttpRequest")){
//说明这是一个ajax请求
return true;
}
request.setAttribute("msg", "你还没登录，请先登录！");
request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request, response);
return false;
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
// HandlerInterceptor.super.postHandle(request, response, handler, modelAndView);
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
// HandlerInterceptor.super.afterCompletion(request, response, handler, ex);
}
}
package com.xmonster.controller;
import com.xmonster.pojo.Books;
import com.xmonster.pojo.User;
import com.xmonster.service.BookService;
import com.xmonster.service.UserServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.util.List;
@Controller
public class LoginController {
private UserServiceImpl userService;
public UserServiceImpl getUserService() {
return userService;
}
@Autowired
public void setUserService(UserServiceImpl userService) {
this.userService = userService;
}
// 向用户登陆页面跳转
@RequestMapping(value = "/tologin")
public String toLogin(){
return "redirect:/login";
}
//用户登录
@RequestMapping(value = "/login")
public String login(User user, Model model, HttpSession session, HttpServletRequest request){
String userName = user.getName();
String userPwd = user.getPwd();
if(userName != null && userPwd != null){
List<User> userList = userService.selectAllUser();
for (User user1 : userList) {
if(userName.equals(user1.getName()) && userPwd.equals(user1.getPwd())){
session.setAttribute("USER_SESSION",user);
return "redirect:/book/allBook";
}
}
}
model.addAttribute("msg", "用户名或密码错误，请检查！");
return "login";
}
//退出登录
@RequestMapping(value = "/logout")
public String logOut(HttpSession session){
session.invalidate();
return "redirect:/login";
}
}
这一块的话大家就可以自己变着花样玩
package com.xmonster.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class Judge {
@RequestMapping("/judge")
public String JudgeLogin(String username,String pwd){
System.out.println(username);
String info = "";
if(username != null){
info="ok";
}
if(username == ""){
info="用户名不能为空！";
}
if(pwd != null){
info="ok";
}
if(pwd == ""){
info="密码不能为空";
}
return info;
}
}
好啦，今天就到这吧，晚安🌛🌛🌛
