前情提要
上一篇文章已经向大家介绍前端项目的设计过程以及如何利用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'
});
});