springboot+vue项目添加注册用户功能

思路概述

为实现一个简单的注册界面，并将数据根据用户的角色插入到不同的数据库表中，以下是前后端的设计思路：

1. 前端部分

1.1. 创建注册界面：

• 输入字段： name, phone, password。
• 选择字段： role，用户可以选择“教师”或“家长”。
• 表单提交： 用户填写完表单后，点击“注册”按钮，前端将数据发送到后端。

1.2. 表单验证：

• 在前端进行基础的表单验证（如必填项验证、邮箱格式验证、密码长度验证等）。

1.3. 数据提交：

• 使用 axios 发送 POST 请求，将表单数据提交到后端的注册接口。

2. 后端部分

2.1. 接收注册请求：

• 后端需要创建一个 RESTful API 接口来接收来自前端的注册请求。

2.2. 根据角色插入数据：

• 判断角色： 在接收到请求后，根据 role 字段的值判断用户选择的是“教师”还是“家长”。
• 插入到不同的表中：
  • 如果 role 是“教师”，将数据插入到 xm_teacher 表中。
  • 如果 role 是“家长”，将数据插入到 xm_parent 表中。

2.3. 返回响应：

• 后端返回注册成功或失败的状态信息。如果成功，可能还需要返回用户的基本信息或一些注册成功的提示信息。

3. 数据库设计

3.1. 表结构：

• xm_teacher 表：存储教师用户的信息，如 teacher_name, teacher_phone, teacher_email, teacher_password 等。
• xm_parent 表：存储家长用户的信息，如 parent_name, parent_phone, parent_email, parent_password 等。

3.2. 数据插入：

• 当用户角色为“教师”时，将表单数据插入到 xm_teacher 表中。
• 当用户角色为“家长”时，将表单数据插入到 xm_parent 表中。

4. 前后端交互

• 注册请求： 前端表单数据通过 axios 发送到后端。
• 数据存储： 后端根据角色选择相应的表并将数据插入数据库。
• 响应处理： 前端根据后端返回的响应信息显示相应的注册结果。

5. 考虑事项

• 数据验证与安全： 后端还需对传入的数据进行验证（如SQL注入、防止重复注册等），并对密码进行加密存储。
• 错误处理： 前后端都需处理各种可能出现的错误（如数据库插入失败、网络问题等），并给出相应的用户提示。

具体实现

后端：

UserController:

 @Data
    public static class RegisterRequest {
        private String name;
        private String phone;
//        private String email;
        private String password;
        private String role;
    }

 @PostMapping("/register")
    public ResponseEntity<ApiResponse<?>> register(@RequestBody RegisterRequest registerRequest) {
        int success = userService.insertUser2(registerRequest);
        if (success>0) {
            return ResponseEntity.ok(ApiResponse.success("注册成功",null));
        } else {
            return ResponseEntity.status(400).body(ApiResponse.error("注册失败"));
        }
    }

UserService接口：

 int insertUser2(UserController.RegisterRequest registerRequest);

UserServiceImpl实现类：

  @Override
    public int insertUser2(UserController.RegisterRequest registerRequest) {
        if ("教师".equals(registerRequest.getRole())) {
            // 将教师数据插入到教师表
            return teacherMapper.insertTeacher1(registerRequest);
        } else if ("家长".equals(registerRequest.getRole())) {
            // 将家长数据插入到家长表
            return parentMapper.insertParent1(registerRequest);
        }
        return 0;
    }

TeacherMapper接口：

 int insertTeacher1(UserController.RegisterRequest registerRequest);

TeacherMapper.xml：

 <insert id="insertTeacher1">
        INSERT INTO xm_teacher (teacher_name, teacher_phone, teacher_password,teacher_role)
        VALUES (#{name}, #{phone}, #{password},#{role})
    </insert>

ParentMapper接口：

 int updateParent2(Parent parent);

ParentMapper.xml:

 <insert id="insertParent1">
        insert into xm_parent (parent_name, parent_phone,  parent_password, parent_role)
        VALUES (#{name}, #{phone}, #{password}, #{role})
    </insert>

postman数据验证：

前端：

在Login.vue中添加注册按钮，在index.js中添加register路由

Register.vue:

<template>
  <div class="register-container">
    <div class="form-container">
      <h2>用户注册</h2>
      <form @submit.prevent="register">
        <div class="form-group">
          <label for="name">姓名：</label>
          <input
              type="text"
              id="name"
              v-model="name"
              placeholder="请输入您的姓名"
              required
          />
        </div>
        <div class="form-group">
          <label for="phone">手机号：</label>
          <input
              type="text"
              id="phone"
              v-model="phone"
              placeholder="请输入您的手机号"
              required
          />
        </div>

        <div class="form-group">
          <label for="password">密码：</label>
          <input
              type="password"
              id="password"
              v-model="password"
              placeholder="请输入密码"
              required
          />
        </div>
        <div class="form-group">
          <label for="confirmPassword">确认密码：</label>
          <input
              type="password"
              id="confirmPassword"
              v-model="confirmPassword"
              placeholder="请再次输入密码"
              required
          />
        </div>
        <div class="form-group">
          <div class="radio-group">
            <label>
              <input
                  type="radio"
                  name="role"
                  value="教师"
                  v-model="role"
                  required
              />
              教师
            </label>
            <label>
              <input
                  type="radio"
                  name="role"
                  value="家长"
                  v-model="role"
                  required
              />
              家长
            </label>
          </div>
        </div>

        <button type="submit">注册</button>
      </form>
      <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: '',
      phone: '',
      password: '',
      confirmPassword: '',
      role: '',
      errorMessage: null,
    };
  },
  methods: {
    async register() {
      // 表单验证
      if (this.password !== this.confirmPassword) {
        this.errorMessage = '两次输入的密码不一致';
        return;
      }

      try {
        const response = await axios.post('http://localhost:8081/api/auth/register', {
          name: this.name,
          phone: this.phone,
          password: this.password,
          role: this.role,
        });

        if (response.data.success) {
          this.$message.success("注册成功");
          // 注册成功后跳转到登录页面
          this.$router.push({ name: 'Login' });
        } else {
          this.errorMessage = response.data.message;
        }
      } catch (error) {
        this.$message.error("注册失败");
        this.errorMessage = '注册失败，请检查输入信息';
      }
    },
  },
};
</script>

<style scoped>
.register-container {
  position: relative;
  width: auto;
  height: 98vh;
  background-image: url('@/images/2.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 10%;
}

.form-container {
  width: 300px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.95);
  position: absolute;
  top: 55%;
  right: 20%;
  transform: translateY(-50%);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.error {
  color: red;
  margin-top: 15px;
  text-align: center;
}

.radio-group {
  display: flex;
  gap: 25px;
}

.radio-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  margin-right: 5px;
}
</style>

前后端联调：

前端输入数据，数据库出现数据，完成！