Vue cli3+Mongodb+express的登陸功能

個人項目是Vue Cli3+Electron+Antd+Mongodb+express

Mongodb和Studio 3T官網下載後安裝。具體可谷歌或百度。而後啓動Mongodb

而後打開Studio 3T，鏈接數據庫端口，右鍵新建一個數據庫，我這裏新建的數據庫爲login。

user是本身新建的數據集合，大概以下：

搭建服務器

個人項目是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

一、搭建服務器

安裝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 // 跨域
      }
    }
  },

二、鏈接數據庫

安裝依賴：

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)

三、編寫接口，路由模塊化

爲了方便管理，這裏須要使用到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)
          })
        }
      })
    }
  }