【MEVN架構】mongodb+ express + vue + nodejs 搭建後臺

時間 2019-11-29

標籤 MEVN架構 mongodb express vue nodejs 搭建後臺欄目 MongoDB 简体版

原文原文鏈接

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

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

¶準備工做

1.nodejs下載及安裝html

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

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

4.生成express框架 node

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

¶搭建node服務器環境

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

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

index.js文件代碼：vue-router

// 引入編寫好的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文件代碼：mongodb

// 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文件代碼：vuex

// 多是個人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;