SpringBoot+layui实现简单登录（后端+前端联调实现）

上文：SpringBoot+layui实现简单登录（项目创建+前后端配置）

后端

目录

mybatis-plus扫描位置

数据表 User表

CREATE TABLE `sys_user` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `user_code` varchar(32) DEFAULT NULL COMMENT '账号名称',
  `username` varchar(32) DEFAULT NULL COMMENT '用户名',
  `password` varchar(32) DEFAULT NULL COMMENT '密码',
  `email` varchar(32) DEFAULT NULL COMMENT '邮箱',
  `mobile` varchar(32) DEFAULT NULL COMMENT '手机号',
  `status` tinyint DEFAULT NULL COMMENT '状态  0：禁用   1：正常',
  `create_by` bigint DEFAULT NULL COMMENT '创建者ID',
  `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_by` bigint DEFAULT NULL COMMENT '更新人',
  `update_time` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb3 COMMENT='系统用户';

UserController

package com.example.controller;

import com.example.model.User;
import com.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/sys/user")
public class UserController {
    
    

    @Autowired
    private UserService userService;

    @GetMapping("getUserList")
    public List<Map> getUserList(){
    
    
        return userService.getUserList();
    }

    @PostMapping("save")
    public void save(@RequestBody User user){
    
    
        userService.save(user);
    }
}

UserService

package com.example.service;

import com.example.model.User;

import java.util.List;
import java.util.Map;

public interface UserService {
    
    
    List<Map> getUserList();

    void save(User user);
}

UserServiceImpl

这边要注意配置@Service注解

package com.example.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.example.mapper.UserMapper;
import com.example.model.User;
import com.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.sql.Wrapper;
import java.util.List;
import java.util.Map;

@Service
public class UserServiceImpl implements UserService {
    
    

    @Autowired
    private UserMapper userMapper;

    @Override
    public List<Map> getUserList() {
    
    
        QueryWrapper query = new QueryWrapper<User>();
        return userMapper.selectList(query);
    }

    @Override
    public void save(User user) {
    
    
        userMapper.insert(user);
    }
}

UserMapper

通过BaseMapper能够继承mybatis-plus提供的基本的增删改查方法

package com.example.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.model.User;
import org.apache.ibatis.annotations.Mapper;

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

User实体类

package com.example.model;

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

import java.util.Date;

@Data
@TableName("sys_user")
public class User {
    
    
    @TableId(type = IdType.AUTO)
    private Long id;

    private String userCode;

    private String username;

    private String password;

    private String email;

    private String mobile;

    private Integer status;

    private Long createBy;

    private Date createTime;

    private Long updateBy;

    private Date updateTime;
}

postman接口调用

后端基本链路实现完成

简单登录

登录接口

LoginController

package com.example.controller;

import com.example.common.utils.Message;
import com.example.model.User;
import com.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("login")
public class LoginController {
    
    
    @Autowired
    private UserService userService;

    @PostMapping("login")
    public Message login(String userCode,String password){
    
    
        User user = new User();
        user.setUserCode(userCode);
        user = userService.selectUser(user);
        if (user == null){
    
    
            return Message.error("账号不存在");
        }
        if (password.equals(user.getPassword())){
    
    
            return Message.SUCCESS_MESSAGE;
        }else{
    
    
            return Message.error("密码错误");
        }
    }
}

User selectUser(User user);

@Override
public User selectUser(User user) {
    
    
    QueryWrapper query = new QueryWrapper<User>();
    query.eq("user_code",user.getUserCode());
    return userMapper.selectOne(query);
}

前端接口调用

login.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/layui/css/admin.css">
    <link rel="stylesheet" href="/layui/css/log.css">
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>Demo-Manage</h2>
            <p>基于Layui的后台管理系统</p>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
                <input type="text" id="userCode"  lay-verify="required" placeholder="用户名" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
                <input type="password" id="password" lay-verify="required" placeholder="密码" readonly onfocus="this.removeAttribute('readonly');" class="layui-input">
            </div>
            <div class="layui-form-item" style="margin-bottom: 20px;">
                <input type="checkbox" name="remember" lay-skin="primary" title="记住密码" >
                <a href="#" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit  id="userlogin">登 入</button>
            </div>
            <div class="layui-trans layui-form-item layadmin-user-login-other">
                <label>社交账号登入</label>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>

                <a href="#" class="layadmin-user-jump-change layadmin-link">注册帐号</a>
            </div>
        </div>
    </div>
</div>

<script src="/layui/layui.js" type="text/javascript"></script>
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/vue.min.js" type="text/javascript"></script>
<script>

    //JavaScript代码区域
    layui.use(['layer','element','form','jquery'], function(){
    
    
        let layer = layui.layer;
        let form = layui.form;
        let element = layui.element;
        let $ = layui.jquery;

        $("#userlogin").click(function(){
    
    
            let userCode = $("#userCode").val()
            let password = $("#password").val()
            $.ajax({
    
    
                url:"http://localhost:8080/login/login",
                data:{
    
    
                    userCode:userCode,
                    password:password
                },
                type:"post",
                success:function(result){
    
    
                    console.log(result);
                    if (result.type==='success'){
    
    
                        layer.msg(result.tip,{
    
    icon:1,time:2000},function () {
    
    
                            location.href="http://localhost:8080/index.html"
                        })
                    }else if (result.type==='error'){
    
    
                        layer.msg(result.tip)
                    }else {
    
    
                        layer.msg('未知异常，请联系管理员')
                    }
                },

            })
        });



    });

</script>
</body>
</html>

登录测试

跳转

登录失败

大概的实现就是这样了，有其他问题可评论留言

补充：
封装类Message

package com.example.common.utils;


import java.io.Serializable;

public class Message implements Serializable {
    
    


    /**
     * 错误消息
     */
    public static final Message ERROR_MESSAGE = Message.error("操作失败");

    /**
     * 成功消息
     */
    public static final Message SUCCESS_MESSAGE = Message.success("操作成功");

    /**
     * 类型
     */
    public enum Type {
    
    

        /**
         * 成功
         */
        success,

        /**
         * 警告
         */
        warn,

        /**
         * 错误
         */
        error
    }

    /**
     * 类型
     */
    private Type type;

    /**
     * 提示内容
     */
    private String tip;


    /**
     * 如果是Grid查询，则content为分页对象
     * 如果是主键查询，则Content为具体的检索对象
     */
    private Object data;


    /**
     * 初始化一个新创建的 Message 对象，使其表示一个空消息。
     */
    public Message() {
    
    

    }

    public Message(Object data) {
    
    
        this.data = data;
    }

    public Message(Type type, String tip) {
    
    
        this.type = type;
        this.tip = tip;
    }

    /**
     * 初始化一个新创建的 Message 对象
     *
     * @param type 类型
     * @param tip  内容
     */
    public Message(Type type, String tip, Object data) {
    
    
        this.type = type;
        this.tip = tip;
        this.data = data;
    }

    /**
     * 返回成功消息
     *
     * @param tip 内容
     * @return 成功消息
     */
    public static Message success(String tip) {
    
    
        return new Message(Type.success, tip);
    }

    /**
     * @param tip     页面提示内容
     * @param content 封装结果实体
     * @return
     */
    public static Message success(String tip, Object data) {
    
    
        return new Message(Type.success, tip, data);
    }


    /**
     * 返回警告消息
     *
     * @param tip 内容
     * @return 警告消息
     */
    public static Message warn(String tip) {
    
    
        return new Message(Type.warn, tip);
    }

    /**
     * 返回错误消息
     *
     * @param tip 内容
     * @return 错误消息
     */
    public static Message error(String tip) {
    
    
        return new Message(Type.error, tip);
    }

    /**
     * 返回错误消息
     *
     * @param tip 内容
     * @return 错误消息
     */
    public static Message error(String tip, Object data) {
    
    
        return new Message(Type.error, tip, data);
    }


    /**
     * 获取类型
     *
     * @return 类型
     */
    public Type getType() {
    
    
        return type;
    }

    /**
     * 设置类型
     *
     * @param type 类型
     */
    public void setType(Type type) {
    
    
        this.type = type;
    }

    /**
     * 获取内容
     *
     * @return 内容
     */
    public String getTip() {
    
    
        return tip;
    }

    /**
     * 设置内容
     *
     * @param tip 内容
     */
    public void setTip(String tip) {
    
    
        this.tip = tip;
    }


    public Object getData() {
    
    
        return data;
    }

    public void setData(Object data) {
    
    
        this.data = data;
    }
}

上文：SpringBoot+layui实现简单登录（项目创建+前后端配置）