開發過程中，免不了需要前台與后台的交互，大部分的交互都是通過Ajax請求來完成，在服務端未完成開發時，前端需要有一個可以模擬Ajax請求的服務器。
在NodeJs環境下，通過配置express可訪問的靜態資源，實現模擬數據請求
由於對NodeJS還不是很熟悉，所以，文中可能有不少錯誤的地方，請諒解，歡迎批評和指正
服務開發運行環境文件配置
目錄結構說明
整個vue.js項目的一般目錄結構如下：
- build 編譯打包和開發模式下運行的主要文件
- config 編譯打包和開發模式下相關的配置文件
- node_modules 項目依賴的模塊如：vue.js、vue-router、vuex、bootstrap等，可以在package.json中配置依賴的模塊
- src 項目主要代碼源文件放在
- static 靜態資源文件
- cms 存放模擬Ajax請求所返回的json數據，cms為請求的項目名
修改配置文件
一般情況下，網站部署很多時候都會部署在某個項目下，例如，我們的系統為管理系統，則部署在 /cms中，本地訪問后台相關的接口，基本都是以下訪問127.0.0.1:8080/cms開頭的路徑
通過在NodeJs中，添加可訪問的靜態資源的文件夾 cms,存放相應請求接口返回json數據，模擬請求后台數據
修改build下的dev-server.js文件，添加以下代碼：
//添加可訪問的靜態資源路徑（./cms）
app.use(staticPath, express.static('./cms'))
/**
* 攔截 帶有.do后綴的請求，讀取對應名稱的.json文件，返回給前端
* 例如：前端登錄時，Ajax請求為 127.0.0.1:8080/cms/mgr/auth/mgrAdminLogin.do,
* 則讀取 cms/mgr/auth 目錄下的mgrAdminLogin.json，並將數據返回給前端,mgrAdminLogin.json為前端希望得到的數據（具體格式與后台開發人員協商）
*/
app.post('*.do',dummyData );
function dummyData(paramRequest, paramResponse){
var path = './' + paramRequest.url.slice(0, -2) + 'json';
fs.readFile(
path,
function (err, contents) {
if (!err) {
contents = contents.toString('utf8');
paramResponse.writeHead(200, { "Content-Type": "application/json" });
paramResponse.end(contents);
} else {
paramResponse.writeHead(404, {"Content-Type": "text/plain"});
paramResponse.end("404 Not found");
}
}
);
}
其中
app.use(staticPath, express.static('./cms'))的./cms為請求的根目錄，設置為與后台請求的路徑一致，這樣在正式發布時就不需要再改代碼
在main.js中配置請求根目錄
使用vue-resource進行Ajax數據請求，配置請求的根目錄為cms
以登錄為例，登錄的請求代碼如下：
this.$http.post('mgr/auth/mgrAdminLogin.do', params).then(response => {
this.tip = ''
let result = response.data
if (result.resultCode === '10000' || result.resultCode === 10000) {
let data = result.data || {}
let userInfo = {
account: data.account || '',
id: data.id || -1
}
this.$route.router.go({path: '/MainPanel'})
} else {
this.tip = result.resultMsg
}
}, response => {
this.tip = '登錄失敗！錯誤碼：' + response.status
})
模擬請求響應的json數據如下：
