MEVN 架構(gòu)（MongoDB + ExPRess + Vue + NODEJS）制作網(wǎng)站
MEVN 架構(gòu)是 MongoDB + Express + Vue + NODEJS 搭建的網(wǎng)站架構(gòu)。四個部分都可以用javaScript實現(xiàn)。
一個完整的網(wǎng)站服務(wù)架構(gòu)包括web frame, web server, Database, 以及前端展示實現(xiàn)。這里有一篇知乎答案，講一個網(wǎng)站的整個訪問流程，講的很清晰。
在這個架構(gòu)里，web server 就是nodejs，webframe 就是express，database是mongoDB，前端展示用了vue。我們一個一個來搭建。
我們在這里模擬實現(xiàn)一個登錄功能。
功能很簡單，填寫完賬號密碼點擊登錄按鈕，就把賬號密碼插入數(shù)據(jù)庫，并且查出現(xiàn)在已經(jīng)有哪些數(shù)據(jù)。
Database MongoDB安裝
brew install mongodb啟動
mongod --config /usr/local/etc/mongod.conf這時只是啟動了Mogod，鏈接數(shù)據(jù)庫需要再另外的窗口執(zhí)行
mongo輸出
MongoDB shell version v3.4.1connecting to: mongodb://127.0.0.1:27017MongoDB server version: 3.4.1Welcome to the MongoDB shell.這個地址mongodb://127.0.0.1:27017就是我們本機(jī)的mogo數(shù)據(jù)庫地址
使用 Vue-cli 生成一個vue框架安裝Vue-Cli
npm i -g vue-cli去到你想要放置項目的目錄，進(jìn)行初始化
vue init webpack XXX（你想要項目的名字）按提示一直下一步，完成后按提示
cd XXX
npm install （這里建議使用淘寶鏡像cnpm，不然墻外的東西……）
npm run dev
由于需要使用http請求，安裝一個vue-resource工具。
在main.js中使用
import vueResource from 'vue-resource'Vue.use(vueResource)EXPRESS使用npm安裝
npm install express –save搭建node服務(wù)器環(huán)境在項目的根目錄新建一個叫server的目錄，用于放置Node的東西。進(jìn)入server目錄，再新建三個js文件：
index.js （入口文件） db.js （設(shè)置數(shù)據(jù)庫相關(guān)） api.js （編寫接口）index.js
// 引入編寫好的apiconst api = require('./api'); // 引入文件模塊const fs = require('fs');// 引入處理路徑的模塊const path = require('path');// 引入處理post數(shù)據(jù)的模塊const bodyParser = require('body-parser')// 引入Expressconst express = require('express');const app = express();app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended: false}));app.use(api);// 訪問靜態(tài)資源文件 這里是訪問所有dist目錄下的靜態(tài)資源文件app.use(express.static(path.resolve(__dirname, '../dist')))// 因為是單頁應(yīng)用 所有請求都走/dist/index.htmlapp.get('*', function(req, res) { const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8') res.send(html)})// 監(jiān)聽8088端口app.listen(8088);console.log('success listen…………');db.js
// Schema、Model、Entity或者Documents的關(guān)系請牢記，Schema生成Model，Model創(chuàng)造Entity，Model和Entity都可對數(shù)據(jù)庫操作造成影響，但Model比Entity更具操作性。const mongoose = require('mongoose');// 連接數(shù)據(jù)庫 如果不自己創(chuàng)建 默認(rèn)test數(shù)據(jù)庫會自動生成mongoose.connect('mongodb://127.0.0.1:27017'); // 地址跟第一步的地址對應(yīng)。// 為這次連接綁定事件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版本問題，不用嚴(yán)格模式使用ES6語法會報錯"use strict";const models = require('./db');const express = require('express');const router = express.Router();/************** 創(chuàng)建(create) 讀取(get) 更新(update) 刪除(delete) **************/// 創(chuàng)建賬號接口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 }); // 保存數(shù)據(jù)newAccount數(shù)據(jù)進(jìn)mongoDB newAccount.save((err,data) => { if (err) { res.send(err); } else { res.send('createAccount successed'); } });});// 獲取已有賬號接口router.get('/api/login/getAccount',(req,res) => { // 通過模型去查找數(shù)據(jù)庫 models.Login.find((err,data) => { if (err) { res.send(err); } else { res.send(data); } });});module.exports = router;至此我們的后端代碼就編寫好了，進(jìn)入server目錄，敲上 node index命令，node就會跑起來，這時在瀏覽器輸入http://localhost:8088/api/login/getAccount就能訪問到這個接口了
現(xiàn)在我們的本地開發(fā)環(huán)境的 web server的接口是 index.js 里的8088，但是本地的webpack生成的網(wǎng)頁端口是8080，這兩個不一致。需要進(jìn)行代理（proxy）在config/index.js 中修改
proxyTable: { '/api': { target: 'http://localhost:8088/api/', changeOrigin: true, pathRewrite: { '^/api': '' } } }這時，我們在前端接口地址前加上/api，就會指向http://localhost:8088/api/，于是我們就能訪問到后端的接口了！讓我們來點擊一下登錄按鈕，會發(fā)現(xiàn)接口請求成功了！再去數(shù)據(jù)庫看看！也插入了一條新數(shù)據(jù)！成功！
前后端開發(fā)完成，最后一步，前端打包，后端部署。 前端打包就很簡單了，一個命令： npm run build 這就生成了一個dist目錄，里面就是打包出來的東西。 現(xiàn)在回過頭來看server里面的入口文件index.js// 訪問靜態(tài)資源文件 這里是訪問所有dist目錄下的靜態(tài)資源文件
app.use(express.static(path.resolve(__dirname, ‘../dist’)))
// 因為是單頁應(yīng)用 所有請求都走/dist/index.html
app.get(‘*’, function(req, res) {
const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')res.send(html)})
// 監(jiān)聽8088端口
app.listen(8088);
這里的關(guān)鍵是express.static，利用 Express 托管靜態(tài)文件。于是我們才能訪問到前端打包出來的靜態(tài)頁面index.html。
最后，我們在瀏覽器輸入http://localhost:8088/，就會跳到index.html。
到此為止，我們就完成了整個前后端各自開發(fā)到正式部署的流程。
新聞熱點
疑難解答
