讀取模擬服務器的靜態(tài)數(shù)據(jù)，讀取模擬服務器動態(tài)數(shù)據(jù)。

一、準備工作

1、參考文檔

json-server官網(wǎng)

mockjs官網(wǎng)

2、安裝包

# 安裝json-server服務 npm install json-server --save-dev
# 安裝nodemon，修改配置無需重啟服務 npm install nodemon --save-dev
# 安裝批量生成數(shù)據(jù) npm install mockjs --save-dev

3、mock目錄結(jié)構(gòu)

|--dynamic //動態(tài)數(shù)據(jù)方式|--config.js //配置文件|--db.js //動態(tài)數(shù)據(jù)文件|--routes.js //路由規(guī)則|--server.js //服務文件 |--static //靜態(tài)數(shù)據(jù)方式|--config.js //配置文件|--db.js //靜態(tài)數(shù)據(jù)文件|--routes.js //路由規(guī)則|--server.js //服務文件

4、給package.json添加配置

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

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

// 本地開發(fā) Server 配置 const DEV_SERVER_CONFIG = {historyApiFallback: true,hot: true,inline: true,progress: true,host: '127.0.0.1',open: true,overlay: true,proxy: {'/api/*': { // 靜態(tài)target: 'http://127.0.0.1:3005',secure: true,changeOrigin: true},/*'/api/*': { // 動態(tài)target: 'http://127.0.0.1:3003',secure: true,changeOrigin: true}*/} };

二、模擬從服務器讀取數(shù)據(jù)-靜態(tài)數(shù)據(jù)

1、文件調(diào)用依賴結(jié)構(gòu)圖

2、mock配置文件

// config.js module.exports = {SERVER: '127.0.0.1',//定義端口號PORT: 3005 }; // db.js/*** 數(shù)據(jù)模塊* 目標是把不同頁面的變量和數(shù)據(jù)之間的映射集合到一個對象。* 某頁面{ getList: { message: null, data: [Array], success: true, all: 3 },deleteItem: { message: null, data: null, success: true, all: 0 }}* 大集合{ getList: { message: null, data: [Array], success: true, all: 3 },deleteItem: { message: null, data: null, success: true, all: 0 }}*/// 引入需要mock數(shù)據(jù)的頁面接口配置 let demoA = require('../../demos/staticDataA/fakeData/index.js'); let demoB = require('../../demos/staticDataB/fakeData/index.js');const dataMaps = [demoA, demoB];const mergeObject = (dMaps = []) => {return Object.assign(...dMaps); };const dataObj = mergeObject(dataMaps);module.exports = dataObj; // routes.js/*** 路由模塊* 目標是把變量和接口地址之間的映射轉(zhuǎn)換成路由映射表* 變量和接口地址間的映射{api: {getList: 'api/list',deleteItem: 'api/delete'}};* 路由映射表{ '/api/list*': '/getList','/api/delete*': '/deleteItem'}*/// 引入需要mock數(shù)據(jù)的頁面接口配置 let demoA = require('../../demos/staticDataA/interfaceUrl.js'); let demoB = require('../../demos/staticDataB/interfaceUrl.js');const interfaceMaps = [demoA, demoB];const swapKeyValue = (iMaps = []) => {return iMaps.reduce((previousValue, currentValue) => {// 解構(gòu)出api里面的配置let { api } = currentValue;for (let key in api) {// key和value對調(diào)previousValue[`/${api[key]}*`] = `/${key}`;}return previousValue;}, {}); };const routeMap = swapKeyValue(interfaceMaps);module.exports = routeMap; // server.js const config = require('./config.js'); const jsonServer = require('json-server'); const rules = require('./routes.js'); const dbfile = require('./db.js');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');next(); });server.use(rewriter); server.use(router);server.listen({host: ip,port: port }, function() {console.log(JSON.stringify(jsonServer));console.log(`JSON Server is running in http://${ip}:${port}`); });

3、頁面模塊

// 目錄樹 │?? ├── staticDataA │?? │?? ├── fakeData │?? │?? │?? ├── deleteItem.js │?? │?? │?? ├── getList.js │?? │?? │?? └── index.js │?? │?? ├── interfaceUrl.js │?? │?? └── staticDataA.jsx │?? └── staticDataB │?? ├── fakeData │?? │?? ├── getBookList.js │?? │?? ├── index.js │?? │?? └── updateItem.js │?? ├── interfaceUrl.js │?? └── staticDataB.jsx // getList.js module.exports = function() {return {'success': true,'data': [{'id': '001','name': 'banana'},{'id': '002','name': 'orange'},{'id': '003','name': 'apple'}]}; }; // index.js let getList = require('./getList.js'); let deleteItem = require('./deleteItem.js');module.exports = {getList: getList(),deleteItem: deleteItem() }; // interfaceUrl.js// 既用于本地模擬接口，也用于讀取真正的后端接口。 module.exports = {api: {getList: 'api/list',deleteItem: 'api/delete'} };

4、啟動頁面和服務(記得切換webpack的代理配置)

# 啟動服務 npm run server npm run dev 打開瀏覽器，在地址欄中輸入http://localhost:3005/

三、模擬從服務器讀取數(shù)據(jù)-動態(tài)數(shù)據(jù)?

1、mock配置文件

// config.js module.exports = {SERVER:"127.0.0.1", //定義端口號PORT: 3003 }; // db.js
/*** 數(shù)據(jù)模塊* 目標是把不同頁面的變量和數(shù)據(jù)之間的映射集合到一個對象。* 某頁面{ getList: { message: null, data: [Array], success: true, all: 3 },deleteItem: { message: null, data: null, success: true, all: 0 }}* 大集合{ getList: { message: null, data: [Array], success: true, all: 3 },deleteItem: { message: null, data: null, success: true, all: 0 }}*/// 引入需要mock數(shù)據(jù)的頁面接口配置 let demoA = require('../../demos/dynamicDataA/fakeData/index.js'); let demoB = require('../../demos/dynamicDataB/fakeData/index.js');const dataMaps = [demoA, demoB];const mergeObject = (dMaps = []) => {return Object.assign(...dMaps); };const dataObj = mergeObject(dataMaps);module.exports = dataObj; // routes.js /*** 路由模塊* 目標是把變量和接口地址之間的映射轉(zhuǎn)換成路由映射表* 變量和接口地址間的映射{api: {getList: 'api/list',deleteItem: 'api/delete'}};* 路由映射表{ '/api/list*': '/getList','/api/delete*': '/deleteItem'}*/// 引入需要mock數(shù)據(jù)的頁面接口配置 let demoA = require('../../demos/dynamicDataA/interfaceUrl.js'); let demoB = require('../../demos/dynamicDataB/interfaceUrl.js');const interfaceMaps = [demoA, demoB];const swapKeyValue = (iMaps = []) => {return iMaps.reduce((previousValue, currentValue) => {// 解構(gòu)出api里面的配置let { api } = currentValue;for (let key in api) {// key和value對調(diào)previousValue[`/${api[key]}*`] = `/${key}`;}return previousValue;}, {}); };const routeMap = swapKeyValue(interfaceMaps);module.exports = routeMap; // server.js const config = require('./config.js'); const jsonServer = require('json-server'); const rules = require('./routes.js'); const dbfile = require('./db.js');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');next(); });server.use(rewriter); server.use(router);server.listen({host: ip,port: port }, function() {console.log(JSON.stringify(jsonServer));console.log(`JSON Server is running in http://${ip}:${port}`); });

2、頁面模塊

// 目錄樹 ├── demos │?? ├── dynamicDataA │?? │?? ├── dynamicDataA.jsx │?? │?? ├── fakeData │?? │?? │?? ├── getNewsA.js │?? │?? │?? └── index.js │?? │?? └── interfaceUrl.js │?? ├── dynamicDataB │?? │?? ├── dynamicDataB.jsx │?? │?? ├── fakeData │?? │?? │?? ├── getNewsB.js │?? │?? │?? └── index.js │?? │?? └── interfaceUrl.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 getNewsA = require('./getNewsA.js');module.exports = {getNewsA: getNewsA() }; // interfaceUrl.js// 既用于本地模擬接口，也用于讀取真正的后端接口。 module.exports = {api: {getNewsA: 'api/newsListA'} };

3、啟動服務和頁面

# 啟動服務 npm run dserver
npm run dev 打開瀏覽器，在地址欄中輸入http://localhost:3003/

四、規(guī)范制度

本著少踩坑的原則，下面約束一些fakeData中的開發(fā)規(guī)范。

1、mock多模塊，文件命名應該不一致。

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

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

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

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

3、文件名和變量名保持一致

比如?let getList = require('./getList.js');

4、同一模塊，key命名要一致。

比如A模塊的staticDataA/fakeData/index.js文件的key為getList，staticDataA/interfaceUrl.js文件的key為getList，也就是說數(shù)據(jù)映射變量和路由映射變量需要保持一致。

轉(zhuǎn)載于:https://www.cnblogs.com/camille666/p/fe_fake_data_server.html

總結(jié)

以上是生活随笔為你收集整理的前端模拟数据的技术方案（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。