9.寻光集后台管理系统-用户管理(注册页面)

在完成了后台接口的编写后下面需要开始写前端部分了

使用的前端代码中自带了登录和注册部分，只需要稍微改造一下即可

找到注册页面

一般遇到不熟悉的项目的时候，可以通过查找关键字和文件名来大致确定要修改文件的位置

运行项目后点击「创建新账号」

进入到http://localhost:2800/#/user_register页面

和我们写的接口一样，需要账号、密码、二次确认密码

搜索中文内容「登录账号」

找到frontend/src/views/login/userRegister.vue文件

根据接口参数修改前端部分

我们接口里面，注册请求的参数是

{
  "username": "zhongxin",
  "password": "123456",
  "password_confirm": "123456",
  "email": "490336534@qq.com",
  "mobile": "13000000000",
  "name": "测试游记"
}

将data中的form修改一下

form: {
        username: "",
        password: "",
        password_confirm: "",
        email: "",
        mobile: "",
        name: "",
      }

查看第一个表单

<el-form v-if="stepActive==0" ref="stepForm_0" :model="form" :rules="rules" :label-width="120">
  <el-form-item label="登录账号" prop="user">
    <el-input v-model="form.user" placeholder="请输入登录账号"></el-input>
    <div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
  </el-form-item>
  <el-form-item label="登录密码" prop="password">
    <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
    <sc-password-strength v-model="form.password"></sc-password-strength>
    <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
  </el-form-item>
  <el-form-item label="确认密码" prop="password2">
    <el-input v-model="form.password2" type="password" show-password placeholder="请再一次输入登录密码"></el-input>
  </el-form-item>
  <el-form-item label="" prop="agree">
    <el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox><span class="link" @click="showAgree=true">《平台服务协议》</span>
  </el-form-item>
</el-form>

需要把账号、确认密码的字段改掉，删除同意协议字段

<el-form-item label="登录账号" prop="username">
    <el-input v-model="form.username" placeholder="请输入登录账号"></el-input>
    <div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
  </el-form-item>
  <el-form-item label="登录密码" prop="password">
    <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
    <sc-password-strength v-model="form.password"></sc-password-strength>
    <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
  </el-form-item>
  <el-form-item label="确认密码" prop="password_confirm">
    <el-input v-model="form.password_confirm" type="password" show-password
          placeholder="请再一次输入登录密码"></el-input>
  </el-form-item>
</el-form>

这个表单有做规则校验

rules: {
    user: [
      {required: true, message: '请输入账号名'}
    ],
    password: [
      {required: true, message: '请输入密码'}
    ],
    password2: [
      {required: true, message: '请再次输入密码'},
      {
        validator: (rule, value, callback) => {
          if (value !== this.form.password) {
            callback(new Error('两次输入密码不一致'));
          } else {
            callback();
          }
        }
      }
    ],
    agree: [
      {
        validator: (rule, value, callback) => {
          if (!value) {
            callback(new Error('请阅读并同意协议'));
          } else {
            callback();
          }
        }
      }
    ],
 ...
}

把字段也进行下修改

rules: {
    username: [
      {required: true, message: '请输入账号名'}
    ],
    password: [
      {required: true, message: '请输入密码'}
    ],
    password_confirm: [
      {required: true, message: '请再次输入密码'},
      {
        validator: (rule, value, callback) => {
          if (value !== this.form.password) {
            callback(new Error('两次输入密码不一致'));
          } else {
            callback();
          }
        }
      }
    ],
...
}

填入注册信息后点击下一步

这边是输入 姓名、邮箱，还有两个我们不需要的字段，缺少了我们要的手机号码字段

<el-form v-if="stepActive==1" ref="stepForm_1" :model="form" :rules="rules" :label-width="120">
  <el-form-item label="真实姓名" prop="userName">
    <el-input v-model="form.userName" placeholder="请输入真实姓名"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
  </el-form-item>
  <el-form-item label="账号类型" prop="userType">
    <el-radio-group v-model="form.userType">
      <el-radio-button label="1">企业开发者</el-radio-button>
      <el-radio-button label="2">企业开发者</el-radio-button>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="开通类别" prop="open">
    <el-checkbox-group v-model="form.open">
      <el-checkbox label="1">云存储API</el-checkbox>
      <el-checkbox label="2">云检索API</el-checkbox>
      <el-checkbox label="3">Javescript API</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</el-form>

修改为

<el-form v-if="stepActive==1" ref="stepForm_1" :model="form" :rules="rules" :label-width="120">
  <el-form-item label="真实姓名" prop="name">
    <el-input v-model="form.name" placeholder="请输入真实姓名"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
  </el-form-item>
  <el-form-item label="手机号码" prop="mobile">
    <el-input v-model="form.mobile" placeholder="请输入手机号码"></el-input>
  </el-form-item>
</el-form>

rules部分为

name: [
  {required: true, message: '请输入真实姓名'}
],
email: [
  {required: true, message: '请输入邮箱地址'}
],
mobile: [
  {required: true, message: '请输入手机号码'}
]

注册接口

在填写完内容后点击「提交」按钮需要完成注册

下面看一下提交按钮部分的代码

<el-button v-if="stepActive===1" type="primary" @click="save">提交</el-button>

点击操作会触发方法save

save() {
      const formName = `stepForm_${this.stepActive}`
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.stepActive += 1
        } else {
          return false
        }
      })
    },

这里没有调用任何接口，只是把步骤往后推进了一步，所以需要在这里加上注册接口

找到frontend/src/api/model/auth.js文件

这个文件里面存放了用户相关的接口

仿照一下，在里面加上注册接口

register: {
    url: `${config.API_URL}/users/register/`,
    name: "注册",
    post: async function (data = {}) {
      return await http.post(this.url, data);
    }
  }

这里有点尴尬，因为config.API_URL是前端项目的后台地址，直接改的话，我们没有其他接口会导致出错，所以暂时先使用config.API_URL1

在frontend/src/config/index.js中加上

API_URL1: "http://127.0.0.1:8000",

在save函数上加上注册请求的调用

save() {
      const formName = `stepForm_${this.stepActive}`
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          var user = await this.$API.auth.register.post(this.form)
          console.log(user)
          this.stepActive += 1
        } else {
          return false
        }
      })
    },

测试

测试一下正常注册

测试一下异常注册