1、开始开发项目之前,我们应该整理思路,在脑子里形成一个流程图,然后按照流程图的步骤一步一步进行实现。
注册:1、需要一个简单的注册表格,并且表格应该能实现规则校验
2、收集注册表单的数据
3、调用注册接口
4、注册成功给用户提示并跳转登录界面
注册页面布局:
<div>
<!-- 注册页面的容器盒子 -->
<div class="container">
<!-- 注册盒子 -->
<div class="box">
<!-- 标题盒子 -->
<div class="title-box"></div>
<!-- 表单位置 -->
<el-form ref="form" :model="form" :rules="rulesObj">
<el-form-item prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
</el-form-item>
<el-form-item prop="repassword">
<el-input v-model="form.repassword" placeholder="请确认密码" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" class="btn">注册</el-button>
<el-link type="info" :underline="false" @click="$router.push('/login')">去登录</el-link>
</el-form-item>
</el-form>
</div>
</div>
</div>
美化样式:
<style lang="less" scoped>
.container {
background: url("../../assets/login_bg.jpg") center;
background-size: cover;
height: 100vh;
// position: relative;
.box {
width: 400px;
height: 335px;
background-color: #fff;
border-radius: 3px;
// display: flex;
// justify-content: center;
// align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0 30px;
box-sizing: border-box;
}
.title-box {
height: 60px;
background: url("../../assets/login_title.png") center no-repeat;
}
.btn{
width:100%;
}
}
</style>
注:这里可以复习一下水平垂直居中的实现方法
验证规则:
rulesObj: { // 表单验证规则对象
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9]{1,10}$/, message: '用户名必须是1-10的大小写字母和数字', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ pattern: /^\S{6,15}$/, message: '密码必须是6-15位非空字符', trigger: 'blur' }
],
repassword: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{ pattern: /^\S{6,15}$/, message: '密码必须是6-15位非空字符', trigger: 'blur' },
{ validator: samePwd, trigger: 'blur' }
]
}
收集表单数据:
form: { // 表单数据对象
username: '',
password: '',
repassword: ''
},
调用注册接口:
methods: {
onSubmit () {
// 兜底校验
this.$refs.form.validate(async valid => {
if (valid) {
// 通过校验
// 拿到输入的账号和密码 通过双向绑定
// console.log(this.form)
// 发送请求把数据对象传入
const { data: res } = await reg(this.form)
// console.log(res)
// 注册失败,提示用户
if (res.code !== 0) return this.$message.error(res.message)
// 注册成功,提示用户
this.$message.success(res.message)
// 跳转到登录页面
this.$router.push('/login')
} else {
return false // 阻止默认提交行为
}
})
}
}
登录:1、需要一个简单的登录表格,并且表格应该能实现规则校验。
2、收集登录表单数据
3、调用登录接口,并将表单收集的数据作为参数进行传递
4、登录成功给用户提示并跳转首页
登录页面布局:
<div>
<!-- 登录页面的容器盒子 -->
<div class="container">
<!-- 登录盒子 -->
<div class="box">
<!-- 标题盒子 -->
<div class="title-box"></div>
<!-- 表单位置 -->
<el-form ref="form" :model="form" :rules="rulesObj">
<el-form-item prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" class="btn">登录</el-button>
<el-link type="info" :underline="false" @click="$router.push('/register')">去注册</el-link>
</el-form-item>
</el-form>
</div>
</div>
</div>
美化样式:
<style lang="less" scoped>
.container {
background: url("../../assets/login_bg.jpg") center;
background-size: cover;
height: 100vh;
// position: relative;
.box {
width: 400px;
height: 335px;
background-color: #fff;
border-radius: 3px;
// display: flex;
// justify-content: center;
// align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0 30px;
box-sizing: border-box;
}
.title-box {
height: 60px;
background: url("../../assets/login_title.png") center no-repeat;
}
.btn{
width:100%;
}
}
</style>
验证规则及表单数据:
data () {
return {
form: { // 表单数据对象
username: '',
password: ''
},
rulesObj: { // 表单验证规则对象
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9]{1,10}$/, message: '用户名必须是1-10的大小写字母和数字', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ pattern: /^\S{6,15}$/, message: '密码必须是6-15位非空字符', trigger: 'blur' }
]
}
}
},
调用接口:
methods: {
...mapMutations(['updateToken']),
onSubmit () {
// 通过表单验证,收集用户输入内容,调用接口,反馈结果
this.$refs.form.validate(async valid => {
if (valid) {
// 通过校验
// 拿到输入的账号和密码 通过双向绑定
// console.log(this.form)
// 发送请求把数据对象传入
const { data: res } = await login(this.form)
// console.log(res)
// 登录失败,提示用户
if (res.code !== 0) return this.$message.error(res.message)
// 登录成功,提示用户
this.$message.success(res.message)
// 1.将token存到本地
// setToken(res.token)
// 2.将token存储到vuex
this.updateToken(res.token)
// 跳转到首页页面
this.$router.push('/')
} else {
return false // 阻止默认提交行为
}
})
}
}