前端模拟数据的技术方案（三）

读取模拟服务器的静态数据，读取模拟服务器动态数据。

和技术方案（二）的主要区别在于：接口路由key和数据key都用字符串，不用变量，减少赋值，和对变量集合的处理，好处是路由规则更多元化，需要什么，手动添加；写了一个公用的注册模块的方法，用于搜集数据和路由，需要什么模块，只需要修改modules.js一个文件。

一、准备工作

1、参考文档

json-server官网

mockjs官网

2、安装包

# 安装json-server服务
npm install json-server --save-dev  

# 安装nodemon，修改配置无需重启服务
npm install nodemon --save-dev  

# 安装批量生成数据
npm install mockjs --save-dev  

3、mock目录结构

├── dynamic

│   │   ├── config.js

│   │   ├── modules.js 注册模块

│   │   ├── registerModule.js 库文件

│   │   └── server.js 服务器

└── static

│       ├── config.js

│       ├── modules.js

│       ├── registerModule.js

│       └── server.js

4、给package.json添加配置

"scripts": {
   "server": "cd mock/static && nodemon server.js",
   "dserver": "cd mock/dynamic && nodemon server.js"
}

5、webpack配置（代理，接口路由匹配）

// 本地开发 Server 配置
const DEV_SERVER_CONFIG = {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
    host: '127.0.0.1',
    open: true,
    overlay: true,
    proxy: {
        '/api/*': { // 静态
            target: 'http://127.0.0.1:3005',
            secure: true,
            changeOrigin: true
        },
        /*'/api/*': { // 动态
            target: 'http://127.0.0.1:3003',
            secure: true,
            changeOrigin: true
        }*/
    }
};

二、模拟从服务器读取数据-静态数据

1、文件调用依赖结构图

2、mock配置文件

// config.js

module.exports = {
    SERVER: '127.0.0.1',
    //定义端口号
    PORT: 3005
};

// registerModule.js

let datas = [];
let routes = [];
var dataObj = {};
var routeObj = {};


function registerModule(mods = []) {
    for (let item of mods) {
  datas.push(item.datas);
  routes.push(item.routes);
    }
    dataObj = Object.assign(...datas);
    routeObj = Object.assign(...routes);
    console.log({ dataObj, routeObj });
    return { dataObj, routeObj };
};











module.exports = function(mods) {
    return registerModule(mods);
};

// modules.js

let registerModule = require('./registerModule.js');
// 添加模块
let demoA = require('../../demos/staticDataA/fakeData/index.js');
let demoB = require('../../demos/staticDataB/fakeData/index.js');
let demoC = require('../../demos/diffRequest/fakeData/index.js');


module.exports = registerModule([demoA, demoB, demoC]);

// server.js

const config = require('./config.js');
const jsonServer = require('json-server');
let registerModule = require('./modules.js');
const rules = registerModule.routeObj;
const dbfile = registerModule.dataObj;
const ip = config.SERVER;
const port = config.PORT;


const server = jsonServer.create();
const router = jsonServer.router(dbfile);
const rewriter = jsonServer.rewriter(rules);
const middlewares = jsonServer.defaults();











server.use(jsonServer.bodyParser);
server.use(middlewares);











// 添加响应头
server.use((req, res, next) => {
    res.header('X-Server', 'jsonServer-mockjs');











    if (req.method === 'POST') {
        // req.method = 'GET';
    }
    next();
});











server.use(rewriter);
server.use(router);











server.listen({
    host: ip,
    port: port
}, function() {
    console.log(`JSON Server is running in http://${ip}:${port}`);
});

3、页面模块

// 目录树

│   ├── staticDataA

│   │   ├── fakeData

│   │   │   ├── data

│   │   │   │   ├── deleteItem.js

│   │   │   │   └── getList.js

│   │   │   ├── datas.js

│   │   │   ├── index.js

│   │   │   └── routes.js

│   │   └── staticDataA.jsx

│   └── staticDataB

│   ├── fakeData

│   │   ├── data

│   │   │   ├── getBookList.js

│   │   │   └── updateItem.js

│   │   ├── datas.js

│   │   ├── index.js

│   │   └── routes.js

│   └── staticDataB.jsx

// getList.js

module.exports = {

'success': true,

'data': [{

'id': '001',

'name': 'banana'

},

{

'id': '002',

'name': 'orange'

},

{

'id': '003',

'name': 'apple'

}

]

};

// index.js

let datas = require('./datas');

let routes = require('./routes');

module.exports = {

datas,

routes

};

// datas.js

module.exports = {

'getList': require('./data/getList.js'),

'deleteItem': require('./data/deleteItem.js')

};

module.exports = {
    '/api/list*': '/getList',
    '/api/delete*': '/deleteItem',
    '/api/list\?id=:id': '/getList/:id',
    '/api/list/:id': '/getList?id=:id'
};

4、启动页面和服务(记得切换webpack的代理配置)

# 启动服务
npm run server
npm run dev
打开浏览器，在地址栏中输入http://localhost:3005/

三、模拟从服务器读取数据-动态数据 

1、mock配置文件

// config.js
module.exports = {
  SERVER:"127.0.0.1",  
  //定义端口号
  PORT: 3003
};

// registerModule.js

let datas = [];
let routes = [];
var dataObj = {};
var routeObj = {};


function registerModule(mods = []) {
for (let item of mods) {
  datas.push(item.datas);
  routes.push(item.routes);
}
dataObj = Object.assign(...datas);
routeObj = Object.assign(...routes);
console.log({ dataObj, routeObj });
return { dataObj, routeObj };
};











module.exports = function(mods) {
return registerModule(mods);
};

// modules.js

let registerModule = require('./registerModule.js');
// 添加模块
let demoA = require('../../demos/dynamicDataA/fakeData/index.js');
let demoB = require('../../demos/dynamicDataB/fakeData/index.js');


module.exports = registerModule([demoA, demoB]);

// server.js

const config = require('./config.js');
const jsonServer = require('json-server');
let registerModule = require('./modules.js');
const rules = registerModule.routeObj;
const dbfile = registerModule.dataObj;
const ip = config.SERVER;
const port = config.PORT;


const server = jsonServer.create();
const router = jsonServer.router(dbfile);
const rewriter = jsonServer.rewriter(rules);
const middlewares = jsonServer.defaults();











server.use(jsonServer.bodyParser);
server.use(middlewares);











// 添加响应头
server.use((req, res, next) => {
res.header('X-Server', 'jsonServer-mockjs');











if (req.method === 'POST') {
// req.method = 'GET';
}
next();
});











server.use(rewriter);
server.use(router);











server.listen({
host: ip,
port: port
}, function() {
    console.log(`JSON Server is running in http://${ip}:${port}`);
});

2、页面模块

// 目录树

│   ├── dynamicDataA

│   │   ├── dynamicDataA.jsx

│   │   └── fakeData

│   │   ├── data

│   │   │   └── getNewsA.js

│   │   ├── datas.js

│   │   ├── index.js

│   │   └── routes.js

│   ├── dynamicDataB

│   │   ├── dynamicDataB.jsx

│   │   ├── fakeData

│   │   │   ├── data

│   │   │   │   └── getNewsB.js

│   │   │   ├── datas.js

│   │   │   ├── index.js

│   │   │   └── routes.js

// getNewsA.js

let Mock = require('mockjs');
let Random = Mock.Random;

module.exports = function() {
    var data = {
        news: []
    };

    for (var i = 0; i < 10; i++) {
        var content = Random.cparagraph(0, 10);
        data.news.push({
            id: i,
            title: Random.cword(8, 20),
            desc: content.substr(0, 40)
        });
    }
    return {
        'success': true,
        'data': data
    };
}();

// index.js

let datas = require('./datas');

let routes = require('./routes');

module.exports = {

datas,

routes

};

// routes.js

module.exports = {

'/api/getNewsA*': '/getNewsA',

'/api/getNewsA\?id=:id': '/getNewsA/:id',

'/api/getNewsA/:id': '/getNewsA?id=:id'

};

// datas.js
module.exports = {
    'getNewsA': require('./data/getNewsA.js')
};

3、启动服务和页面

# 启动服务

npm run dserver

npm run dev

打开浏览器，在地址栏中输入http://localhost:3003/

四、规范制度

本着少踩坑的原则，下面约束一些fakeData中的开发规范。

1、mock多模块，文件命名应该不一致。

比如A模块是staticDataA/fakeData/data/getList.js，B模块是staticDataB/fakeData/data/getBookList.js。

2、不同模块，key命名要不同。

比如A模块是demos/staticDataA/fakeData/index.js，key有getList和deleteItem。

比如B模块是demos/staticDataB/fakeData/index.js，key有getBookList和updateItem。

3、同一模块，key命名要一致。

比如A模块的staticDataA/fakeData/datas.js文件的key为getList，staticDataA/fakeData/routes.js文件的value值为getList，也就是说数据key和路由value需要保持一致。