在完成了后台接口的编写后下面需要开始写前端部分了
使用的前端代码中自带了登录和注册部分,只需要稍微改造一下即可
找到注册页面
一般遇到不熟悉的项目的时候,可以通过查找关键字和文件名来大致确定要修改文件的位置
运行项目后点击「创建新账号」
![e7385d0fc3b180c4d88c4062894352f0.jpeg](https://i-blog.csdnimg.cn/blog_migrate/4a0769ec6c87a56e1b2c9cef63a7502b.jpeg)
进入到http://localhost:2800/#/user_register页面
![5f2dc1d761df3eef3b81e7268024012f.jpeg](https://i-blog.csdnimg.cn/blog_migrate/05f2fb88463c8e5d066e5f36dc4c1b52.jpeg)
和我们写的接口一样,需要账号、密码、二次确认密码
搜索中文内容「登录账号」
找到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();
}
}
}
],
...
}
填入注册信息后点击下一步
![c5291c2875d225bc99bffc4667a6be15.jpeg](https://i-blog.csdnimg.cn/blog_migrate/2dcb0d1ef4e9f4d50a9ac8929884157a.jpeg)
这边是输入 姓名、邮箱,还有两个我们不需要的字段,缺少了我们要的手机号码字段
<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
}
})
},
测试
测试一下正常注册
![d8c1c7f361802b6ed2a4d06fcf8dbc33.jpeg](https://i-blog.csdnimg.cn/blog_migrate/bfe1956af3918a3bb405472d83581bec.jpeg)
测试一下异常注册
![bea343aae2024f2a64056c3bfe047ab2.jpeg](https://i-blog.csdnimg.cn/blog_migrate/4f9d34b65a9460e87453aa0c0ac5a369.jpeg)