老程序员分享: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
相关文章
|
人工智能 算法 前端开发
【五子棋实战】第3章 算法包装成第三方接口
【五子棋实战】第3章 算法包装成第三方接口
|
5月前
|
前端开发 JavaScript
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
1771 1
|
6月前
|
测试技术 UED
Mock 工具使用 - 模拟弱网测试
在移动互联网时代,弱网测试至关重要,尤其面对多样化的网络环境和应用场景,如2G, 3G, 4G及弱信号WiFi。弱网通常指低于3G的网络或弱信号WiFi。Charles工具能方便地模拟不同网络条件,包括带宽、丢包和延迟,以进行功能测试和优化用户体验。通过Proxy -> Throttle Setting启用限制,选择预设或自定义参数(如下载速度、带宽和延迟)进行测试。通过基础模拟和定制设置,确保移动端应用在弱网环境下的稳定性和性能。
|
5月前
|
存储 Java
软件开发常用之SpringBoot文件上传接口编写(中),一本书,代码大全(里面有很多代码重构的方法),屎山代码的原因是不断追加逻辑,在错误代码上堆积新的功能,在写完逻辑之后去思考一下,逻辑合理不
软件开发常用之SpringBoot文件上传接口编写(中),一本书,代码大全(里面有很多代码重构的方法),屎山代码的原因是不断追加逻辑,在错误代码上堆积新的功能,在写完逻辑之后去思考一下,逻辑合理不
|
7月前
|
JSON JavaScript 前端开发
没有json数据,自己造!mockjs的使用-模拟数据其实超级简单
没有json数据,自己造!mockjs的使用-模拟数据其实超级简单
151 0
|
JavaScript 前端开发
【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟
基础的脚手架已经搭建完毕,如果我们想快速生成几个基础的组件模板我们可以使用Plop或者使用文件写入实现。比如我们不想等后端同学的接口,可以直接使用mock模拟数据生成。
288 0
【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟
|
JSON 前端开发 JavaScript
封装库/工具库中重要概念之mock数据
在前端开发中,Mock数据是一个非常重要的概念。它能够帮助我们在没有后端API支持的情况下,模拟数据源并进行开发测试。随着前端技术的发展,越来越多的封装库和工具库提供了Mock数据的功能。在本文中,我们将探讨前端中封装库和工具库在Mock数据方面的作用。
230 0
|
JSON 前端开发 数据格式
#yyds干货盘点 【React工作记录十二】前端对接口参数错误如何解决
#yyds干货盘点 【React工作记录十二】前端对接口参数错误如何解决
172 0
|
XML JSON 前端开发
使用Mock技术帮助提升测试效率的小tips,你知道几个?
使用Mock技术帮助提升测试效率的小tips,你知道几个?
|
安全 测试技术 数据库
接口测试平台代码实现141: 项目大用例干扰bug解决2
接口测试平台代码实现141: 项目大用例干扰bug解决2
接口测试平台代码实现141: 项目大用例干扰bug解决2