前後端分離開發的前端開發工具Mockjs

作用：

前後端分離開發過程中，由於同時進行的原因，後臺相應介面還沒出來，我們只能先模擬介面的資料格式，進行前端開發工作。Mockjs可以攔截本地發起的ajax請求並隨機生成相應的模擬資料返回給前端，暫時充當後臺介面用的，後期後臺接口出來之後再去掉就可以了。
Mockjs可根據需求隨機生成相應的文字、數字、布林值、日期、郵箱、連結、圖片、顏色等資料。
官網地址：http://mockjs.com/

方法函式：

• Mock.mock(): 根據資料模板生成模擬資料。
• Mock.setup(): 引數配置，僅支援timeout的設定，配置攔截 Ajax 請求時的行為。
• Mock.Random(): 工具類，用於生成各種隨機資料。
• Mock.valid(): 資料校驗
• Mock.toJSONSchema(): 把 Mock.js 風格的資料模板 template 轉換成 JSON Schema。

使用：

• Mock.mock()：

Mock.mock({
        resultCode: 200,
        resultJson: {
            'id|10000-20000': 10000,//id: 10000-20000之間的隨機一個數字
            'name': '@cname',//name: 隨機生成一箇中文名
            'star|0-5'
 
: '☆',//star: 指定的字串重複0-5次生成
            'image': '',//image: 
            'locked|1': false,//locked: 隨機生成 true 或 false
            'address|1': ['北京市','貴州省','浙江省'],// role: 北京、貴州、杭州 隨機三選一
            'phone': /^(13|14|15|18)[0-9]\d{8}$/,//phone: 符合正則的隨機字串
            'order|10': [//order: 重複10次指定內容組成一個數組
                {
                  'id|+1'
 
: 10000,//id從10000開始，每次+1
                  'orderName': '@title',//orderName: 隨機生成一箇中文標題
                  'orderTime': '@datetime',//orderTime: 隨機生成一個 yyyy-MM-dd HH:mm:ss 格式的時間
                }
              ],
            'loginTime':function(){//loginTime: 函式的生成的特定返回值
                return new Date().getTime();
            }
        }
    });

• mock.setup()：

Mock.setup({
    timeout: '200-600'//響應時間介於 200 和 600 毫秒之間
})

• Mock.Random()：

var Random = Mock.Random
Random.email()
// => "[email protected]"

nodejs+mockjs例項

server.js：

// 匯入路由
const http = require('http');
const express = require('express');
const server = express();
const data = require('./express/api/data/data');
server.use('/user', data);
//啟動服務
http.createServer(server).listen(3000);
console.log(`Express server start, http://localhost:3000`);

data.js：

const request = require('request');
const express = require('express');
const router = express.Router();
const Mock = require('mockjs');

router.get('/data', (req, res, next) => {
    let data = Mock.mock({
        resultCode: 200,
        resultJson: {
            'id|10000-20000': 10000,//id: 10000-20000之間的隨機一個數字
            'name': '@cname',//name: 隨機生成一箇中文名
            'star|0-5': '☆',//star: 指定的字串重複0-5次生成
            'image': '',//image: 
            'locked|1-2': false,//locked: 隨機生成 true 或 false
            'address|1': ['北京市','貴州省','浙江省'],// role: 北京、貴州、杭州 隨機三選一
            'phone': /^(13|14|15|18)[0-9]\d{8}$/,//phone: 符合正則的隨機字串
            'order|10': [//order: 重複10次指定內容組成一個數組
                {
                  'id|+1': 10000,//id從10000開始，每次+1
                  'orderName': '@ctitle',//orderName: 隨機生成一箇中文標題
                  'orderTime': '@datetime',//orderTime: 隨機生成一個 yyyy-MM-dd HH:mm:ss 格式的時間
                }
              ],
            'loginTime':function(){//loginTime: 函式的生成的特定返回值
                return new Date().getTime();
            }
        },
        resultMessage: '查詢成功'
    });
    res.json(data)
});

module.exports = router;

npm run server 啟動nodejs服務，在瀏覽器訪問介面檢視一下資料：