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

最新推荐文章于 2024-09-13 23:32:49 发布
最新推荐文章于 2024-09-13 23:32:49 发布
阅读量102 收藏
点赞数
文章标签： 前端 webpack json ViewUI
原文链接：http://www.cnblogs.com/camille666/p/fe_fake_data_server_register_module.html
版权

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

和技术方案（二）的主要区别在于：接口路由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需要保持一致。

转载于:https://www.cnblogs.com/camille666/p/fe_fake_data_server_register_module.html

weixin_30553837
关注
前端003_模拟数据接口_easymock
细致-专业-实操
05-06 1130
Easy Mock 是一个可视化，并且能快速生成模拟数据的服务。是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 Mock 服务。现在 Easy Mock 内置了 Mock.js，我们可以更愉快的伪造数据了网址下载： https://github.com/easy-mock/easy-mock注意：easy-mock 的安装还是比较麻烦，需要事先安装mongodb redis。
前端模拟数据的技术方案（二）
weixin_30598225的博客
04-17 277
读取模拟服务器的静态数据，读取模拟服务器动态数据。 一、准备工作 1、参考文档 json-server官网 mockjs官网 2、安装包 # 安装json-server服务 npm install json-server --save-dev # 安装nodemon，修改配置无需重启服务 npm install nodemon --save-dev # 安装批量生成...
vue 项目读取本地json文件
real_lt的博客
11-27 5339
将本地json文件放在目标项目内。我放在了static文件夹下，如图所示： 在vue文件内读取该文件内容 let geoData = require('../../../../../static/json/datas.json'); console.log(geoData) 结果如图所示： ...
前端模拟数据的技术方案（一）
weixin_30907935的博客
04-15 475
本篇主要介绍读取变量，读取props，读取模拟的异步数据，读取本地文件。 一、模拟同步数据 1、写在函数的变量里面或者写在全局变量 let listData = [{id: '001', name: 'banana'},{id: '002', name: 'orange'},{id: '003', name: 'apple'}]; 2、写在defaultProps里面，或者th...
几种前端模拟数据使用方案
qq_38217940的博客
03-13 4375
前端模拟数据的使用及设计思路，涉及mockjs、nodejs、express的简单使用、linux下node安装，干货满满
web前端技术方案web前端技术方案
05-07
三、前端方案实施细则 1. 前后端分离：前端拥有完整独立的开发、测试、部署的流程，与后端完全分离。 2. 模块化：封装可重用 UI 组件、业务逻辑，提升代码库的可重用性、可测试性。 3. 组件化：封装可重用用户界面...
嵌入式系统/ARM技术中的TI超低功耗模拟前端ECG/EEG解决方案
10-23
嵌入式系统/ARM技术中的TI超低功耗模拟前端ECG/EEG解决方案是针对医疗电子设备领域，特别是便携式心电图（ECG）监测设备的一种创新设计。在2010年的CMET医疗电子技术大会上，德州仪器（TI）的工程师陈红生提出了一种...
WEB前端开发数据模拟工具JOJO
08-07
标题中的“WEB前端开发数据模拟工具JOJO”指的是一个专门用于Web前端开发的数据模拟工具，它的主要作用是在实际API接口未准备好或者不便于使用时，为开发者提供模拟数据，以便于进行界面设计和功能测试。这类工具...
3V八路模拟前端解决方案
01-20
导读：Microchip公司的MCP3914是3V八路模拟前端（AFE），它包括8个同步取样的Delta-Sigma模数转换器（ADC）、8个PGA、相位延迟补偿区块、低漂移基准电压、数字失调和增益误差校准寄存器以及高速20MHz SPI兼容的串口...
-webkit-box-reflect属性与倒影效果的实现
最新发布
读心悦
09-13 280
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
qq_39969848的博客
09-09 1003
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 1260
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
（微服务项目）新闻头条——Day1
weixin_73253843的博客
09-13 696
（微服务项目）新闻头条——Day1
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
翎风世界
09-10 641
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
react 基础语法
小白小白从不日别的博客
09-13 1341
React 官方中文文档目前前端最流行的是三大框架：Vue、React、Angularreact是一个用于构建用户界面的 JavaScript 库react官网(Reactreact中文网(React 官方中文文档React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库Vue 是一个渐进式的 JavaScript 框架如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能。
【前端】vue+html+js 实现table表格展示，以及分页按钮添加
weixin_43872912的博客
09-09 498
数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。
在子组件中使用props用于在父组件中给子组件变量设置值
ithongchou的博客
09-13 65
/传给父组件传值到此组件。
项目中遇到的问题
qiao
09-12 367
文件列表中有文件上传功能，点击上传按钮，弹出模态框，在模态框的形式选择文件，进行上传。
前端axios Post数据到后端解决方案
1. **前端模拟表单传递数据**： 前端可以通过修改axios的配置，将数据格式化为`FormData`，模拟表单提交。这样，后端可以像处理表单数据一样处理这些键值对。具体实现可参考以下两篇博客： - [axios配置后，post...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值