后端
目录
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;
}
}