【Uni-App+SSM 宠物项目实战】Day9：用户注册今天我们进入核心模块：用户注册。这是 mypet 项目的起点。

一、前言

欢迎回来！🎉 今天我们进入核心模块：用户注册。这是 mypet 项目的起点。用户注册后，就能参与宠物服务（如购买用品、预约宠物美容等）。

在本节课，我们会学习：

后端：UserController 处理注册逻辑
前端：Uni-App 表单提交数据
工具类：用 Hutool 进行手机号验证 & 密码加密

🔑 学习目标：

实现后端注册接口 & 前端注册表单；
掌握手机号验证方法 Validator.isMobile()；
学会使用 SecureUtil.md5() 进行密码加密；
熟悉完整注册流程。

二、前置准备

在开始编码前，请确认以下内容：

项目	检查内容
数据库	是否已有 `yonghu` 表（来自 `db.sql`）
后端依赖	`pom.xml` 中需包含 Hutool：`xml\n<dependency>\n <groupId>cn.hutool</groupId>\n <artifactId>hutool-all</artifactId>\n <version>4.0.12</version>\n</dependency>`
前端目录	Uni-App 新增页面：`pages/register/register.vue`

⚠️ 注意：Hutool 版本要与项目兼容，过高版本可能与旧框架冲突。

三、用户注册流程图

💡 先用图理解注册逻辑，再进入代码实现：

flowchart TD
    A[用户输入手机号 和 密码] --> B{手机号格式合法}
    B -- 否 --> C[返回 手机号格式无效 提示]
    B -- 是 --> D[密码 MD5 加密]
    D --> E[存入数据库 yonghu 表]
    E --> F[返回 注册成功]

四、代码实现

4.1 后端：`YonghuController` 注册接口

路径：src/main/java/com/controller/YonghuController.java

import cn.hutool.core.util.StrUtil;        // 字符串工具
import cn.hutool.crypto.SecureUtil;        // MD5 加密工具
import com.annotation.IgnoreAuth;
import com.entity.YonghuEntity;            // 用户实体类
import com.service.YonghuService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/yonghu")
public class YonghuController {
    @Autowired
    private YonghuService service;

    @IgnoreAuth  // 允许未登录用户访问
    @PostMapping("/register")
    public R register(@RequestBody YonghuEntity yonghu) {
        // 1️⃣ 手机号格式验证
        if (!cn.hutool.core.lang.Validator.isMobile(yonghu.getShoujihao())) {
            return R.error("手机号格式无效！");
        }
        // 2️⃣ 密码加密（防止明文存储）
        yonghu.setMima(SecureUtil.md5(yonghu.getMima()));
        // 3️⃣ 保存用户信息
        service.insert(yonghu);
        return R.ok("注册成功");
    }
}

📌 讲解：

@IgnoreAuth → 表示不需要登录也能访问该接口（方便用户注册）。
Validator.isMobile() → 直接验证手机号格式是否符合中国大陆标准。
SecureUtil.md5() → 生成 32 位 MD5 字符串，避免明文存储密码。

4.2 前端：Uni-App 注册表单

路径：src/main/webapp/front/pages/register/register.vue

<template>
  <view class="register-page">
    <input v-model="form.shoujihao" placeholder="请输入手机号" />
    <input v-model="form.mima" type="password" placeholder="请输入密码" />
    <button type="primary" @click="register">注册</button>
  </view>
</template>

<script>
import request from '@/api/request.js';

export default {
  data() {
    return {
      form: {
        shoujihao: '',
        mima: ''
      }
    };
  },
  methods: {
    register() {
      request.post('/yonghu/register', this.form)
        .then(res => {
          uni.showToast({ title: res.data.msg });
        });
    }
  }
}
</script>

<style>
.register-page {
  padding: 20rpx;
}
input {
  margin: 20rpx 0;
  border: 1px solid #ccc;
  padding: 10rpx;
}
</style>

📌 讲解：

v-model → 绑定表单数据，实现双向绑定。
request.post → 通过封装的请求工具调用后端接口。
uni.showToast → 显示提示信息（例如 “注册成功”）。

五、效果验证

✅ 1. 后端测试（Postman）

请求地址：

http://localhost:8080/yonghu/register

请求体（JSON）：

{
  "shoujihao": "13812345678",
  "mima": "123456"
}

注册成功

✅ 2. 前端测试（Uni-App）

运行 HBuilder X → 打开 register.vue
输入手机号 & 密码 → 点击注册
查看数据库 → yonghu 表新增用户，密码为 加密后的 MD5 值

六、常见问题与排查

问题	可能原因	解决方式
手机号验证失败	`isMobile()` 只能识别 11 位纯数字	输入时避免空格/非数字
保存失败	数据库有唯一性约束	确认手机号是否重复
前端无响应	`request.js` 配置错误	检查 `baseURL` 是否正确

七、扩展与提升

Hutool SecureUtil.md5()
相比自定义 MD5 工具类更简洁 → 一行搞定加密。
更多验证
- 邮箱验证：Validator.isEmail()
- 前端 + 后端双重验证 → 提升用户体验，保证数据安全。

八、结尾

🙋‍♂️ 思考题：

如果我输入 138 1234 5678（带空格），会注册成功吗？
如果前端也做了手机号验证，那后端是否还需要再验证？

💡 提示：安全永远要在后端兜底，前端验证只是为了更好的交互体验。

下节预告

👉 下期 Day10：用户登录，我们将学习如何让注册用户能够安全登录系统！

【Uni-App+SSM 宠物项目实战】Day9：用户注册