【MEVN架構】mongodb+ express + vue + nodejs 搭建后台

本文轉載自查看原文 2018-05-28 11:09 2086 【Vue2.0】/ 【Nodejs】

前端技術棧：vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui

服務端技術棧：nodejs + express + mongodb

¶准備工作

1.nodejs下載及安裝

2.mongodb的下載及安裝配置（其中包含了NoSQL for MongoDB 的使用方式）

3.【vue】后台管理項目搭建Demo （另一篇:【vue】vue.js安裝教程/vue項目搭建）倆個所選的技術棧稍微不同

4.生成express框架

進入項目目錄，輸入命令 npm install express 即可

¶搭建node服務器環境

(可參考地址與我想要的完整后台搭建用料一樣：第4步起）

1、在項目的根目錄新建一個叫server的目錄，用於放置Node的東西。進入server目錄，再新建三個js文件：
index.js （入口文件）
db.js （設置數據庫相關）
api.js （編寫接口）

index.js文件代碼：

// 引入編寫好的api
const api = require('./api'); 
// 引入文件模塊
const fs = require('fs');
// 引入處理路徑的模塊
const path = require('path');
// 引入處理post數據的模塊
const bodyParser = require('body-parser')
// 引入Express
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(api);
// 訪問靜態資源文件 這里是訪問所有dist目錄下的靜態資源文件
app.use(express.static(path.resolve(__dirname, '../dist')))
// 因為是單頁應用 所有請求都走/dist/index.html
app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
    res.send(html)
})
// 監聽8088端口
app.listen(8088);
console.log('success listen…………');

View Code

db.js文件代碼：

// Schema、Model、Entity或者Documents的關系請牢記，Schema生成Model，Model創造Entity，Model和Entity都可對數據庫操作造成影響，但Model比Entity更具操作性。
const mongoose = require('mongoose');
// 連接數據庫 如果不自己創建 默認test數據庫會自動生成
mongoose.connect('mongodb://127.0.0.1:27017'); // 地址跟第一步的地址對應。

// 為這次連接綁定事件
const db = mongoose.connection;
db.once('error',() => console.log('Mongo connection error'));
db.once('open',() => console.log('Mongo connection successed'));
/************** 定義模式loginSchema **************/
const loginSchema = mongoose.Schema({
    account : String,
    password : String
});

/************** 定義模型Model **************/
const Models = {
    Login : mongoose.model('Login',loginSchema)
}

module.exports = Models;

View Code

api.js文件代碼：

// 可能是我的node版本問題，不用嚴格模式使用ES6語法會報錯
"use strict";
const models = require('./db');
const express = require('express');
const router = express.Router();

/************** 創建(create) 讀取(get) 更新(update) 刪除(delete) **************/

// 創建賬號接口
router.post('/api/login/createAccount',(req,res) => {
    // 這里的req.body能夠使用就在index.js中引入了const bodyParser = require('body-parser')
    let newAccount = new models.Login({
        account : req.body.account,
        password : req.body.password
    });
    // 保存數據newAccount數據進mongoDB
    newAccount.save((err,data) => {
        if (err) {
            res.send(err);
        } else {
            res.send('createAccount successed');
        }
    });
});
// 獲取已有賬號接口
router.get('/api/login/getAccount',(req,res) => {
    // 通過模型去查找數據庫
    models.Login.find((err,data) => {
        if (err) {
            res.send(err);
        } else {
            res.send(data);
        }
    });
});

module.exports = router;