老程序员分享: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
相关文章
|
2月前
|
数据采集 XML C#
C#简化工作之实现网页爬虫获取数据
C#简化工作之实现网页爬虫获取数据
39 1
|
3月前
|
前端开发 JavaScript
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
848 1
|
3月前
|
存储 Java
软件开发常用之SpringBoot文件上传接口编写(中),一本书,代码大全(里面有很多代码重构的方法),屎山代码的原因是不断追加逻辑,在错误代码上堆积新的功能,在写完逻辑之后去思考一下,逻辑合理不
软件开发常用之SpringBoot文件上传接口编写(中),一本书,代码大全(里面有很多代码重构的方法),屎山代码的原因是不断追加逻辑,在错误代码上堆积新的功能,在写完逻辑之后去思考一下,逻辑合理不
|
3月前
|
JSON 前端开发 Java
前后端数据交互-----表单数据获取不到,出错的原因,在编写接口时,没有考虑数据如何返回,解决问题的思路,找到自己出错的地方,围绕着出错的地方进行考虑(很重要),找对解决问题的视频,理清返回数据的思路
前后端数据交互-----表单数据获取不到,出错的原因,在编写接口时,没有考虑数据如何返回,解决问题的思路,找到自己出错的地方,围绕着出错的地方进行考虑(很重要),找对解决问题的视频,理清返回数据的思路
|
JavaScript 前端开发
【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟
基础的脚手架已经搭建完毕,如果我们想快速生成几个基础的组件模板我们可以使用Plop或者使用文件写入实现。比如我们不想等后端同学的接口,可以直接使用mock模拟数据生成。
274 0
【从零到一手撕脚手架 | 第四节】加速开发效率 使用plop生成开发模板 使用mock进行数据模拟
|
测试技术
03 思维方式:用一个案例彻底理解接口测试的关键逻辑
03 思维方式:用一个案例彻底理解接口测试的关键逻辑
|
XML JSON 前端开发
使用Mock技术帮助提升测试效率的小tips,你知道几个?
使用Mock技术帮助提升测试效率的小tips,你知道几个?
|
前端开发 搜索推荐 测试技术
【测试开花】七、接口测试-前端-模块树和接口列表
【测试开花】七、接口测试-前端-模块树和接口列表
【测试开花】七、接口测试-前端-模块树和接口列表
|
前端开发 算法 数据处理
前端基础向~从项目出手封装工具函数
前端基础向~从项目出手封装工具函数
159 0
|
安全 测试技术 数据库
接口测试平台代码实现141: 项目大用例干扰bug解决2
接口测试平台代码实现141: 项目大用例干扰bug解决2
接口测试平台代码实现141: 项目大用例干扰bug解决2