SpringBoot整合Mybatis-Plus实现微信注册、登录功能

Dear 丶 2023-10-09 20:49 16阅读 0赞

#### 前言： ####

随着互联网和移动互联网的快速发展，微信已成为人们日常生活和工作中不可缺少的通讯工具之一。在这个背景下，将微信用户注册和登录功能整合到自己应用中，成为了越来越多开发者所关注的问题。本文将详细介绍如何使用SpringBoot和Mybatis-Plus快速搭建微信注册、登录功能，并通过Vue实现优美的前端页面。

#### 一、技术栈选择 ####

在开始开发之前，我们需要选择一组适合的技术栈。本文中，我们将使用以下主要技术：

*  SpringBoot：为开发提供快速、简单的企业级应用程序开发框架。
 *  Mybatis-Plus：一种基于Mybatis的增强工具，通过自动生成代码可极大地提高开发效率。
 *  Vue：一个轻量级的JavaScript框架，用于开发单页应用程序。

#### 二、环境搭建 ####

##### 1. 数据库设计 #####

我们首先需要创建一个数据库，用来存储用户信息和登录凭证。假设我们要存储用户的微信OpenID和登录凭证，可以按照以下步骤创建名为 “wechat\_login” 的数据库

CREATE DATABASE wechat_login;
    
    USE wechat_login;
    
    -- 创建用户表
    CREATE TABLE `user` (
      `id` bigint(20) NOT NULL AUTO_INCREMENT,
      `open_id` varchar(50) NOT NULL COMMENT '微信OpenID',
      `credential` varchar(50) NOT NULL COMMENT '登录凭证',
      `create_time` datetime NOT NULL COMMENT '创建时间',
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';

##### 2. SpringBoot项目创建 #####

我们使用Spring Initializr创建一个SpringBoot项目，并引入相关依赖：Mybatis-Plus、MySQL驱动和Swagger2。可以将以下依赖项添加到pom.xml文件中：

<dependencies>
        
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>
        
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.20</version>
        </dependency>
        
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>3.0.0</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>3.0.0</version>
        </dependency>
    </dependencies>

创建好SpringBoot项目后，我们需要在application.properties文件中添加数据库连接信息

# 数据库连接信息
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    spring.datasource.url=jdbc:mysql://127.0.0.1:3306/wechat_login?useUnicode=true&characterEncoding=utf8&allowMultiQueries=true&useSSL=false&serverTimezone=Asia/Shanghai
    spring.datasource.username=root
    spring.datasource.password=root
    
    # Mybatis配置
    # 配置Mapper的扫描路径
    mybatis-plus.mapper-locations=classpath:mapper/*.xml
    # 开启实体注解扫描
    mybatis-plus.typeAliasesPackage=com.springboot.mybatismplus.entity
    # 开启逻辑删除
    mybatis-plus.global-config.db-config.logic-delete-value=1
    mybatis-plus.global-config.db-config.logic-not-delete-value=0
    mybatis-plus.global-config.refresh=true
    
    # swagger-ui配置
    # 访问路径：http://localhost:8080/swagger-ui.html
    swagger.title=Spring Boot Example
    swagger.description=Spring Boot Example API Document
    swagger.version=1.0.0
    swagger.controller.package=com.springboot.mybatismplus.controller

##### 3. Entity设计 #####

在设计Entity时，我们需要根据用户表的定义，创建一个对应的Java实体类。以下是一个简单的UserEntity示例：

public class UserEntity implements Serializable {
        
    
        private static final long serialVersionUID = 1L;
    
        @TableId(type= IdType.AUTO)
        private Long id;
    
        @TableField("open_id")
        private String openId;
    
        private String credential;
    
        @TableField("create_time")
        private LocalDateTime createTime;
    
        // getters and setters
    }

这里我们使用了Mybatis-Plus提供的注解功能，将实体类的属性和数据库表的字段名进行了映射，并使用了Lombok插件自动生成了getter和setter方法。

##### 4. Mapper设计 #####

在设计Mapper时，我们可以使用Mybatis-Plus提供的BaseMapper抽象类，并继承它，实现对应的方法。以下是一个简单的UserMapper示例：

public interface UserMapper extends BaseMapper<UserEntity> {
        
    
        /**
         * 根据OpenID查询用户信息
         */
        UserEntity selectByOpenId(String openId);
    
    }

我们可以看到，我们只需要将UserEntity作为泛型传入BaseMapper中，就可以轻松地实现CURD操作。

##### 5. Service设计 #####

在设计Service时，我们需要注入Mapper，实现相应的业务方法。以下是一个简单的UserService示例：

@Service
    public class UserServiceImpl extends ServiceImpl<UserMapper, UserEntity> implements UserService {
        
    
        @Autowired
        private UserMapper userMapper;
    
        /**
         * 根据OpenID查询用户信息
         */
        @Override
        public UserEntity selectByOpenId(String openId) {
        
            return userMapper.selectByOpenId(openId);
        }
    
    }

这里我们使用了Spring框架的注解功能注入了UserMapper，并实现了selectByOpenId方法。

##### 6. Controller设计 #####

在设计Controller时，我们需要使用@RestController注解将Java类标记为控制器，使用@RequestMapping注解处理HTTP请求，并注入Service实现相应的业务逻辑。以下是一个简单的UserController示例：

@RestController
    @RequestMapping("/user")
    @Api(tags = "用户管理")
    public class UserController {
        
    
        @Autowired
        private UserService userService;
    
        /**
         * 用户登录接口
         */
        @PostMapping("/login")
        @ApiOperation(value = "用户登录", notes = "首次登录需使用微信注册")
        public Result<UserEntity> login(@RequestParam("openId") String openId, @RequestParam("credential") String credential) {
        
            UserEntity user = userService.selectByOpenId(openId);
            if (user == null) {
        
                throw new BusinessException("该用户不存在");
            }
            if (!user.getCredential().equals(credential)) {
        
                throw new BusinessException("登录凭证不正确");
            }
            return Result.success(user);
        }
    
        /**
         * 用户注册接口
         */
        @PostMapping("/register")
        @ApiOperation(value = "用户注册", notes = "注册成功后可使用微信直接登录")
        public Result<UserEntity> register(@RequestBody UserEntity user) {
        
            boolean result = userService.save(user);
            if (!result) {
        
                throw new BusinessException("注册失败，请检查输入参数");
            }
            return Result.success(user);
        }
    
    }

我们使用了@RestController注解标记这个Java类为Spring MVC控制器，并将@RequestMapping的value映射到 “/user”。在login和register方法中，我们分别处理了用户登录和注册请求，并调用Service实现相应的业务逻辑。

#### 三、前端页面设计 ####

在本项目中，我们使用Vue框架和Vant组件库来实现前端页面设计。主要包括：

*  用户登录页面
 *  用户注册页面

##### 1. 用户登录页面 #####

我们在用户登录页面上使用了Vant的输入框组件，并添加了验证逻辑。以下是简单的登录页面示例：

<template>
      <div class="login-page">
        <van-field v-model="openId" label="微信OpenID" placeholder="请输入微信OpenID" />
    
        <van-field type="password" v-model="credential" label="登录凭证" placeholder="请输入登录凭证" />
    
        <van-button type="primary" :disabled="!openId || !credential" class="login-button" @click="login">登录</van-button>
      </div>
    </template>
    
    <script>
    export default {
          
      data() {
          
        return {
          
          openId: '',
          credential: ''
        };
      },
      methods: {
          
        login() {
          
          if (!this.openId || !this.credential) {
          
            this.$toast('请填写完整登录信息');
            return;
          }
          // TODO: 调用后端接口处理登录逻辑
        }
      }
    };
    </script>

在登录按钮的点击事件中，我们将用户输入的openId和credential传递到后端接口中进行验证。登录成功后可以跳转到其他页面，或者直接显示用户信息。

##### 2. 用户注册页面 #####

在用户注册页面上，我们使用了Vant的表单组件和按钮组件，并添加了表单验证。以下是简单的注册页面示例：

<template>
      <div class="register-page">
        <van-form
          ref="form"
          label-position="top"
          :rules="rules"
        >
          <van-field v-model="openId" label="微信OpenID" placeholder="请输入微信OpenID" />
    
          <van-field type="password" v-model="credential" label="登录凭证" placeholder="请输入登录凭证" />
    
          <van-button type="primary" :disabled="!isFormValid" class="register-button" @click="register">注册</van-button>
        </van-form>
      </div>
    </template>
    
    <script>
    export default {
          
      data() {
          
        return {
          
          openId: '',
          credential: '',
          rules: {
          
            openId: [
              {
           required: true, message: '请输入微信OpenID', trigger: 'blur' }
            ],
            credential: [
              {
           required: true, message: '请输入登录凭证', trigger: 'blur' },
              {
           min: 6, max: 20, message: '登录凭证长度为6到20个字符', trigger: 'blur' }
            ]
          }
        };
      },
      computed: {
          
        isFormValid() {
          
          return this.$refs.form.validate();
        }
      },
      methods: {
          
        register() {
          
          if (!this.isFormValid) {
          
            this.$toast('请填写完整注册信息');
            return;
          }
          // TODO: 调用后端接口进行注册操作
        }
      }
    };
    </script>

在注册按钮的点击事件中，我们将表单数据传递到后端接口中进行处理。如果注册成功，可以跳转到登录页面。

#### 四、项目总结 ####

本文中，我们使用SpringBoot和Mybatis-Plus快速搭建了一个微信注册、登录功能，并通过Vue实现了简洁、优美的前端页面。这个项目可以作为入门级别的示例，帮助我们快速理解如何使用这些工具和框架来实现功能。

对于以上代码中感到不理解的地方，可以参考官方文档或者查阅相关资料进行进一步学习。希望本文对大家有所帮助。