vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（六）在项目中使用MongoDB完成注册

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的逻辑部分

编写一下my.vue，来验证一下

my.vue
代码：

第三步：打包测试
打包

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

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