SpringBoot+MyBatisPlus（2）—— 用户登录和注册

Yacht13

已于 2022-10-03 15:56:03 修改

阅读量2.7k

点赞数 3

分类专栏： SpringBoot + MyBatisPlus 文章标签： MyBatis-Plus SpringBoot

于 2022-09-30 20:14:40 首次发布

本文链接：https://blog.csdn.net/Archer__13/article/details/127124917

版权

SpringBoot + MyBatisPlus 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

一. 创建表

创建一个数据库springboot，在该数据库下创建一个user表

CREATE TABLE `user` (
  `id` int NOT NULL AUTO_INCREMENT,
  `username` varchar(45) UNIQUE, DEFAULT NULL, 
  `password` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`id`)
)

二. 编写实体类对象

package com.stu.springboot.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;

@Data    //会给实体类对象添加get和set方法、toString等方法  
public class User {
    @TableId(type = IdType.AUTO)  //type = IdType.AUTO表示id自动递增
    private Integer id;

    private String username;

    private String password;
}

三. Mapper层

package com.stu.springboot.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.stu.springboot.pojo.User;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserMapper extends BaseMapper<User> {
}

四. Service层

package com.stu.springboot.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.stu.springboot.pojo.User;

public interface UserService extends IService<User> {
}

package com.stu.springboot.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.stu.springboot.mapper.UserMapper;
import com.stu.springboot.pojo.User;
import com.stu.springboot.service.UserService;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}

五. Controller层

package com.stu.springboot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {
    @GetMapping("/")
    public String index(){
        return "index";
    }
}

package com.stu.springboot.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.stu.springboot.common.R;
import com.stu.springboot.pojo.User;
import com.stu.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@Controller
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("/user/loginPage")
    public String loginPage(){
        return "user/login";
    }

    @GetMapping("/user/registerPage")
    public String registerPage(){
        return "user/register";
    }

    @PostMapping("/user/login")
    @ResponseBody      //添加@ResponseBody注解将返回的数据自动转化为json, @RequestBody将接收的数据转化为json
    public R login(String username, String password, String isRemPwd, HttpServletRequest request, HttpSession session, HttpServletResponse response){
        LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(User::getUsername, username).eq(User::getPassword, password);
        User user = userService.getOne(queryWrapper);

        if(user == null){
            //登录失败
            return R.error("用户名或密码错误");
        }

        //登录成功
        session.setAttribute("loginUser", user);

        //如果需要记住密码，则添加cookie
        if("true".equals(isRemPwd)){
            Cookie cookie = new Cookie("username", username);
            cookie.setMaxAge(7*24*60*60);         //cookie保存7天
            cookie.setPath(request.getContextPath()+"/");    //设置cookie存在的路径
            response.addCookie(cookie);
        }else{
            //如果不需要记住密码，则将以前创建的cookie删掉
            Cookie cookie = new Cookie("username", null);
            cookie.setMaxAge(0);   //删除cookie
            cookie.setPath(request.getContextPath()+"/");    //设置cookie存在的路径
            response.addCookie(cookie);
        }

        return R.success(user);
    }

    @PostMapping("/user/register")
    @ResponseBody
    public R register(User user){
        LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper();
        queryWrapper.eq(User::getUsername, user.getUsername());
        User registerUser = userService.getOne(queryWrapper);

        if(registerUser != null){
            return R.error("用户名已存在");
        }
        userService.save(user);
        return R.success(user);
    }

    @GetMapping("/user/logout")
    public String logout(HttpServletRequest request, HttpSession session, HttpServletResponse response){
        //清空cookie
        Cookie cookie = new Cookie("username", null);
        cookie.setMaxAge(0);   //删除cookie
        cookie.setPath(request.getContextPath()+"/");    //设置cookie存在的路径
        response.addCookie(cookie);

        //销毁session
        session.invalidate();

        return "redirect:/";    //重定向到首页
    }
}

上面需要用到自定义common包下的R类（响应对象类）

package com.stu.springboot.common;

import lombok.Data;

import java.util.HashMap;
import java.util.Map;

@Data
public class R<T> {     //服务端响应的数据都会封装成此对象

    private Integer code; //编码：1成功，0和其它数字为失败

    private String message; //错误信息

    private T objectData; //数据

    private Map map = new HashMap(); //动态数据

    public static <T> R<T> success(T object) {
        R<T> r = new R<T>();
        r.objectData = object;
        r.code = 1;
        return r;
    }

    public static <T> R<T> error(String message) {
        R r = new R();
        r.message = message;
        r.code = 0;
        return r;
    }

    public R<T> add(String key, Object value) {
        this.map.put(key, value);
        return this;
    }

}

六. 编写页面

1. 在templates目录下创建一个index.html页面

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>首页</title>
</head>
<body>
    <a th:href="@{/user/loginPage}"><input type="button" value="登录"/></a>
    <a th:href="@{/user/registerPage}"><input type="button" value="注册"/></a>
    <a th:href="@{/manage/bookPage}"><input type="button" value="图书管理"/></a>
</body>
</html>

2. 在templates目录下创建一个user目录，在user目录下创建login.html和register.html页面

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户登录</title>

    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
    <script type="text/javascript">
        $(function(){
            //给浏览器窗口添加键盘按下事件
            $(window).keydown(function (e){
                //如果按的是回车键，则提交登录请求
                if(e.keyCode == 13){
                    $("#loginBtn").click();
                }
            });

            //添加单击事件
            $("#loginBtn").click(function(){
                //获取请求参数
                var loginUsername = $.trim($("#loginUsername").val());  //(将用户不小心输入的空格去掉)
                var loginPassword = $.trim($("#loginPassword").val());
                var isRemPwd = $("#isRemPwd").prop("checked");

                //表单验证
                //验证用户名：必须由字母或数字或下划线组成，并且长度为1-12位
                var usernamePatt = /^\w{1,12}$/;
                if(!usernamePatt.test(loginUsername)){
                    $("#msg").text("用户名不合法");
                    return;
                }

                //验证用户密码：必须由字母或数字或下划线组成，并且长度为6-12位
                var passwordPatt = /^\w{6,12}$/;
                if(!passwordPatt.test(loginPassword)){
                    $("#msg").text("密码不合法");
                    return;
                }

                //发送请求
                $.ajax({
                    url:'[[@{/user/login}]]',    //thymeleaf在ajax中设置地址行形式
                    data:{
                        username:loginUsername,   //与controller中的形参名相同
                        password:loginPassword,
                        isRemPwd:isRemPwd
                    },
                    type:'post',
                    dataType:'json',
                    success:function (data){
                        if(data.code=="1"){
                            //登录成功，跳转到图书管理页面
                            window.location.href="/manage/bookPage";
                        }else{
                            //登录失败，不跳转（显示错误信息）
                            $("#msg").text(data.message);
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
    <span id="msg"></span>  <br/>
    <form>
        用户名：<input type="text" id="loginUsername"> <br/>
        密码：<input type="password" id="loginPassword"> <br/>
        <input type="checkbox" id="isRemPwd">记住密码<br/>
        <button type="button" id="loginBtn">登录</button>
    </form>

</body>
</html>

<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户注册</title>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
    <script type="text/javascript">
        $(function(){
            //给浏览器窗口添加键盘按下事件
            $(window).keydown(function (e){
                //如果按的是回车键，则提交登录请求
                if(e.keyCode == 13){
                    $("#registerBtn").click();
                }
            });

            //添加单击事件
            $("#registerBtn").click(function(){
                //获取请求参数
                var registerUsername = $.trim($("#registerUsername").val());  //(将用户不小心输入的空格去掉)
                var registerPassword = $.trim($("#registerPassword").val());
                var confirmPassword = $.trim($("#confirmPassword").val());
                var email = $.trim($("#email").val());

                //表单验证
                //验证用户名：必须由字母或数字或下划线组成，并且长度为1-12位
                var usernamePatt = /^\w{1,12}$/;
                if(!usernamePatt.test(registerUsername)){
                    $("#msg").text("用户名不合法");
                    return;
                }

                //验证用户密码：必须由字母或数字或下划线组成，并且长度为6-12位
                var passwordPatt = /^\w{6,12}$/;
                if(!passwordPatt.test(registerPassword)){
                    $("#msg").text("密码不合法");
                    return;
                }

                //验证确认密码：必须和密码相同
                if(confirmPassword != registerPassword){
                    $("#msg").text("密码不一致");
                    return;
                }

                //发送请求
                $.ajax({
                    url:'register',
                    data:{
                        username:registerUsername,    //需要和Controller中方法的形参同名
                        password:registerPassword,
                        email:email
                    },
                    type:'post',
                    dataType:'json',
                    success:function (data){
                        if(data.code=="1"){
                            //注册成功，跳转到登录页面
                            window.location.href="/user/loginPage";
                        }else{
                            //注册失败，不跳转（显示错误信息）
                            $("#msg").text(data.message);
                        }
                    }
                });
            });
        });
    </script>

</head>
<body>
<span id="msg"></span>  <br/>
    <form>
        用户名：<input type="text" id="registerUsername"> <br/>
        用户密码：<input type="password" id="registerPassword"> <br/>
        确认密码：<input type="password" id="confirmPassword"> <br/>
        <button type="button" id="registerBtn">注册</button>
    </form>

</body>
</html>