Vue cli3+Mongodb+node.js/express的登录功能

我的项目是Vue Cli3+Electron+Antd+Mongodb+express

Mongodb和Studio 3T官网下载后安装。具体可谷歌或百度。然后启动Mongodb

然后打开Studio 3T，连接数据库端口，右键新建一个数据库，我这里新建的数据库为login。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-olql8TPG-1574226756586)(/img/bVbz2dy)]
user是自己新建的数据集合，大概如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZXtm1Zx-1574226756588)(/img/bVbz2dJ)]

搭建服务器

我的项目是Vue cli 3 + Electron + express的，在项目的根目录新建一个文件夹service，然后在该文件夹下新建几个文件夹分别是database、routes以及一个服务器启动文件server.js，具体如下

├─ service
│    ├─ database
│    ├─ routes
│    └─ server.js
├─ src
│    ├─ App.vue
│    ├─ assets
│    ├─ background.js
│    ├─ common
│    ├─ components
│    ├─ main.js
│    ├─ router.js
│    ├─ store.js
│    └─ views
└─ vue.config.js

1、搭建服务器

安装express：

npm add express -S

在server.js文件中写入：

const express = require('express')
const app = express()

// 请求头设置，以防万一
app.all('*', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type')
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  res.header('X-Powered-By', ' 3.2.1')
  res.header('Content-Type', 'application/json;charset=utf-8')
  return next()
})
app.get('/', (req, res) => res.send('hello from server'))
app.listen(3000, () => console.log('app listening on port 3000'))

在service路径下启动服务输入node server.js，简单服务器搭建成功。

为了解决跨域问题，需要在vue.config.js文件中加入：

devServer: {
    port: 8080,
    proxy: {
      '/user': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true // 跨域
      }
    }
  },

2、连接数据库

安装依赖：

npm add mongodb mongoose -S

在database文件夹下新建文件db.js，然后输入：

const mongoose = require('mongoose')
const DBURL = 'mongodb://localhost:27017/login' //login 就是自己创建的数据库名

// 连接数据库
mongoose.connect(DBURL)

// 连接成功
mongoose.connection.on('connected', () => {
  console.log('mongoose connection open to ' + DBURL)
})

// 连接失败
mongoose.connection.on('error', error => {
  console.log('Mongoose connection error:' + error)
})

// 连接断开
mongoose.connection.on('disconnected', function () {
  console.log('Mongoose connection disconnected')
})
module.exports = mongoose

然后再新建一个文件user.js创建数据库Schema，即数据库集合的模型骨架，或者是数据属性模型传统意义的表结构。

/*
 定义一个user的Schema
*/
const mongoose = require('./db.js')
const Schema = mongoose.Schema

// 创建一个模型
const UserSchema = new Schema({
  username: String,
  password: String
})

// 导出model模块
module.exports = mongoose.model('User', UserSchema)

3、编写接口，路由模块化

为了方便管理，这里需要使用到express的路由中间件。

为了方便对前端发送过来的数据进行解析，引用一个body-parser中间件，安装：

npm add body-parser -S

然后在server.js中引入：

const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

在routes文件夹中新建文件user.js：

const express = require('express')
const router = express.Router()
const User = require('../database/user')

router.post('/login', async (req, res, next) => {
  console.log(req.body)
//这里的req.body 其实使用了body-parser中间件 用来对前端发送来的数据进行解析
  const username = req.body.username
  const password = req.body.password
  // 判断用户名和密码是否和数据库的相同
  let doc = await User.findOne({ username })
  if (!doc) {
    req.body = {
      code: -1,
      msg: '用户名不存在'
    }
    res.send(req.body)
  } else if (doc.password !== password) {
    req.body = {
      code: -1,
      msg: '密码错误'
    }
    res.send(req.body)
  } else if (doc.password === password) {
    try {
      req.body = {
        code: 0,
        msg: '登录成功',
        username
      }
      res.send(req.body)
    } catch (err) {
      req.body = {
        code: -1,
        msg: '登录失败，请重新登录'
      }
      res.send(req.body)
    }
  }
    module.exports = router

然后在server.js中引入路由：

const user = require('./router/user')
app.use('/user', user)

完善登录功能

安装axios:

npm add axios -S

将axios改写成Vue的原型属性：

// main.js
import axios from 'axios'
Vue.prototype.$ajax = axios

打开登录页面SignIn.vue，调用接口:

methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          let loginParams = {
            username: values.userName,
            password: values.password
          }
          this.$ajax.post('/user/login', loginParams).then(res => {
            let result = res.data

            if (result.code === 0) {
              setTimeout(() => {
                this.spinning = true
                const msg = result.msg || '登录成功'
                this.$message.success(msg)
                sessionStorage.setItem('user', JSON.stringify(result.username))
                this.$router.push('/')// 登录后转向主页
              }, 1000)
              this.spinning = false
            } else {
              const errorMsg = result.errorMsg || '登录失败'
              this.$message.warn(errorMsg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }
  }