Vue小模塊之用戶登錄功能（五）連接MongoDB數據庫

Vue小模塊之用戶登錄功能（五）連接MongoDB數據庫

技術棧

Vue全家桶：
前端框架 Vue.js
狀態管理 Vuex
動態路由匹配 vue-router
http服務 axios
模塊打包 webpack
UI框架 element
數據服務器
服務器端 node.js
基於node的web框架 express
分佈式數據庫 mongodb
mongodb工具 mongoose

安裝MongoDB

前往 MongoDB官網下載最新版的Mongodb（建議下載msi版的），下載速度較慢，建議順便將MongoDB Compass（MongoDB GUI工具）一起下載了，在MongoDB安裝程序中也可以選擇安裝Compass，但是速度特別慢而且容易卡死，所以最好自行下載。

安裝完成後，用cmd進入mongod.exe所在的目錄，將數據庫路徑創建在你需要的位置（主要要先創建目錄）

mongod.exe --dbpath d:\test\mongodb\data

數據庫路徑創建完畢後，直接輸入mongod命令啓動數據庫

mongod

看到以下提示說明數據庫成功啓動

[initandlisten] waiting for connections on port 27017

打開MongoDB Compass連接數據庫

創建test數據庫和users表

在users表中插入一條數據

連接數據庫

回到之前創建的login server項目，引入mongodb和mongoose

$ npm i mongodb mongoose --save

在目錄models/下創建user.js文件

var mongoose = require('mongoose')

var userSchema = new mongoose.Schema({
    name: String,
    pass: String，
    nickName: String
})

module.exports = mongoose.model('User', userSchema)

修改route/users.js，刪除掉之前的模擬數據，改爲通過User模型獲取數據

var express = require('express')
var router = express.Router()

var User = require('../models/user')

router.route('/validate').post((req, res) => {
    User.findOne({name: req.body.name, pass: req.body.pass}, (err, user) => {
        if (err) {
            console.log(err)
        }
        res.json(user)
    })
})

module.exports = router

最後將連接數據庫的代碼加入到app.js中

var url = "mongodb://localhost:27017/test"
var mongoose = require('mongoose')
mongoose.connect(url, (err) => {
    if (err) {
        console.log(err)
    } else {
        console.log('db connect success')
    }
})

測試連接

啓動服務器

node app.js

用http工具（Postman或firebug）向服務器發送POST請求

小結

本階段已將後端服務器與數據庫相連，下個階段將回到Vue工程中，通過axios發送ajax請求與後端服務器進行通信