老程序员分享:Mock数据:模拟数据

简介: 老程序员分享:Mock数据:模拟数据

"

mockjs官网:

mockjs官方文档:

具体使用方法

第一步 安装mockjs

npm install mockjs

第二步 创建一个mock目录生成mock数据

例如:course.js

import Mock from ""mockjs"";

//mock课程数据

var result=Mock.mock({

code: 200,

msg: ""操作成功"",

data: {

current_page: 1,

last_page: 18,

total: 178,

""list|10"": 【

{

id: ""@id"", //模拟id

""price|100-200.1-2"": 100, //模拟小数,在计算机中也称浮点数

""has_buy|//代码效果参考:https://v.youku.com/v_show/id_XNjQwMDEzNzcwOA==.html

1"": 【0, 1】, //模拟状态值,0,1,2,

title: ""@ctitle"", //模拟中文标题

address: ""@county(true)"", //模拟省市县

""teachers_list|1"": 【

{

course_basis_id: ""@id"",

id: ""@id"",

teacher_avatar: ""@image('150x120', '#ff0000', '1909A')"", //模拟图片

teacher_name: ""@cname"" //模拟中文姓名

}

}

}

});

export default //代码效果参考:https://v.youku.com/v_show/id_XNjQwMDEzMTc4NA==.html

result;

//创建mock的入口文件,并配置请求的接口地址,提交方式,返回的假数据

import Mock from 'mockjs'

//导入的模拟数据

import courseData from ""./course"";

/**

* Mock.mock( rurl, rtype, template )

* rurl:请求的接口地址

* rtype:提交方式

* template:返回数据

*/

Mock.mock("""", ""get"", courseData);

? 第三步:将模拟的数据注入到main.js

//注入mock

import './mock'

第四步:在要请求的组件中请求数据

axios.get('').then(res=>{

console.log(res)

})

easy-mock:基于mockjs生成在线假数据


"
image.png
相关文章
|
4月前
|
前端开发 JavaScript
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
1693 1
|
5月前
|
测试技术 UED
Mock 工具使用 - 模拟弱网测试
在移动互联网时代,弱网测试至关重要,尤其面对多样化的网络环境和应用场景,如2G, 3G, 4G及弱信号WiFi。弱网通常指低于3G的网络或弱信号WiFi。Charles工具能方便地模拟不同网络条件,包括带宽、丢包和延迟,以进行功能测试和优化用户体验。通过Proxy -> Throttle Setting启用限制,选择预设或自定义参数(如下载速度、带宽和延迟)进行测试。通过基础模拟和定制设置,确保移动端应用在弱网环境下的稳定性和性能。
|
4月前
|
JSON 前端开发 Java
前后端数据交互-----表单数据获取不到,出错的原因,在编写接口时,没有考虑数据如何返回,解决问题的思路,找到自己出错的地方,围绕着出错的地方进行考虑(很重要),找对解决问题的视频,理清返回数据的思路
前后端数据交互-----表单数据获取不到,出错的原因,在编写接口时,没有考虑数据如何返回,解决问题的思路,找到自己出错的地方,围绕着出错的地方进行考虑(很重要),找对解决问题的视频,理清返回数据的思路
|
6月前
|
JSON JavaScript 前端开发
没有json数据,自己造!mockjs的使用-模拟数据其实超级简单
没有json数据,自己造!mockjs的使用-模拟数据其实超级简单
130 0
|
存储 NoSQL 算法
线上真实排队系统重构案例分享——实战篇
线上真实排队系统重构案例分享——实战篇
547 0
|
前端开发 NoSQL Redis
项目实战典型案例5——发送调查问卷流程图例子(将不必要的逻辑放入前端)
项目实战典型案例5——发送调查问卷流程图例子(将不必要的逻辑放入前端)
116 0
|
JavaScript 前端开发
【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟
基础的脚手架已经搭建完毕,如果我们想快速生成几个基础的组件模板我们可以使用Plop或者使用文件写入实现。比如我们不想等后端同学的接口,可以直接使用mock模拟数据生成。
283 0
【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟
|
XML JSON 前端开发
使用Mock技术帮助提升测试效率的小tips,你知道几个?
使用Mock技术帮助提升测试效率的小tips,你知道几个?
|
前端开发
前端工作小结82-当前函数造成
前端工作小结82-当前函数造成
82 0
前端工作小结82-当前函数造成
|
测试技术 数据库 数据安全/隐私保护
接口测试平台代码实现140: 项目大用例干扰bug解决
上节课我们明确了解决方案,先试验思路1, 也就是想办法 隔离。
接口测试平台代码实现140: 项目大用例干扰bug解决