想搭建一個Vue+Node+MongoDB的項目，能跑通整個開發到部署的流程，折騰一個多星期終於可以了~看過不少教學文章，發現教你怎樣搭建一個Vue開發環境的很多，搭建Express的很多，但還真沒發現一個完整從開發到正式部署的教程，所以只好自己來填這個坑。Node是現學現賣，文中有誤請大力指正。其中各種我參考過有用的資源會穿插在文中。
一：整理從開發到部署的思路
首先我們要整理好整個工作流程：
1. 前後端分離，各自開發。這裏前後端分離是這樣的：前端用Vue開發靜態頁面，路由通過Vue-Router進行，後端用Node僅用於編寫API給前端調用獲取數據。
2.
前端開發時通過Vue-Cli中提供的proxyTable進行代理，由此可跨域調用Node編寫的API。
3. 前後端各自開發完成，測試無誤後，前端通過webpack打包壓縮，後端拉取前端打包壓縮好的文件即部署完成。
二：以登錄功能爲例跑一遍這個過程
這裏會以一個不完善的登錄功能來演示這個過程。
功能很簡單，填寫完賬號密碼點擊登錄按鈕，就把賬號密碼插入數據庫，並且查出現在已經有哪些數據。
用到的東西：
- Vue-Cli
- Vue-Resource
- Node + Express
- MongoDB
下面正式開始：”
-
安裝Vue-Cli
npm i -g vue-cli -
去到你想要放置項目的目錄，進行初始化
vue init webpack XXX（你想要項目的名字） -
按提示一直下一步，完成後按提示
cd XXX
npm install （這裏建議使用淘寶鏡像cnpm，不然牆外的東西……）
npm run dev
如無意外你就會看到下圖，證明成功了、
-
這時我們就可以去開發我們的登錄頁面了。開發過程就不說了，樣式怎樣也無關緊要，這裏只需要兩個input框用於填寫賬號跟密碼，還有一個登錄按鈕負責請求後端接口而已。記得安裝一下Vue-Resource。核心代碼：
、<template>
<input class="form-control" id="inputEmail3" placeholder="請輸入賬號" v-model="account">
<input type="password" class="form-control" id="inputPassword3" placeholder="請輸入密碼" v-model="password">
<button type="submit" class="btn btn-default" @click="login">登錄</button>
</template>
<script>
export default {
data() {
return {
account : '',
password : ''
}
},
methods:{
login() {
// 獲取已有賬號密碼
this.$http.get('/api/login/getAccount')
.then((response) => {
// 響應成功回調
console.log(response)
let params = {
account : this.account,
password : this.password
};
// 創建一個賬號密碼
return this.$http.post('/api/login/createAccount',params);
})
.then((response) => {
console.log(response)
})
.catch((reject) => {
console.log(reject)
});
}
}
}
</script>這時回到瀏覽器，如無意外應該會出現兩個輸入框和一個登錄按鈕，當然現在去點擊登錄按鈕請求接口，是不行的。所以我們現在需要去搭建Node。
- 搭建Node
這裏默認大家已經安裝好Node，不然上面那些都沒辦法安裝的……
在項目的根目錄新建一個叫server的目錄，用於放置Node的東西。進入server目錄，再新建三個js文件：
- index.js （入口文件）
- db.js （設置數據庫相關）
- api.js （編寫接口）
現在整體目錄結構是這樣的：
好，現在我們來搞Node。這裏使用的Node框架是Express。安裝Express：
npm install express –save
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：
這個js文件主要用於配置mongodb相關東西，mongoDB的相關概念大家自行搜索學習。我們這裏使用mongoose 中間件來連接mongoDB。mongoDB的安裝大家百度即可。有一點需要注意的是，mongoDB安裝完之後，我們需要自己手動去新建一個文件夾用於放置mongoDB的數據。我的mongoDB安裝在E盤，所以也在E盤根目錄創建一個叫mongo-data的文件夾（名字隨便取），進入該文件夾，再新建一個名叫db的文件夾。當我們去啓動mongoDB服務時，我們需要指定該路徑。如何開啓mongoDB服務？進入mongoDB所在目錄，再進入它的bin目錄，敲這條命令：
mongod.exe –dbpath e:\mongo-data\db
如無意外mongoDB就會順利啓動。而關於怎樣使用mongoose 中間件去操作mongoDB，建議大家移步到mongoose 的官網，照着quick start敲一遍就可以了。
// Schema、Model、Entity或者Documents的關係請牢記，Schema生成Model，Model創造Entity，Model和Entity都可對數據庫操作造成影響，但Model比Entity更具操作性。
const mongoose = require('mongoose');
// 連接數據庫 如果不自己創建 默認test數據庫會自動生成
mongoose.connect('mongodb://localhost/test');
// 爲這次連接綁定事件
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;至此我們的後端代碼就編寫好了，進入server目錄，敲上 node index命令，node就會跑起來，這時在瀏覽器輸入http://localhost:8088/api/login/getAccount就能訪問到這個接口了
5. 回到前端，嘗試請求接口
現在我們點擊登錄按鈕去請求接口，當然還是不行的，因爲使用npm run dev 進行開發時，其實webpack會啓動一個8080的web服務用於我們進行開發，而我們後端是在8088端口的，所以我們肯定請求不到後端的接口。怎麼辦？跨域問題相信前端都很熟悉，難道我們又要去搞一遍解決這些問題？我們只是想開發的時候能調到後端的接口而已……
貼心的腳手架其實已經爲我們解決了這個問題。進入
我們會發現有有一個proxyTable，這就是用來開啓一個代理服務從而解決我們這個問題的：Vue-Cli官方描述。
於是，我們寫成這樣：
proxyTable: {
'/api': {
target: 'http://localhost:8088/api/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}這時，我們在前端接口地址前加上/api，就會指向http://localhost:8088/api/，於是我們就能訪問到後端的接口了！讓我們來點擊一下登錄按鈕，會發現接口請求成功了！再去數據庫看看！也插入了一條新數據！成功！
6. 前後端開發完成，最後一步，前端打包，後端部署。
前端打包就很簡單了，一個命令：
npm run build 這就生成了一個dist目錄，裏面就是打包出來的東西。
現在回過頭來看server裏面的入口文件index.js
// 訪問靜態資源文件 這裏是訪問所有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);這裏的關鍵是express.static，利用 Express 託管靜態文件。於是我們才能訪問到前端打包出來的靜態頁面index.html。
最後，我們在瀏覽器輸入http://localhost:8088/，就會跳到index.html。