MEVN 架構(MongoDB + Express + Vue + NODEJS)搭建

一個完整的網站服務架構包括:
一、web frame ---這裏應用express框架
二、web server ---這裏應用nodejs
三、Database ---這裏應用monggoDB
四、前端展現 ---這裏應用vuehtml

首先咱們要安裝mongoDB(本例應用的mongoDB 3.4.7版本) 和 nodejs(本例應用的是nodejs v6.10.3) 具體安裝步驟你們能夠百度一下,網上安裝示例不少,這裏不過多講解,如下咱們重點講解網站框架搭建操做。前端

對應以上要點一一做出解釋及具體操做步驟:
第一步:建立mongoDB數據庫
一、直接打開mongoDB安裝目錄下binmongod.exe文件,可見以下圖,即爲數據庫服務啓動成功
![clipboard.png](/img/bVUtsi)vue

二、瀏覽器輸入localhost:27017顯示以下,證實數據庫可用
![clipboard.png](/img/bVUtsr)node

第二步:生成vue框架
一、全局生成vue框架,輸入指令
npm i -g vue-cliwebpack

二、建立本身的文件夾
![clipboard.png](/img/bVUtbB)web

三、項目初始化
執行如下命令,自動建立目錄 E:/workspace/test
![clipboard.png](/img/bVUtpe)
一路yes以下
![clipboard.png](/img/bVUtNA)
生成目錄結構以下:
![clipboard.png](/img/bVUtNS)mongodb

執行命令,進行項目初始化:
cd test
npm install
![clipboard.png](/img/bVUtOS)vue-cli

四、在項目根目錄src/main.js添加代碼
import vueResource from 'vue-resource'
Vue.use(vueResource)
如圖所示
![clipboard.png](/img/bVUtp7)數據庫

五、因爲上一步添加代碼vue-resource,這裏要引入vue-resource
執行命令如圖所示
![clipboard.png](/img/bVUtqs)
執行後顯示以下,則爲正常執行
![clipboard.png](/img/bVUtqu)express

第三步:生成expressm框架
一、執行命令npm install express,生成以下
![clipboard.png](/img/bVUtrG)

第四步:搭建node服務器環境
一、在項目的根目錄新建一個叫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…………');

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;

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;

二、對比node_modules目錄缺乏body-parser模塊和mongoose模塊,所以要添加這兩個模塊
執行命令:
![clipboard.png](/img/bVUtt0)

![clipboard.png](/img/bVUtt9)

三、至此咱們的後端代碼就編寫好了,進入server目錄,敲上 node index命令,node就會跑起來,這時在瀏覽器輸入http://localhost:8088/api/log...就能訪問到這個接口了,執行命令以下:
![clipboard.png](/img/bVUtuw)

四、如今咱們的本地開發環境的 web server的接口是 index.js 裏的8088,可是本地的webpack生成的網頁端口是8080,這兩個不一致。須要進行代理(proxy)在config/index.js 中修改
![clipboard.png](/img/bVUtuC)

五、這時,從新啓動項目
![clipboard.png](/img/bVUtvL)
咱們在前端接口地址前加上/api,就會指向http://localhost:8088/api/,因而咱們就能訪問到後端的接口了!
![clipboard.png](/img/bVUtvd)

第五步:先後端開發完成,最後一步,前端打包,後端部署。
一、前端打包就很簡單了,一個命令:
npm run build 這就生成了一個dist目錄,裏面就是打包出來的東西。
如今回過頭來看server裏面的入口文件index.js

最後,咱們在瀏覽器輸入http://localhost:8088/,就會跳到index.html。

到此爲止,咱們就完成了整個先後端各自開發到正式部署的流程。

相關文章
相關標籤/搜索