注册主体跟登录差不多。
看如下代码:
<template>
<div class="login-section">
<!-- :rules="rules" -->
<el-form
label-position="top" label-width="100px" class="demo-ruleForm"
:model="ruleFrom"
:rules="rules"
ref="ruleFromTwo"
>
<el-form-item label="用户名" prop="name" autocomplete="off">
<el-input type="text" v-model="ruleFrom.name" ></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" autocomplete="off">
<el-input type="password" v-model="ruleFrom.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitFrom('ruleFromTwo')">提交</el-button>
<el-button @click="resetFrom('ruleFromTwo')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {register} from '@/service/api';
export default {
data() {
return {
ruleFrom: {
name: '',
password: ''
},
rules: {
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
};
},
methods: {
submitFrom(forName) {
this.$refs[forName].validate(async (valid) => { //validata验证器
// console.log(valid)
if (valid) {//判断验证是否通过
register({
name: this.ruleFrom.name,
password: this.ruleFrom.password,
}).then((data) => {
console.log(data)
if (data.code === 0) {//成功
// localStorage.setItem('token', data.data.token);
window.location.href = '/login'
}
if (data.code === 1) {
this.$message.error(data.mes)
this.$refs[forName].resetFields();
}
})
} else {
this.$message.error('请按照要求输入')
return false
}
});
},
resetFrom(forName) {
this.$refs[forName].resetFields();//重置表单数据以及验证结果
}
}
}
</script>
<style lang="stylus">
.login-section
padding 0px 20px
</style>
注册的话,此项目没有过多要求。
需要使用到api中的register,这个是注册新用户的方法。
只需将此方法,与登录方法login替换掉,即可将数据新植入后台数据,可完成注册。
其余详情可根据本人的(登录篇)
若有疑问,请及时指出哦
小作者在持续更新中…