Image 062.png
主要要完成的就是这一块了
我的个人构思想法
1、首先建里一个简单node server.
2、然后定好接口，两边都把接口写好
3、最后把项目打包，丢过去server里面测试一下
缺点：这样调试非常非常不方便，不知道有没有简单一点的办法，希望有大佬能指点一下
我的思路
第一步：创建一个简单的server
cnpm init
然后安装各种包
Image 063.png
然后写一个app.js
// 引入各种包
const express = require('express');
const formidable = require('formidable');
// 这个DB.js是我看一个大佬写的操作mongodb的封装好的库
const DB = require('./DB');
// 这是数据库的地址和集
let dburl = 'mongodb://localhost:27017/learn'
let collection = 'users'
const mondb = new DB(dburl, collection)
// 这个解析穿过来的数据
const form = new formidable.IncomingForm()
const app = express();
app.use(express.static('./dist'))
// 注册接口 /regin
app.post('/regin', (req, res) => {
form.parse(req, (err, fields, files) => {
let obj = {
username: fields.username,
password: fields.password,
tel: fields.tel,
email:fields.email,
name: fields.name,
time: new Date()
}
// 把数据插入到数据库中，表示注册成功，并把传过来的数据返回方便登录
mondb.insert(obj).then(result => {
res.send(obj)
})
})
})
// 登录接口
app.post('/login', (req, res) => {
form.parse(req, (err, fields, files) => {
let user = {
username: fields.username,
password: fields.password
}
})
mondb.query(user).then(result => {
res.send(result)
})
})
app.listen(8088);
console.log('ok')
总的来看是这样的
Image 064.png
第二步：编写本地vue项目的登录注册接口
api/api.js
import axios from 'axios'
let base = ''
// 注册接口
export const ReginUser = params => {
return axios.post(`${base}/regin`, params)
}
// 登录接口
export const LoginUser = params => {
return axios.post(`${base}/login`, params)
}
编写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>
// 引入api接口
import {ReginUser} from '../api/api'
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('开始写入后台数据！')
// 这是要注册的数据
let ReginParams = {
username: this.ReginForm.username,
password: this.ReginForm.password,
tel: this.ReginForm.tel,
email: this.ReginForm.email,
name: this.ReginForm.name
}
// 调用借口，执行axios请求获取返回的数据
ReginUser(ReginParams).then(res => {
// 让注册按钮不要在转了
this.logining = false
// 让页面给个提示
this.$message({
type: 'success',
message: '注册成功'
})
let user = res.data
console.log(user)
// 将返回的数据注入内存
sessionStorage.setItem('user', JSON.stringify(user))
// 跳转到我的信息的页面
this.$router.push('/manger/my')
})
} 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>
编写一下my.vue，来验证一下
my.vue
代码：
<template>
<div>
<h1>my.data</h1>
<h5>我的name: {{username}}</h5>
</div>
</template>
<script>
export default {
data () {
return {
// .
username: ''
}
},
mounted () {
// 从内存取出数据
let user = sessionStorage.getItem('user')
// 判断数据是否存在
if (user) {
user = JSON.parse(user)
this.username = user.name
}
}
}
</script>
第三步：打包测试
打包
Image 065.png
把dist文件夹拖到node里面
Image 066.png
运行app.js
node app.js
Image 067.png
效果
这是用node运行在8088端口的了
Image 068.png
输入规则已经验证通过
Image 069.png
最重要的考验来了，点一下注册.....
Image 070.png
成功了，跳转正常，所有注册的数据也都回来了，也没有任何warning,error
数据库中也添加了这一条数据
Image 071.png
