基于uniapp原生组件uni-ui 做一个登录注册与个人中心（后端篇）

以你之姓@ 2024-03-16 07:26 71阅读 0赞

基于uniapp原生组件uni-ui 做一个登录注册与个人中心（后端篇）

简介

本文使用springboot+mybatis-plus实现用户表的后端代码，包含加密功能。

数据库

  1. CREATE TABLE `user`  (
  2.   `id` int NOT NULL AUTO_INCREMENT,
  3.   `username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL,
  4.   `avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL,
  5.   `password_hash` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL,
  6.   `salt` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL,
  7.   `grade` int NOT NULL,
  8.   `role` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL,
  9.   PRIMARY KEY (`id`) USING BTREE
  10. ) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_bin ROW_FORMAT = DYNAMIC;

在这里插入图片描述

项目编写

  • 创建项目
    在这里插入图片描述

在这里插入图片描述

  • pom.xml

    <?xml version=”1.0” encoding=”UTF-8”?>
    <project xmlns=”http://maven.apache.org/POM/4.0.0“ xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance“

    1.      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    2. <modelVersion>4.0.0</modelVersion>
    3. <parent>
    4.     <groupId>org.springframework.boot</groupId>
    5.     <artifactId>spring-boot-starter-parent</artifactId>
    6.     <version>2.7.11</version>
    7.     <relativePath/> <!-- lookup parent from repository -->
    8. </parent>
    9. <groupId>com.example</groupId>
    10. <artifactId>UserDemo</artifactId>
    11. <version>0.0.1-SNAPSHOT</version>
    12. <name>UserDemo</name>
    13. <description>UserDemo</description>
    14. <properties>
    15.     <java.version>17</java.version>
    16. </properties>
    17. <dependencies>
    18. <dependency>
    19.     <groupId>org.springframework.boot</groupId>
    20.     <artifactId>spring-boot-starter-web</artifactId>
    21.     <version>2.7.6</version>
    22. </dependency>
    23. <dependency>
    24.     <groupId>org.springframework.data</groupId>
    25.     <artifactId>spring-data-jpa</artifactId>
    26.     <version>2.5.6</version>
    27. </dependency>
    29. <dependency>
    30.     <groupId>org.hibernate</groupId>
    31.     <artifactId>hibernate-core</artifactId>
    32.     <version>5.6.3.Final</version>
    33. </dependency>
  1.     <dependency>
  2.         <groupId>javax.persistence</groupId>
  3.         <artifactId>javax.persistence-api</artifactId>
  4.         <version>2.2</version>
  5.     </dependency>
  7.     <dependency>
  8.         <groupId>org.mybatis.spring.boot</groupId>
  9.         <artifactId>mybatis-spring-boot-starter</artifactId>
  10.         <version>2.3.0</version>
  11.     </dependency>
  12.     <dependency>
  13.         <groupId>org.mybatis.spring.boot</groupId>
  14.         <artifactId>mybatis-spring-boot-starter</artifactId>
  15.         <version>2.3.0</version>
  16.     </dependency>
  17.     <dependency>
  18.         <groupId>com.mysql</groupId>
  19.         <artifactId>mysql-connector-j</artifactId>
  20.         <scope>runtime</scope>
  21.     </dependency>
  22.     <dependency>
  23.         <groupId>org.projectlombok</groupId>
  24.         <artifactId>lombok</artifactId>
  25.         <optional>true</optional>
  26.     </dependency>
  27.     <dependency>
  28.         <groupId>org.springframework.boot</groupId>
  29.         <artifactId>spring-boot-starter-test</artifactId>
  30.         <scope>test</scope>
  31.     </dependency>
  32.     <dependency>
  33.         <groupId>com.baomidou</groupId>
  34.         <artifactId>mybatis-plus-boot-starter</artifactId>
  35.         <version>3.4.2</version>
  36.     </dependency>
  40.     <dependency>
  41.         <groupId>io.jsonwebtoken</groupId>
  42.         <artifactId>jjwt-api</artifactId>
  43.         <version>0.11.2</version>
  44.     </dependency>
  46.     <!-- 如果要使用 jjwt 的实现，还需要添加以下依赖 -->
  47.     <dependency>
  48.         <groupId>io.jsonwebtoken</groupId>
  49.         <artifactId>jjwt-impl</artifactId>
  50.         <version>0.11.2</version>
  51.         <scope>runtime</scope>
  52.     </dependency>
  53.     <dependency>
  54.         <groupId>io.jsonwebtoken</groupId>
  55.         <artifactId>jjwt-jackson</artifactId>
  56.         <version>0.11.2</version>
  57.         <scope>runtime</scope>
  58.     </dependency>
  59.     <!-- Hibernate Validator -->
  60.     <dependency>
  61.         <groupId>org.springframework.boot</groupId>
  62.         <artifactId>spring-boot-starter-validation</artifactId>
  63.     </dependency>
  64.     <dependency>
  65.         <groupId>org.apache.shiro</groupId>
  66.         <artifactId>shiro-core</artifactId>
  67.         <version>1.8.0</version>
  68.     </dependency>
  69.     <dependency>
  70.         <groupId>org.apache.commons</groupId>
  71.         <artifactId>commons-lang3</artifactId>
  72.         <version>3.12.0</version>
  73.     </dependency>
  74. </dependencies>
  76.     <build>
  77.         <plugins>
  78.             <plugin>
  79.                 <groupId>org.springframework.boot</groupId>
  80.                 <artifactId>spring-boot-maven-plugin</artifactId>
  81.                 <configuration>
  82.                     <excludes>
  83.                         <exclude>
  84.                             <groupId>org.projectlombok</groupId>
  85.                             <artifactId>lombok</artifactId>
  86.                         </exclude>
  87.                     </excludes>
  88.                 </configuration>
  89.             </plugin>
  90.         </plugins>
  91.     </build>
  93. </project>

  • application.properties

    ?????

    spring.datasource.url=jdbc:mysql://localhost:3306/exam4?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
    spring.datasource.username=root
    spring.datasource.password=123456
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

    ???????

    server.port=8081

    MyBatis-Plus ??

    mybatis-plus.mapper-locations=classpath:/mapper/*.xml
    mybatis-plus.type-aliases-package=com.example.demo.entity
    mybatis-plus.global-config.db-config.id-type=auto
    mybatis-plus.configuration.map-underscore-to-camel-case=true
    mybatis-plus.configuration.use-generated-keys=true
    mybatis-plus.configuration.map-enum-as-ordinal=false
    mybatis-plus.configuration.enum-handler=com.baomidou.mybatisplus.extension.handlers.MybatisEnumTypeHandler

代码编写

项目结构
在这里插入图片描述

Bean

User

  1. import lombok.AllArgsConstructor;
  2. import lombok.Data;
  3. import com.baomidou.mybatisplus.annotation.*;
  4. import lombok.NoArgsConstructor;
  6. @Data
  7. @AllArgsConstructor
  8. @NoArgsConstructor
  9. @TableName("user")
  10. public class User {
  12.     @TableId(type = IdType.AUTO)
  13.     private Long id;
  14.     private String username;
  15.     private String avatar;
  16.     private String passwordHash;
  17.     private String salt;
  18.     private int grade;
  19.     private String role;
  20. }

Result

  1. import lombok.Data;
  2. import org.springframework.lang.Nullable;
  4. @Data
  5. public class Result<T> {
  7.     private int code;
  8.     private String message;
  9.     @Nullable
  10.     private T data;
  12.     public static <T> Result<T> success(T data) {
  14.         return success(data, "操作成功");
  15.     }
  17.     public static <T> Result<T> success(T data, String message) {
  19.         return new Result<>(200, message, data);
  20.     }
  22.     public static <T> Result<T> fail(String message) {
  24.         return new Result<>(500, message, null);
  25.     }
  27.     public Result(int code, String message, @Nullable T data) {
  29.         this.code = code;
  30.         this.message = message;
  31.         this.data = data;
  32.     }
  33. }

Tool

  1. import java.security.MessageDigest;
  2. import java.security.NoSuchAlgorithmException;
  4. /**
  5.  * 安全相关工具类
  6.  * 提供各种安全相关的操作方法
  7.  */
  8. public class SecurityTool {
  11.     /**
  12.      * 对字符串进行MD5加密
  13.      * @param str 待加密的字符串
  14.      * @return 加密结果
  15.      */
  16.     public static String MD5Encode(String str) {
  18.         try {
  20.             MessageDigest md = MessageDigest.getInstance("MD5");
  21.             md.update(str.getBytes());   //对字符串加密
  22.             byte[] encodedBytes = md.digest();
  23.             StringBuffer hexString = new StringBuffer();
  24.             for (int i = 0; i < encodedBytes.length; i++) {
  26.                 String hex = Integer.toHexString(0xff & encodedBytes[i]);
  27.                 if (hex.length() == 1) {
  29.                     hexString.append('0');
  30.                 }
  31.                 hexString.append(hex);
  32.             }
  33.             return hexString.toString();
  34.         } catch (NoSuchAlgorithmException e) {
  36.            //省略异常处理
  37.         }
  38.         return null;
  39.     }
  41. }

Config

CorsConfig
  1. import org.springframework.context.annotation.Bean;
  2. import org.springframework.context.annotation.Configuration;
  3. import org.springframework.web.servlet.config.annotation.CorsRegistry;
  4. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
  7. @Configuration
  8. public class CorsConfig {
  10.     @Bean
  11.     public WebMvcConfigurer corsConfigurer() {
  13.         return new WebMvcConfigurerAdapter() {
  15.             @Override
  16.             public void addCorsMappings(CorsRegistry registry) {
  18.                 // 允许来自本地的8080端口发起的跨域请求
  19.                 registry.addMapping("/api/**")
  20.                     .allowedOrigins("*")
  21.                     .allowedMethods("GET", "POST", "PUT", "DELETE")
  22.                     .allowCredentials(true).maxAge(3600);
  23.             }
  24.         };
  25.     }
  26. }

Mapper

UserMapper
  1. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  2. import com.example.userdemo.Bean.User;
  3. import org.apache.ibatis.annotations.Mapper;
  5. @Mapper
  6. public interface UserMapper extends BaseMapper<User> {
  9. }

Service

IUserService
  1. import com.baomidou.mybatisplus.extension.service.IService;
  2. import com.example.userdemo.Bean.User;
  4. public interface IUserService extends IService<User> {
  6.     /**
  7.      * 用户注册
  8.      * @param user 待注册用户信息
  9.      * @return 注册成功返回true，失败返回false
  10.      */
  11.     boolean register(User user);
  13.     /**
  14.      * 用户登录
  15.      * @param username 用户名
  16.      * @param password 密码
  17.      * @return 登录成功返回对应用户的信息，失败返回null
  18.      */
  19.     User login(String username, String password);
  21.     /**
  22.      * 根据用户名获取用户
  23.      * @param username 用户名
  24.      * @return 用户
  25.      */
  26.     User getByUsername(String username);
  27. }

Impl

UserServiceImpl
  1. import java.util.ArrayList;
  2. import java.util.Random;
  4. @Service
  5. public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {
  8.     /**
  9.      * 用户注册实现
  10.      * 先查用户名是否存在，不存在则加密密码进行保存
  11.      * @param user 待注册用户信息
  12.      * @return 注册成功返回true，失败返回false
  13.      */
  14.     @Override
  15.     public boolean register(User user) {
  17.         String username = user.getUsername();
  18.         QueryWrapper<User> wrapper = new QueryWrapper<>();
  19.         wrapper.eq("username", username);   //查询用户名是否存在
  20.         User hasUser = getOne(wrapper);
  21.         if (hasUser != null) {
  22.       //数据库中已经存在该用户名，注册失败
  23.             return false;
  24.         }
  25.         // 随机生成一个头像
  26.         ArrayList<String> arrayList = new ArrayList<>();
  27.         arrayList.add("https://pic3.zhimg.com/v2-d6ddf0128212235dddf76df7f4383f53.jpg");
  28.         arrayList.add("https://p0.ssl.img.360kuai.com/t01948ff2341a5d1ac3.jpg");
  29.         arrayList.add("https://pic3.zhimg.com/v2-65020b1231ba55d55ee3d6a29ff3df26_r.jpg");
  30.         arrayList.add("https://pic2.zhimg.com/v2-fc348d5e926116782149d2151dc09834.jpg");
  31.         arrayList.add("https://pic4.zhimg.com/v2-797973e16edcd0ccaab44cfbfa08d2d3_r.jpg");
  32.         Random random = new Random();
  33.         user.setAvatar(arrayList.get(random.nextInt(arrayList.size())));
  35.         String password = user.getPasswordHash();
  36.         String salt = RandomStringUtils.randomAlphabetic(6);    //生成盐
  37.         String encryptedPwd = SecurityTool.MD5Encode(password + salt);   //对密码+盐进行加密
  38.         user.setPasswordHash(encryptedPwd);
  39.         user.setSalt(salt);
  40.         boolean successFlag = save(user);
  41.         return successFlag;
  42.     }
  44.     @Override
  45.     public User getByUsername(String username) {
  47.         QueryWrapper<User> queryWrapper = new QueryWrapper<>();
  48.         queryWrapper.eq("username", username);
  49.         return getOne(queryWrapper);
  50.     }
  52.     /**
  53.      * 用户登录实现
  54.      * 先使用用户名查询对应用户，然后进行密码比对
  55.      * @param username 用户名
  56.      * @param password 密码
  57.      * @return 如果成功则返回对应用户信息（不包含密码和盐），失败返回null
  58.      */
  59.     @Override
  60.     public User login(String username, String password) {
  62.         QueryWrapper<User> wrapper = new QueryWrapper<>();
  63.         wrapper.eq("username", username); //根据用户名找到对应的User对象
  64.         User user = getOne(wrapper);
  65.         if (user == null) {
  66.       //未找到该用户
  67.             return null;
  68.         }
  69.         String salt = user.getSalt();
  70.         String encryptedPwd = SecurityTool.MD5Encode(password + salt);  //对密码+盐进行加密
  71.         if (!encryptedPwd.equals(user.getPasswordHash())) {
  72.       //密码错误
  73.             return null;
  74.         }
  75.         user.setPasswordHash(null); //不暴露密码hash与盐值Salt给前端
  76.         user.setSalt(null);
  77.         return user; //一切正常，返回相应用户信息
  78.     }
  79. }

Controller

UserController
  1. import com.baomidou.mybatisplus.core.toolkit.StringUtils;
  2. import com.example.userdemo.Bean.Result;
  3. import com.example.userdemo.Bean.User;
  4. import com.example.userdemo.Service.IUserService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.web.bind.annotation.*;
  8. import java.util.ArrayList;
  9. import java.util.List;
  10. import java.util.Random;
  12. @RestController
  13. @RequestMapping("/user")
  14. public class UserController {
  17.     @Autowired
  18.     private IUserService userService;
  20.     /**
  21.      * 获取全部用户信息列表
  22.      */
  23.     @GetMapping("/all")
  24.     public Result<List<User>> listAllUsers() {
  26.         List<User> userList = userService.list();
  27.         return Result.success(userList);
  28.     }
  30.     /**
  31.      * 根据用户ID获取用户信息
  32.      */
  33.     @GetMapping("/{id}")
  34.     public Result<User> getUserById(@PathVariable(value = "id") Long id) {
  36.         User user = userService.getById(id);
  37.         if (user == null) {
  39.             return Result.fail("该用户不存在");
  40.         }
  41.         return Result.success(user);
  42.     }
  44.     /**
  45.      * 更新用户信息
  46.      */
  47.     @PostMapping("/save")
  48.     public Result<Boolean> UpdateUser(@RequestBody User user) {
  50.         // 判断新的username是否合法
  51.         if (StringUtils.isBlank(user.getUsername())) {
  53.             return Result.fail("更新失败：用户名不能为空");
  54.         }
  56.         // 校验用户名是否重复，如果已经存在就返回错误信息
  57.         User existingUser = userService.getByUsername(user.getUsername());
  58.         if (existingUser != null && !existingUser.getId().equals(user.getId())) {
  60.             return Result.fail("更新失败：该用户名已被占用");
  61.         }
  63.         // 获取旧用户并更新部分信息
  64.         User oldUser = userService.getById(user.getId());
  65.         if (oldUser == null) {
  67.             return Result.fail("更新失败：该用户不存在");
  68.         }
  69.         oldUser.setUsername(user.getUsername());
  70.         oldUser.setGrade(user.getGrade());
  71.         oldUser.setPasswordHash(user.getPasswordHash());
  73.         boolean flag = userService.save(oldUser);
  74.         if (flag) {
  76.             return Result.success(true, "保存成功");
  77.         } else {
  79.             return Result.fail("保存失败");
  80.         }
  81.     }
  86.     /**
  87.      * 根据用户ID删除用户信息
  88.      */
  89.     @DeleteMapping("/delete/{id}")
  90.     public Result<Boolean> deleteUserById(@PathVariable(value = "id") Long id) {
  92.         boolean flag = userService.removeById(id);
  93.         if (flag) {
  95.             return Result.success(true, "删除成功");
  96.         } else {
  98.             return Result.fail("删除失败");
  99.         }
  100.     }
  102.     /**
  103.      * 用户注册
  104.      */
  105.     @PostMapping("/register")
  106.     public Result<Boolean> register(@RequestBody User user) {
  108.         System.out.println(user);
  109.         boolean flag = userService.register(user);
  110.         if (flag) {
  112.             return Result.success(true, "注册成功");
  113.         } else {
  115.             return Result.fail("注册失败，用户名已被占用");
  116.         }
  117.     }
  119.     /**
  120.      * 用户登录
  121.      */
  122.     @PostMapping("/login")
  123.     public Result<User> login(@RequestBody User user) {
  125.         String username = user.getUsername();
  126.         String password = user.getPasswordHash();
  127.         User user2 = userService.login(username, password);
  128.         if (user == null) {
  130.             return Result.fail("用户名或密码错误，登录失败");
  131.         } else {
  133.             return Result.success(user2, "登录成功");
  134.         }
  135.     }
  136. }

Postman测试

好的，请按照以下步骤在 Postman 中测试接口：

  1. 以 POST 请求方式发送以下数据至 http://localhost:8081/user/register：

    {

    1. "username": "test123",
    2. "passwordHash": "test1234",
    3. "grade": 1

    }

若注册成功，会返回请求成功信息：

  1. {
  3.     "code": 200,
  4.     "message": "注册成功",
  5.     "data": true
  6. }

若注册失败（用户名已存在），会返回出错信息：

  1. {
  3.     "code": 500,
  4.     "message": "注册失败，用户名已被占用",
  5.     "data": null
  6. }

  1. 以 POST 请求方式发送以下数据至 http://localhost:8080/user/login：

    {

    1. "username": "test123",
    2. "password": "test1234"

    }

若登录成功，会返回用户信息：

  1. {
  3.     "code": 200,
  4.     "message": "登录成功",
  5.     "data": {
  7.         "id": 用户ID,
  8.         "username": "test123",
  9.         "avatar": null,
  10.         "passwordHash": null,
  11.         "salt": null,
  12.         "grade": 1,
  13.         "role": null
  14.     }
  15. }

若登录失败（用户名或密码错误），会返回出错信息：

  1. {
  3.     "code": 500,
  4.     "message": "用户名或密码错误，登录失败",
  5.     "data": null
  6. }
  1. 以 GET 请求方式发送以下数据至 http://localhost:8080/user/all：

若查询全部用户信息列表成功，会返回用户信息列表：

  1. {
  3.     "code": 200,
  4.     "message": "操作成功",
  5.     "data": [
  6.         {
  8.             "id": 用户1ID,
  9.             "username": "test123",
  10.             "avatar": null,
  11.             "passwordHash": null,
  12.             "salt": null,
  13.             "grade": 0,
  14.             "role": null
  15.         },
  16.         {
  18.             "id": 用户2ID,
  19.             "username": "user",
  20.             "avatar": null,
  21.             "passwordHash": null,
  22.             "salt": null,
  23.             "grade": 1,
  24.             "role": null
  25.         }
  26.     ]
  27. }
  1. 以 GET 请求方式发送以下数据至 http://localhost:8080/user/1 （用户ID为 1 的具体用户）：

若根据 ID 获取用户信息成功，会返回对应的用户信息：

  1. {
  3.     "code": 200,
  4.     "message": "操作成功",
  5.     "data": {
  7.         "id": 用户1ID,
  8.         "username": "test123",
  9.         "avatar": null,
  10.         "passwordHash": null,
  11.         "salt": null,
  12.         "grade": 0,
  13.         "role": null
  14.     }
  15. }

若未找到该用户，会返回出错信息：

  1. {
  3.     "code": 500,
  4.     "message": "该用户不存在",
  5.     "data": null
  6. }

  1. 以 POST 请求方式发送以下数据至 http://localhost:8080/user/save：

    {

    1. "id": <当前用户ID>,
    2. "username": "test321",
    3. "passwordHash": "test4321",
    4. "grade": 2

    }

若新增或更新成功，会返回请求成功信息：

  1. {
  3.     "code": 200,
  4.     "message": "保存成功",
  5.     "data": true
  6. }

注意：若采用 POST 请求方式，请在请求头中添加 Content-Type 为 application/json。

希望这个例子可以帮助您更好地理解如何使用 Spring Boot 框架和 Postman 工具进行接口测试。

发表评论

表情：
评论列表 （有 0 条评论，71人围观）

还没有评论，来说两句吧...

相关阅读

    相关 django做一个注册登录界面

    一、基于sb-admin模板完成以下登录的逻辑 用户想要访问一个网页，首先要求注册账号，有了账号之后再去登录，才能访问网站的主页 1.先说以下用户注册的逻辑： r

    末蓝、末蓝、/ 0 赞/ 638 阅读