几种前端模拟数据使用方案

您所在的位置：网站首页 › excel模拟数据怎么弄 › 几种前端模拟数据使用方案

几种前端模拟数据使用方案

2024-07-11 01:28| 来源: 网络整理| 查看: 265

几种前端模拟数据解决方案模拟数据的作用与必要性几种模拟数据使用方案直接写在业务代码中使用promise封装接口调用自定义返回本地启动后端服务使用mockjs使用nodejs模拟一个服务器安装nodejs（Linux上node离线包安装）安装 express、nodemon使用express开发mock服务使用YApi、ApiPost、postman等API调试及接口文档工具总结

模拟数据的作用与必要性

1、静态页面开发需要模拟数据填充看样式 2、自测需要各种场景下的数据，如空数据、网络慢、数据的各种状态等 3、面向领导编程时可以早点有东西给领导看，需求要改早点改（码农的卑微） 4、减少前端端联调时间，只要接口文档是对的，联调看几眼就完事，出了bug也是后端的 5、bug修改、需求变更时，可以不用连接后端转圈圈（接口慢的时候loading很烦人） 6、以后想到了再补

几种模拟数据使用方案简单粗暴的写在代码中使用promise封装接口自定义返回本地启动后端服务使用mockjs使用nodejs模拟一个服务器使用YApi、ApiPost、postman等API调试及接口文档工具直接写在业务代码中

优点： 1、使用简单。

缺点： 1、不删掉代码太臃肿，删掉了需要的时候又得重写 2、不是异步的，实际在用异步数据时可能代码会出现时序bug

推荐的使用场景： 1、项目非常简单

使用指南：有手就行

// 用脚的写法 let data = null; // 用的时候打开 // data = [ // { label: 1, name:1} // ] // 用的时候注释掉下面，不用的时候注释掉上面 await axios.get({ url: `/getData`, }).then(rsp => { data = rsp.data; }).catch(rsp=>{ reject(rsp); }); this.originData = data; // 用手写 let data = null; if(process.env.NODE_ENV == 'development'){ data = [ { label: 1, name:1} ]; } else { await axios.get({ url: `/getData`, }).then(rsp => { data = rsp.data; }).catch(rsp=>{ reject(rsp); }); } this.originData = data; // 数据太多了,放到同级目录下的mock.json里 let data = null; if(process.env.NODE_ENV == 'development'){ data = await axios.get({ url: `./mock.json`, }); } else { await axios.get({ url: `/getData`, }).then(rsp => { data = rsp.data; }).catch(rsp=>{ reject(rsp); }); } this.originData = data; 使用promise封装接口调用自定义返回

优点: 1、使用简单 2、相对于第一种把模拟数据从业务代码中摘了出来，代码清爽一点

缺点： 1.、跟直接写在业务代码里一样

推荐的使用场景： 1、项目非常简单

使用指南： api调用写在一个同级目录下的api.js文件中

// api.js代码示例 export default { // 获取数据 getData(option) { return new Promise(resolve => { if(process.env.NODE_ENV == 'development'){ resolve({ "code": 0, "data":[] }); return; } axios.get({ url: `/getData`, ...option }).then(rsp => { resolve(rsp); }).catch(rsp=>{ reject(rsp); }); }); }, } // 业务代码中使用 import Api from './api'; ... let options = { data: {} }; let data = await Api.getData(options); console.log(data); 本地启动后端服务

优点: 1、真实的接口调用，调试完连联调的步骤都省下了。

缺点： 1.、需要懂后端，本机有一整套后端的开发软件 2.、电脑配置不够会比较卡，因为后端的IDE都比较重 3.、需要后端先开发完接口

推荐的使用场景： 1、个人项目 2、小公司，前后端都是同一个人

使用指南：学会后端，作者也在不断学习中

使用mockjs

优点: 1、使用简单

缺点： 1、不是异步的，需要手动加异步 2、不支持文件操作，所有的接口都会被拦截，异步加载文件会被改变格式（如mapbox的图片加载），导致文件解析失败

推荐的使用场景： 1、没有很多异步文件加载的项目都可以用

使用指南

1、安装

npm install mockjs

2、在入口文件（如vue的main.js）引入

// 开发环境才启用,当然也可以不这么写，先部署到测试环境给产品经理跟UI看看效果 if(process.env.NODE_ENV == 'development'){ require('/mock/index.js'); // 自定义js文件地址 }

3、使用 (在mock/index.js中)

// 引入 import Mock from 'mockjs'; // 假设有多个代理前缀 const baseUrl= { server1: '/system', server2: '/user', } // 接口拦截默认是全字符串匹配，RegExp ".*"，是为了避免接口后带了query Mock.mock(RegExp(server.server1+ '/login' + ".*"), function (options) { /* options的参数: type 请求类型， url 包括了query, body post请求的body */ const { body, url } = options; return { "code": 0, "data":{ "userName": body.userName } } }) Mock.mock(RegExp(server.server2+ '/getSomething' + ".*"), function (options) { const { body, url } = options let data = []; for(let i = 0; i

【本文地址】

几种前端模拟数据使用方案

几种前端模拟数据使用方案

今日新闻

推荐新闻