Image 043.png
注册页面regin.vue的代码和登录页面的代码差不多，就是要自己写2个验证，电话号码和确认密码的验证规则
regin.vue代码
<template>
<el-main>
<el-form
:model="ReginForm"
ref="ReginForm"
:rules="rule"
class="regform"
label-width="0">
<h3>用户注册</h3>
<el-form-item prop="username">
<el-input
type="text"
v-model="ReginForm.username"
placeholder="用户名">
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
v-model="ReginForm.password"
placeholder="密码">
</el-input>
</el-form-item>
<el-form-item prop="confirmpassword">
<el-input
type="password"
v-model="ReginForm.confirmpassword"
placeholder="确认密码">
</el-input>
</el-form-item>
<el-form-item prop="email">
<el-input
type="email"
v-model="ReginForm.email"
placeholder="电子邮件">
</el-input>
</el-form-item>
<el-form-item prop="tel">
<el-input
type="text"
v-model.number="ReginForm.tel"
placeholder="电话号码">
</el-input>
</el-form-item>
<el-form-item prop="name">
<el-input
type="text"
v-model="ReginForm.name"
placeholder="昵称">
</el-input>
</el-form-item>
<el-form-item >
<el-button
type="success"
class="submitBtn"
round
@click.native.prevent="submit"
:loading="logining">
注册
</el-button>
<el-button
type="primary"
class="resetBtn"
round
@click.native.prevent="reset">
重置
</el-button>
<hr>
<p>已经有账号，马上去<span class="to" @click="tologin">登录</span></p>
</el-form-item>
</el-form>
</el-main>
</template>
<script>
export default {
data () {
let confirmpasswordCheck = (rule, value, callback) => {
if (value === '') {
return callback(new Error('密码是必须的'))
} else if (value !== this.ReginForm.password) {
return callback(new Error('两次输入的密码不一致'))
} else {
return callback()
}
}
let telCheck = (rule, value, callback) => {
if (value === '') {
return callback(new Error('电话号码是必须的'))
} else if (!Number.isInteger(value)) {
return callback(new Error('电话号码必须是数字'))
} else if (value.toString().length !== 11) {
return callback(new Error('电话号码必须是11位数字'))
} else {
callback()
}
}
return {
ReginForm: {
username: '',
password: '',
confirmpassword: '',
tel: '',
email: '',
name: ''
},
logining: false,
rule: {
username: [
{
required: true,
max: 14,
min: 7,
message: '用户名是必须的，长度为7-14位',
trigger: 'blur'
}
],
password: [
{
required: true,
message: '密码是必须的！',
trigger: 'blur'
}
],
confirmpassword: [
{
required: true,
validator: confirmpasswordCheck,
trigger: 'blur'
}
],
tel: [
{
required: true,
validator: telCheck,
trigger: 'blur'
}
],
email: [
{
required: true,
type: 'email',
message: '请输入正确的电子邮件格式(xxx@xxx.com)',
trigger: 'blur'
}
],
name: [
{
required: true,
max: 12,
min: 2,
message: '昵称是必须的，最好是汉字',
trigger: 'blur'
}
]
}
}
},
methods: {
// ...
submit () {
this.$refs.ReginForm.validate(valid => {
if (valid) {
this.logining = true
console.log('开始写入后台数据！')
} else {
console.log('submit err')
}
})
},
reset () {
this.$refs.ReginForm.resetFields()
},
tologin () {
this.$router.push('/login')
}
}
}
</script>
<style scoped>
.regform {
margin: 20px auto;
width: 310px;
background: #fff;
box-shadow: 0 0 10px #B4BCCC;
padding: 30px 30px 0 30px;
border-radius: 25px;
}
.submitBtn {
width: 65%;
}
.to {
color: #FA5555;
cursor: pointer;
}
</style>
要想实现注册和登录功能必须得有数据，一种办法是用mockjs来模拟数据，也可以直接用个数据库，为了学更多的知识，我还是决定研究一下数据库MongoDB
1、下载数据库，官网地址：https://www.mongodb.com/
2、安装数据库：
Image 044.png
安装反正就是next下去就是了
Image 045.png
当然改个安装路径也是不错的
Image 046.png
安装完之后
Image 047.png
因为mongodb的数据一般用cmd操作，不适合直观的看，所以可以下一个mongovue来方便眼睛看
地址：http://pan.baidu.com/s/1c15QWTy
安装都有说明
3、启动数据库
启动数据库之前先找个地方建个文件夹来存放数据，一般叫data
然后就可以启动数据库了
因为用的是3.4的mongodb,所以用mongovue来查看的话会不能创建collections,也就是数据集相当于mysql的表，查了很多资料说是因为数据库的引擎不一样....
针对这个问题据说是这样解决的
Image 048.png
所以先来尝试一下
mongod --storageEngine mmapv1 --dbpath （data的路径）
Image 049.png
跑起来是这个样子
Image 050.png
然后去看一下效果http://localhost:27017/
出现这个才说明是启动了
Image 051.png
然后打开mongovue来测试一下
先创建一个连接
Image 052.png
然后是这样的
Image 053.png
创建一个新的数据库learn
Image 054.png
在learn里面创建一个新的collections,就叫users
Image 055.png
Image 056.png
成功了
Image 058.png
说明这个方法是很有效的
如果还是不成功的话，先把data里面的数据清空,把数据库换成mmapv1引擎，再重复上面的操作
Image 059.png
