从零开始搭建SpringBoot项目(四)——实现注册功能

前情提要

上一篇文章已经向大家介绍前端项目的设计过程以及如何利用HbuilderX运行微信小程序，在文章的结尾我向大家简单一笔带过了用ajax向后端java项目请求数据的方法，这篇文章我们就来详细地看看！

大家在看这篇文章前先看看我的上篇文章：从零开始搭建SpringBoot项目(三)——小程序Uni-app项目搭建

一、前置条件

需要安装	下载方法
HbuilderX	自备最新版本
微信开发者工具	官网下载链接
SQL脚本	百度网盘下载链接，提取码：barh

二、导入MySQL数据表

大家先把 前置条件 中的 SQL脚本 下载下来导入到你们的MySQL数据库中

大家如果不知道怎么创建数据库，可以看看我之前的这篇文章：从零开始搭建SpringBoot项目(一)——开发环境搭建

方法①：下载tb_user.sql文件，在Navicat上面新建csdn数据库，在csdn数据库上右键选择执行SQL文件，刷新csdn数据库

方法②(推荐)：

上节课我们完成到获取微信用户基本信息这一步了👇现在我们就来将微信返回的信息存储到MySQL中

数据表结构👇

三、创建mapper、dao、pojo文件

①首先先创建MySQL连接👇这里我的第一篇文章中介绍过了我这里就一笔带过了。


②在项目栏中创建db目录，并在里面分别创建dao和pojo目录用于存放对应的文件👇

③利用 Free Mybatis 插件生成数据表对应的 mapper、dao、pojo 文件。这插件十分方便！只需要右键点击数据表选择第一个选项 mybatis-generator，就能自动生成相应的文件👇

四、配置Mybatis和日志输出

在pom.xml文件中增加以下配置👇

配置代码如下👇（别忘了格式！别忘了格式！别忘了格式！重要的事说三遍！）

mybatis:
  mapper-locations: classpath*:mapper/*.xml
  type-aliases-package: com.example.csdn.db.pojo
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true

logging:
  level:
    root: info
    com.example.csdn.db.dao: warn
  pattern:
    console: "%d{yyyy/MM/dd HH:mm:ss}  %-5level  %msg%n"

五、实现注册（持久层）

在动手写代码之前，我们先来了解一下注册流程：新用户在小程序的注册页面点击执行注册之后，小程序获取新用户的微信账号信息，提交给 Java 后台系统，然后保存到 MySQL 数据库。

假设业务层判定用户可以注册，于是我们要把用户的数据保存在用户表，这就需要我们编写相关的SQL语句和DAO代码。

1、编写保存用户记录的代码

①在 TbUserDao.xml 文件中写入下面的 SQL 语句👇

<insert id="insert" parameterType="HashMap">
	INSERT INTO tb_user
    SET
    <if test="openId!=null">
    	open_id = #{openId},
    </if>
    <if test="nickname!=null">
    	nickname = #{nickname},
    </if>
    <if test="photo!=null">
    	photo = #{photo},
    </if>
    <if test="name!=null">
        name = #{name},
    </if>
    <if test="sex!=null">
        sex = #{sex},
    </if>
    create_time = #{createTime}
</insert>

②在TbUserDao.java文件中创建DAO方法👇（别忘了加@Mapper注解）

@Mapper
public interface TbUserDao {
    public int insert(HashMap param);
}

2、编写查询用户ID的代码

如果在用户表中插入新纪录，由于主键是自动生成的，所以我们并不知道新纪录的主键值是多少。于是我们要编写代码，根据OpenId查询用户ID。

①在TbUserDao.xml文件中写入下面的SQL语句👇

<select id="searchIdByOpenId" parameterType="String" resultType="Integer">
    SELECT id FROM tb_user WHERE open_id=#{openId}
</select>

②在TbUserDao.java文件中创建DAO方法👇

@Mapper
public interface UserDao {
	……
    public Integer searchIdByOpenId(String openId);
}

六、实现注册（业务层）

上一小节，我们封装了注册用户的持久层代码，下面就应该编写业务层的代码了。比如保存用户记录之前，我们要获得OpenId才行。

1、获取OpenId

获取微信用户的 OpenId，需要后端程序向微信平台发出请求，并上传若干参数，最终才能得到。

URL请求路径：https://api.weixin.qq.com/sns/jscode2session

①在 com.example.csdn.service 中创建 UserService.java 接口👇

②在appllication.yml文件中添加微信的 小程序唯一标识 和 小程序密钥，不然不能向微信平台请求得到用户的openId👇

wx:
  app-id: 你小程序的app-id
  app-secret: 你小程序的app-secret

③在 com.example.csdn.service.impl 中创建 UserServiceImpl.java 类👇并且继承 UserService 接口👇

将以下代码加到 UserServiceImpl.java 里👇

package com.example.csdn.service.impl;

import cn.hutool.http.HttpUtil;
import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import com.example.csdn.db.dao.TbUserDao;
import com.example.csdn.service.UserService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Service;
import java.util.HashMap;

@Service
@Slf4j
@Scope("prototype")
public class UserServiceImpl implements UserService {

    @Value("${wx.app-id}")
    private String appId;

    @Value("${wx.app-secret}")
    private String appSecret;

	@Autowired
    private TbUserDao userDao;
	
	private String getOpenId(String code) {
        String url = "https://api.weixin.qq.com/sns/jscode2session";
        HashMap map = new HashMap();
        map.put("appid", appId);
        map.put("secret", appSecret);
        map.put("js_code", code);
        map.put("grant_type", "authorization_code");
        String response = HttpUtil.post(url, map);
        JSONObject json = JSONUtil.parseObj(response);
        String openId = json.getStr("openid");
        if (openId == null || openId.length() == 0) {
            throw new RuntimeException("临时登陆凭证错误");
        }
        return openId;
    }
}

2、编写注册新用户的业务代码

①在UserService接口中添加抽象方法的声明👇

public interface UserService {
    public int registerUser(String registerCode,String code,String nickname,String photo); 
}

②在UserServiceImpl类中实现抽象方法👇

    @Override
    public int registerUser(String registerCode, String code, String nickname, String photo) {
        // TODO 注意！这里需自己决定注册的判断条件！因为openId会变，会导致同个用户可以多次注册
        String openId = getOpenId(code);
        HashMap param = new HashMap();
        param.put("openId", openId);
        param.put("nickname", nickname);
        param.put("photo", photo);
        param.put("createTime", new Date());
        userDao.insert(param);
        int id = userDao.searchIdByOpenId(openId);
        return id;
    }

七、实现注册（WEB层）

接收移动端提交的注册请求，我们需要用表单类来封装数据，所以创建 RegisterForm.java 类，创建之前我们先在 pom.xml 文件里面加下验证信息的依赖👇

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-validation</artifactId>
</dependency>

package com.example.csdn.controller.form;

import io.swagger.annotations.ApiModel;
import lombok.Data;
import javax.validation.constraints.NotBlank;

@Data
@ApiModel
public class RegisterForm {

    @NotBlank(message = "微信临时授权不能为空")
    private String code;

    @NotBlank(message = "昵称不能为空")
    private String nickname;

    @NotBlank(message = "头像不能为空")
    private String photo;
}

八、实现注册（小程序端）

1、封装全局路径

刚刚我们创建好了后端的register方法，那么移动端发出请求，首先要填写好URL地址。为了在移动端项目上集中管理URL路径，我们可以在main.js文件中用全局变量的语法，定义全局的URL地址，这样更加便于维护↓

代码如下↓

let baseUrl = "http://192.168.99.216:8080/emos-wx-api"
Vue.prototype.url = {
	register: baseUrl + "/user/register",
}

2、封装Ajax

Vue.prototype.ajax = function(url, method, data, fun) {
	uni.request({
		"url": url,
		"method": method,
		"header": {
			token: uni.getStorageSync('token')
		},
		"data": data,
		success: function(resp) {
			if (resp.statusCode == 401) {
				uni.redirectTo({
					url: '../login/login'
				});
			} else if (resp.statusCode == 200 && resp.data.code == 200) {
				let data = resp.data
				if (data.hasOwnProperty("token")) {
					console.log(resp.data)
					let token = data.token
					uni.setStorageSync("token", token)
				}
				fun(resp)
			} else {
				uni.showToast({
					icon: 'none',
					title: resp.data
				});
			}
		}
	});
}

3、提交Ajax请求

let data = {
	code: code,
	nickname: nickName,
	photo: avatarUrl,
	registerCode: that.registerCode
};
that.ajax(that.url.register, 'POST', data, function(resp) {
	//TODO 跳转到index页面
	uni.switchTab({
		url: '../index/index'
	});
});