VueJS搭建簡單後臺管理系統框架 (二) 模擬Ajax數據請求

開發過程當中，免不了須要前臺與後臺的交互，大部分的交互都是經過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數據以下：