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 讓模擬的後端功能更加豐富，更加真實