vuevueroutervuexelementuiaxios学习笔记（六）在项目中使用MongoDB完成注册

完成注册功能的思路

我的个人构思想法
1、首先建里一个简单node server.
2、然后定好接口，两边都把接口写好
3、最后把项目打包，丢过去server里面测试一下

缺点：这样调试非常非常不方便，不知道有没有简单一点的办法，希望有大佬能指点一下

第一步：创建一个简单的server

cnpm init

然后安装各种包

然后写一个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')


总的来看是这样的

第二步：编写本地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的逻辑部分

第三步：编写一下my.vue，来验证一下

my.vue

代码：

第四步：打包测试

打包

把dist文件夹拖到node里面

运行app.js

node app.js

效果
这是用node运行在8088端口的了

输入规则已经验证通过

最重要的考验来了，点一下注册&＃8230;..

成功了，跳转正常，所有注册的数据也都回来了，也没有任何warning,error
数据库中也添加了这一条数据

目标：

因为登录页面还没有改，暂时测试不了登录功能,接下来就改完善一下登录状态，不能登录了登录注册的按钮还在，应该要换成人物头像和名字了