后端（springboot3+mybatis+redis+tokenJWT),前端（vue3+elementplus+axios+pinia+tokestores)前后端分离最完整最简易的项目

m0_63755691

已于 2024-06-21 15:07:03 修改

阅读量1k

点赞数 25

CC 4.0 BY-SA版权

文章标签：前端 java mybatis 数据库 redis spring boot elementui

于 2024-06-21 15:00:22 首次发布

本文链接：https://blog.csdn.net/m0_63755691/article/details/139858840

一、结果截图(结果截图只是展现功能的一小部分，只要您把前后端项目运行起来探讨，方能体会该项目中的精髓，该项目是本人JavaEE期末实验作业，结合Javaweb课程所开发）

1.登录页面：

2.注册页面：

3.首页：

4.审核页面：

5.添加申报页面：

6.删除和批量删除

7.管理员基本信息：

8.管理员更换用户头像页面：

9.管理员更改密码页面：

10.账号注销页面：

二、代码实验（后端（springboot3+mybatisplus+redis+toke,注意：必须开启redis服务，必须登录用户才能查看首页,账号123456，密码123456)

1.创建数据库以及添加数据。

/*
 Navicat MySQL Data Transfer

 Source Server         : 我的期望的
 Source Server Type    : MySQL
 Source Server Version : 80031
 Source Host           : localhost:3306
 Source Schema         : projectdb

 Target Server Type    : MySQL
 Target Server Version : 80031
 File Encoding         : 65001

 Date: 20/06/2024 15:23:02
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for projectinf
-- ----------------------------
DROP TABLE IF EXISTS `projectinf`;
CREATE TABLE `projectinf`  (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '项目编号',
  `projectName` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '项目名称',
  `startDate` date NOT NULL COMMENT '开始时间',
  `endDate` date NOT NULL,
  `status` int NOT NULL COMMENT '0-已申报\r\n1-审核中\r\n2-已审核',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = MyISAM AUTO_INCREMENT = 18 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of projectinf
-- ----------------------------
INSERT INTO `projectinf` VALUES (1, '北京社会科学基金2011年度申报', '2024-06-15', '2024-06-15', 0);
INSERT INTO `projectinf` VALUES (2, '国家自然科学基金2011年度申报', '2024-06-14', '2024-06-14', 2);
INSERT INTO `projectinf` VALUES (3, '国家社会科学基金2011年度申报', '2024-06-11', '2024-06-14', 1);
INSERT INTO `projectinf` VALUES (20, '北京社会科学基金2018年度申报', '2024-06-03', '2024-06-20', 2);
INSERT INTO `projectinf` VALUES (19, '北京社会科学基金2015年度申报', '2024-06-03', '2024-06-10', 1);
INSERT INTO `projectinf` VALUES (18, '北京社会科学基金2012年度申报', '2024-06-02', '2024-06-21', 0);
INSERT INTO `projectinf` VALUES (21, '北京社会科学基金2021年度申报', '2024-06-10', '2024-06-26', 2);
INSERT INTO `projectinf` VALUES (22, '南京社会科学基金2011年度申报', '2024-06-10', '2024-06-20', 0);
INSERT INTO `projectinf` VALUES (23, '南京社会科学基金2021年度申报', '2024-06-04', '2024-06-20', 1);
INSERT INTO `projectinf` VALUES (24, '江苏社会科学基金2011年度申报', '2024-06-04', '2024-06-19', 2);
INSERT INTO `projectinf` VALUES (25, '南京自然科学基金2011年度申报', '2024-06-02', '2024-06-20', 1);
INSERT INTO `projectinf` VALUES (26, '南京自然科学基金2015年度申报', '2024-06-10', '2024-06-12', 1);
INSERT INTO `projectinf` VALUES (27, '广东自然科学基金2011年度申报', '2024-06-11', '2024-06-19', 0);
INSERT INTO `projectinf` VALUES (28, '海南自然科学基金2011年度申报', '2024-06-17', '2024-06-26', 1);
INSERT INTO `projectinf` VALUES (29, '海南自然科学基金2021年度申报', '2024-06-11', '2024-06-12', 1);
INSERT INTO `projectinf` VALUES (30, '海南自然科学基金2012年度申报', '2024-06-11', '2024-06-12', 1);
INSERT INTO `projectinf` VALUES (31, '海南自然科学基金2024年度申报', '2024-06-11', '2024-06-19', 2);
INSERT INTO `projectinf` VALUES (32, '广东自然科学基金2024年度申报', '2024-06-11', '2024-06-19', 1);
INSERT INTO `projectinf` VALUES (33, '新疆自然科学基金2024年度申报', '2024-06-10', '2024-06-19', 1);
INSERT INTO `projectinf` VALUES (34, '黑河自然科学基金2024年度申报', '2024-06-10', '2024-06-19', 2);
INSERT INTO `projectinf` VALUES (35, '海南自然科学基金2026年度申报', '2024-06-11', '2024-06-27', 0);
INSERT INTO `projectinf` VALUES (36, '上海社会科学基金2024年度申报', '2024-06-10', '2024-06-19', 1);
INSERT INTO `projectinf` VALUES (37, '上海社会科学基金2021年度申报', '2024-06-11', '2024-06-11', 0);

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` int NOT NULL AUTO_INCREMENT,
  `username` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL,
  `password` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL,
  `userpic` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
  `name` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
  `email` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
  `phone` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
  `address` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
  `isadmin` bit(1) NOT NULL DEFAULT b'0',
  `isvalidate` bit(1) NOT NULL DEFAULT b'0',
  PRIMARY KEY (`id`, `username`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 57 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = DYNAMIC;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (35, '123', '202cb962ac59075b964b07152d234b70', 'https://big-eventa.oss-cn-beijing.aliyuncs.com/0696295f-a304-4a04-a3dd-de76da78dfd6.webp', '张三', '234234@232111', '12432467899', '广东省佛山市', b'0', b'0');
INSERT INTO `user` VALUES (52, '2342334', '0fd6f5a9f28ce32f8228594e7a2fc917', 'https://big-eventa.oss-cn-beijing.aliyuncs.com/31013a65-6e20-4f84-97f8-f02b0c7a0fcd.jpg', '', '', '', '', b'0', b'0');
INSERT INTO `user` VALUES (56, '123456', 'e10adc3949ba59abbe56e057f20f883e', 'https://big-eventa.oss-cn-beijing.aliyuncs.com/0696295f-a304-4a04-a3dd-de76da78dfd6.webp', '张三', '234234@232111', '12432467899', '广东省佛山市', b'0', b'0');
SET FOREIGN_KEY_CHECKS = 1;

2.创建springboot,项目名为springboot3_mybatisplus_redis_JWT。

3.导入pom.xml文件的依赖。

 <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>com.mysql</groupId>
    <artifactId>mysql-connector-j</artifactId>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    <scope>test</scope>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<dependency>
    <groupId>com.auth0</groupId>
    <artifactId>java-jwt</artifactId>
    <version>4.4.0</version>
</dependency>
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.5.5</version>
</dependency>

4.在项目中创建所需的包

5.在resoures包下创建application.properties和application.yml。

(1)application.propertie配置：

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/projectdb
spring.datasource.username=root
spring.datasource.password=123456
server.port=9095
#mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#mybatis.configuration.map-underscore-to-camel-case=true
spring.web.resources.static-locations=classpath:/

(2)application.yml:

spring:
  mvc:
    servlet:
      load-on-startup: 1
  spring:
    redis:
      host: localhost   #服务器地址 你服务器或本机地址
      port: 6379           #连接端口
      database: projectdb         #数据库索引，默认0
      password: 123456     #密码
      jedis:
        pool:
          max-active: 8    #连接池最大连接数(使用负值表示没有限制)
          max-wait: -1     #最大阻塞等待时间(使用负值表示没有限制)
          max-idle: 8      #最大空闲连接数
          min-idle: 0      #最小空闲连接数
      timeout: 5000        #连接超时时间（毫秒）
# 加入日志功能
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  # 设置MyBatis-Plus的全局配置
  global-config:
    db-config:
#      # 设置实体类所对应的表的统一前缀
#      table-prefix: t_
      # 设置统一的主键生成策略
      id-type: auto

6.在intercepters包下创建Logininterceptor类。

package org.example.springboot3_mybatisplus_redis_jwt.intercepters;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.example.springboot3_mybatisplus_redis_jwt.utils.JwtUtil;
import org.example.springboot3_mybatisplus_redis_jwt.utils.ThreadLocalUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import java.util.Map;

@Component
public class Logininterceptor implements HandlerInterceptor {
    @Autowired
    private StringRedisTemplate stringRedisTemplate;
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        System.out.println(request.getRequestURI());

        //令牌验证
        String token = request.getHeader("cookieshopUser");
        try {
            ValueOperations<String, String> operations = stringRedisTemplate.opsForValue();
            String redisToken = operations.get(token);
            if (redisToken==null){
                throw new RuntimeException();
            }
            Map<String, Object> claims = JwtUtil.parseToken(token);
            ThreadLocalUtil.set(claims);//把业务数据储存为ThreaddLocal中
            return true;
        } catch (Exception e) {
            response.setStatus(401);
            return false;
        }

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        ThreadLocalUtil.remove();
    }
}

7.在pojo包下创建projectinf、Result、User类。

（1）projectinf类：

package org.example.springboot3_mybatisplus_redis_jwt.pojo;
import com.baomidou.mybatisplus.annotation.TableField;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
import org.springframework.format.annotation.DateTimeFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class projectinf {
    private int id;
    @TableField(value = "projectName")
    private String projectName;
    @TableField(value = "startDate")
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd")
    private Date startDate;
    @TableField(value = "endDate")
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd")
    private Date endDate;
    private int status;
}

（2）Result实体类：

package org.example.springboot3_mybatisplus_redis_jwt.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

//统一响应结果
@NoArgsConstructor
@AllArgsConstructor
@Data
public class Result<T> {
    private Integer code;//业务状态码  0-成功  1-失败
    private String message;//提示信息
    private T data;//响应数据
    //快速返回操作成功响应结果(带响应数据)
    public static <E> Result<E> success(E data) {
        return new Result<>(0, "操作成功", data);
    }

    //快速返回操作成功响应结果
    public static Result success() {
        return new Result(0, "操作成功", null);
    }
    public static Result error(String message) {
        return new Result(1, message, null);
    }
}

（3）User实体类：

package org.example.springboot3_mybatisplus_redis_jwt.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor
@NoArgsConstructor
@Data
public class User {
    private Integer id;
    private String username;
    private String email;
    private String password;
    private String userpic;
    private String name;
    private String phone;
    private String address;
    private boolean isadmin;
    private boolean isvalidate;
}

8.在utils包下创建JwtUtil、Md5Util和ThreadLocalUtil实体类。

（1）JwtUtil实体类：

package org.example.springboot3_mybatisplus_redis_jwt.utils;
import com.auth0.jwt.JWT;
import com.auth0.jwt.algorithms.Algorithm;
import java.util.Date;
import java.util.Map;
public class JwtUtil {
    private static final String KEY = "quanfaqiang";
    //接收业务数据,生成token并返回
    public static String genToken(Map<String, Object> claims) {
        return JWT.create()
                .withClaim("claims", claims)
                .withExpiresAt(new Date(System.currentTimeMillis() + 1000 * 60 * 60 * 12))
                .sign(Algorithm.HMAC256(KEY));
    }
    //接收token,验证token,并返回业务数据
    public static Map<String, Object> parseToken(String token) {
        return JWT.require(Algorithm.HMAC256(KEY))
                .build()
                .verify(token)
                .getClaim("claims")
                .asMap();
    }
}

（2） Md5Util实体类：

package org.example.springboot3_mybatisplus_redis_jwt.utils;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
public class Md5Util {
    /**
     * 默认的密码字符串组合，用来将字节转换成 16 进制表示的字符,apache校验下载的文件的正确性用的就是默认的这个组合
     */
    protected static char hexDigits[] = {'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'};

    protected static MessageDigest messagedigest = null;

    static {
        try {
            messagedigest = MessageDigest.getInstance("MD5");
        } catch (NoSuchAlgorithmException nsaex) {
            System.err.println(Md5Util.class.getName() + "初始化失败，MessageDigest不支持MD5Util。");
            nsaex.printStackTrace();
        }
    }

    /**
     * 生成字符串的md5校验值
     *
     * @param s
     * @return
     */
    public static String getMD5String(String s) {
        return getMD5String(s.getBytes());
    }

    /**
     * 判断字符串的md5校验码是否与一个已知的md5码相匹配
     *
     * @param password  要校验的字符串
     * @param md5PwdStr 已知的md5校验码
     * @return
     */
    public static boolean checkPassword(String password, String md5PwdStr) {
        String s = getMD5String(password);
        return s.equals(md5PwdStr);
    }


    public static String getMD5String(byte[] bytes) {
        messagedigest.update(bytes);
        return bufferToHex(messagedigest.digest());
    }

    private static String bufferToHex(byte bytes[]) {
        return bufferToHex(bytes, 0, bytes.length);
    }

    private static String bufferToHex(byte bytes[], int m, int n) {
        StringBuffer stringbuffer = new StringBuffer(2 * n);
        int k = m + n;
        for (int l = m; l < k; l++) {
            appendHexPair(bytes[l], stringbuffer);
        }
        return stringbuffer.toString();
    }

    private static void appendHexPair(byte bt, StringBuffer stringbuffer) {
        char c0 = hexDigits[(bt & 0xf0) >> 4];// 取字节中高 4 位的数字转换, >>>
        // 为逻辑右移，将符号位一起右移,此处未发现两种符号有何不同
        char c1 = hexDigits[bt & 0xf];// 取字节中低 4 位的数字转换
        stringbuffer.append(c0);
        stringbuffer.append(c1);
    }

}

(3)ThreadLocalUtil 工具类：

package org.example.springboot3_mybatisplus_redis_jwt.utils;

/**
 * ThreadLocal 工具类
 */
@SuppressWarnings("all")
public class ThreadLocalUtil {
    //提供ThreadLocal对象,
    private static final ThreadLocal THREAD_LOCAL = new ThreadLocal();
    //根据键获取值
    public static <T> T get(){
        return (T) THREAD_LOCAL.get();
    }

    //存储键值对
    public static void set(Object value){
        THREAD_LOCAL.set(value);
    }
    //清除ThreadLocal 防止内存泄漏
    public static void remove(){
        THREAD_LOCAL.remove();
    }
}

9.在config包下创建MybatisPlusConfig和WebConfig配置类。

（1）MybatisPlusConfig配置类：

package org.example.springboot3_mybatisplus_redis_jwt.config;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MybatisPlusConfig {

    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

（2）WebConfig配置类：

package org.example.springboot3_mybatisplus_redis_jwt.config;
import org.example.springboot3_mybatisplus_redis_jwt.intercepters.Logininterceptor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Autowired
    private Logininterceptor logininterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(logininterceptor).excludePathPatterns("/login","/register","/index");
    }
}

10.在mapper包下创建UserMapper和projectinfMapper接口。

（1）projectinfMapper接口：

package org.example.springboot3_mybatisplus_redis_jwt.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import org.example.springboot3_mybatisplus_redis_jwt.pojo.projectinf;

@Mapper
public interface projectinfMapper extends BaseMapper<projectinf> {
}

（2）UserMapper接口：

package org.example.springboot3_mybatisplus_redis_jwt.mapper;

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

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

11.在controller包下创建FileUploadController、projectinfController和UserController控制类。其中FileUploadController类为文件上传、projectinfController类有申报查询全部列表、根据申报项目名查找、删除、批量删除、搜索、修改、添加功能。UserController类有登录、注册、注销、根据id删除、添加、修改密码、搜索等功能。

（1） FileUploadController控制类：</

最低0.47元/天解锁文章

200万优质内容无限畅学

后端（springboot3+mybatis+redis+tokenJWT),前端（vue3+elementplus+axios+pinia+tokestores)前后端分离最完整最简易的项目

一、结果截图(结果截图只是展现功能的一小部分，只要您把前后端项目运行起来探讨，方能体会该项目中的精髓，该项目是本人JavaEE期末实验作业，结合Javaweb课程所开发）

1.登录页面：

2.注册页面：

3.首页：

4.审核页面：

5.添加申报页面：

6.删除和批量删除

7.管理员基本信息：

8.管理员更换用户头像页面：

9.管理员更改密码页面：

10.账号注销页面：

二、代码实验（后端（springboot3+mybatisplus+redis+toke,注意：必须开启redis服务，必须登录用户才能查看首页,账号123456，密码123456)

1.创建数据库以及添加数据。

2.创建springboot,项目名为springboot3_mybatisplus_redis_JWT。

3.导入pom.xml文件的依赖。

4.在项目中创建所需的包

5.在resoures包下创建application.properties和application.yml。

(1)application.propertie配置：

(2)application.yml:

6.在intercepters包下创建Logininterceptor类。

7.在pojo包下创建projectinf、Result、User类。

（1）projectinf类：

（2）Result实体类：

（3）User实体类：

8.在utils包下创建JwtUtil、Md5Util和ThreadLocalUtil实体类。

（1）JwtUtil实体类：

（2） Md5Util实体类：

(3)ThreadLocalUtil 工具类：

9.在config包下创建MybatisPlusConfig和WebConfig配置类。

（1）MybatisPlusConfig配置类：

（2）WebConfig配置类：

10.在mapper包下创建UserMapper和projectinfMapper接口。

（1）projectinfMapper接口：

（2）UserMapper接口：

（1） FileUploadController控制类：</