express+mockjs實現模擬後臺數據發送

前言：

　　大多數時候，前端會和後端同時進行開發，即在咱們開發完頁面的時候，極可能還不能立馬進入聯調階段，這個時候，爲了保證咱們接口的有效性和代碼的功能完整，咱們可能須要模擬數據。

模擬數據方法

1.經過js變量模擬後臺數據

　　優勢：不須要服務器

　　缺點：須要造不少變量，同時還要將變量在咱們的有效代碼中使用，最後還得刪除

2.經過ajax請求json文件

　　優勢：只須要配置路徑，就能夠訪問，進入聯調階段不用修改大量的js代碼

　　缺點：ajax存在跨域問題，一般沒法請求本地文件，即便火狐也存在不能訪問不一樣文件目錄下的json文件，一般須要經過ide或者本身手動啓動服務

3.用nodejs本身寫一個專門用來發送請求的服務，不包含業務邏輯

　　優勢：前端的代碼進入聯調階段只須要修改一個basePath，全部的接口名字均可以和約定好的路徑保持一致，能夠測試post請求，模擬網絡環境

　　缺點：本身要寫一個後臺

 

一、2兩種模擬數據的方式適合用來作demo，可是若是作得是上線項目，咱們仍是推薦使用本身搭建一個node後臺

 

1.準備node環境、npm/cnpm

2.安裝express、mockjs

3.建立服務端文件server.js，引入相關模塊

let express = require('express');    //引入express模塊
let Mock = require('mockjs');        //引入mock模塊

let app = express();                //實例化express

4.配置接口路由，設置監聽端口

/**
 * 配置test.action路由
 * @param  {[type]} req  [客戶端發過來的請求所帶數據]
 * @param  {[type]} res  [服務端的相應對象，可以使用res.send返回數據，res.json返回json數據，res.down返回下載文件]
 */
app.all('/test.action', function(req, res) {
    res.send('hello world');
});
/**
 * 監聽8090端口
 */
app.listen('8090');

　　此時咱們直接訪問http://localhost:8090/test.action，就能夠直接在界面看到'hello world'文字

5.使用mockjs返回格式化json數據

app.all('/test.action', function(req, res) {
    /**
     * mockjs中屬性名‘|’符號後面的屬性爲隨機屬性，數組對象後面的隨機屬性爲隨機數組數量，正則表達式表示隨機規則，+1表明自增
     */
    res.json(Mock.mock({
        "status": 200,
        "data|1-9": [{
            "name|5-8": /[a-zA-Z]/,
            "id|+1": 1,
            "value|0-500": 20
        }]
    }));
});

　　此時咱們再訪問頁面數據，咱們就能夠獲得一份隨機的json數據

6.建立模擬數據文件夾testData，建立模擬數據json文件（注意：json文件中不能使用正則，且對象屬性必須爲雙引號字符串）

7.遍歷模擬數據文件，生成對應路由

/*readdir讀取目錄下全部文件*/
fs.readdir('./testData', function(err, files) {
    if(err) {
        console.log(err);
    } else {
        /*成功讀取文件，取得文件名，拼接生成對應action，監聽對應接口並返回對應文件數據*/
        files.forEach(function(v, i) {
            app.all(`/${v.replace(/json/, 'action')}`, function(req, res) {
                fs.readFile(`./testData/${v}`, 'utf-8', function(err, data) {
                    if(err) {
                        console.log(err);
                    } else {
                        res.json(Mock.mock(JSON.parse(data)));
                    }
                })
            })
        })
    }
})

至此，咱們的node服務器已經搭建成功，使用node server.js運行服務器，咱們就能夠直接在前端訪問接口，可是若是隻是單純的生成後臺，前端頁面不經過後臺進行訪問的話，存在跨域問題，若是須要解決，能夠在後臺添加跨域請求

/*爲app添加中間件處理跨域請求*/
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

ps:若是mock須要使用正則，請單獨配置路由進行處理，express和mockjs更多指令，請查閱官網api

 

vscode sync key:c79a803f693ef8296f6c4c7f395c1b7a