realmock 前後端分離方案

realmock 前後端分離方案

express + randomjson 模擬後端服務，前端伺服器(比如webpack, nigix等)將請求代理到該伺服器地址即可

github地址：https://github.com/zhoushengmufc/realmock

realmock優勢

1，利用了express強大的伺服器功能，輕鬆模擬按條件返回json,延時返回json,返回不同http狀態等web開發中的常見情況

2，配合nodemon的監測文件變化並自啟動功能，文件變更時無需手動重啟伺服器

3，結合randomjson的隨機json生成功能，比如生成指定大小的圖片，生成超大json等，mock數據更輕鬆

randomjson地址：https://github.com/finance-sh/randomjson

使用 下載項目到本地，進入文件夾

預設將json存放在在mock文件夾中

配置 index.js

// 埠號
app.listen(3001);
console.log('server start');

// api config

// 常規mock get
var detailJson = require('./mock/detail.json');
app.get('/api/detail', function (req, res) {
    res.send(detailJson);
});

// 數據返回延遲
var addJson = require('./mock/add.json');
app.get('/api/add', function (req, res) {
    setTimeout(function () {
        res.send(addJson);
    }, 3000);
});

// 根據條件返回不同json get方法
var json1 = require('./mock/json1.json');
var json2 = require('./mock/json2.json');
app.get('/api/get', function (req, res) {
    if (req.query.type === '1') {
        res.send(json1);
    }
    else {
        res.send(json2);
    }
});
// 根據條件返回不同json post方法
app.post('/api/get', function (req, res) {
    if (req.body.type === '1') {
        res.send(json1);
    }
    else {
        res.send(json2);
    }
});

// 使用randomjson返回隨機json 隨機mock
var listJson = require('./mock/list.json');
app.get('/api/list', function (req, res) {
    var resJson = randomjson(listJson);
    res.send(resJson);
});

開啟服務

在項目根目錄中，打開命令行工具，運行以下命令：

npm install

npm start

訪問url

可以訪問預設示例：

http://localhost:3001/api/get?type=1

http://localhost:3001/api/get

總結 解決了哪些問題

1，常見本地模擬都是即刻返回，不能指定返回時間，realmock可以加一個延遲時間，調試載入中效果

2，常見本地模擬都是一個介面返回一個數據，realmock可以根據條件返回不同的json，更真實

3，指定http狀態碼，模擬各種網路情況和伺服器情況

4，利用randomjson，可以返回指定大小的圖片，可以返回隨機數據，可以返回指定帶小的數組，可以返回唯一的數據，比起傳統手寫json,提升開發速度

realmock整合了express nodemon randomjson 讓模擬的後端功能更加豐富，更加真實