前端调试工具mock（前端移动端调试工具）

本篇文章给大家谈谈前端调试工具mock，以及前端移动端调试工具对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享前端调试工具mock的知识，其中也会对前端移动端调试工具进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、前端 API 接口数据模拟 (Mock)
• 2、使用postman的mock server
• 3、mock.js 的介绍与使用
• 4、【Mock.js】前端模拟假数据，不用在手拼了
• 5、玩转 Mockjs，前端也能跑的很溜

前端 API 接口数据模拟 (Mock)

在前端开发的过程中，会碰到以下一些问题：

为了解决此类问题，需要使用 mock 数据和 mock 服务器来提供支持。

很多前端框架，如 Reactor、 Angular、Vue 等都带有 mock 服务，以方便开发，这里介绍的是一个独立的小工具，可以在开发者自己的机器上方便的部署和运行，模拟后端接口的返回，以方便前端模拟各种数据。特性如下：

该数据即 files 目录下面 _api_heartbeat_get.json 的内容。

直接按快捷键 CTRL+C 来停止。

GET api/heartbeat 映射到 files_api_heartbeat_get.json

POST api/user/create 映射到 files_api_user_create_post.json

GET api/user?pseudo=1 映射到 files_api_user_get_1.json
POST api/course?pseudo=2 映射到 files_api_course_post_2.json

使用postman的mock server

【前情提要】

作为测试工程师，在日常工作中遇到和三方对接的项目，三方开发进度不理想，导致无法进行联调测试，基于此，开始学习与了解mock服务

【吸收】

经过资料查询，实操验证之后，汇总成如下自我理解：

1.正常自己公司的项目里面，会有一个config文件，里面会配置相关第三方调用接口的地址：ip:port//，具体的URL中的path会统一在接口文档中给出，描述三方提供的接口信息，包括（接口说明、接口路径（path）、请求参数、返回数据格式等），具体项目中调用哪些三方接口，则在项目程序里再去规定。

2.mock的意义，简单来说在于模拟第三方接口的返回，用于我们项目的前端调试，或者接口与接口之间的调用调试。

3.基于此，我们可以使用postman工具的mock server功能，来模拟第三方接口，既然模拟了第三方的所有接口，那么我们在得到mock server的地址（IP2:port2）后，需要在自己项目的config文件中，把配置的第三方调用接口的地址（ip:port），修改成mock server的地址（IP2:port2）。这样程序在运行后，本来调用第三方的地址，才能够走到我们的mock server中，模拟我们配置好的接口返回的数据。

（ 注 ：1.在测试完成后，项目上线之前，需要检查配置文件的地址，是否修改为正确的三方地址。2.出于测试完整性，临时使用mock地址后，三方接口完成开发后，需要修改回正确的三方地址，进行联调测试）

4.postman的mock server 使用步骤：

a.注册postman账号

b.可新建一个space来单独管理mock
d.在环境变量里添加相应的变量，主要包括mock server 的服务地址（即：IP2：port2），以及属于自己账号下的api keys（获取方式需要登录postman官网）

e.给mock server里添加相应的接口，并增加相应的EXAMPLE

f.mock添加对应的接口后，因mock server是联网的，故不受内外网环境的限制，在任何网络环境下，都可配置你自己的mock server地址，进行测试。

mock.js 的介绍与使用

Mock.js （官网地址前端调试工具mock：http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端工程师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能前端调试工具mock：

1,根据数据模板生成模拟数据

2,模拟 Ajax 请求，生成并返回模拟数据

3,基于 HTML 模板生成模拟数据

1.安装mock
2.在src下新建一个mock文件 引入mock.js
3.在页面中发送请求
4.在mock文件夹下前端调试工具mock的index.js中设置mock数据，并拦截请求，将假数据传入页面
1.属性值是字符串

'name|min-max': string

通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

'name|count': string

通过重复 string 生成一个字符串，重复次数等于 count。

2.属性值是数字

name|+1': number

属性值自动加 1，初始值为 number。

’name|min-max': number

生成一个大于等于 min、小于等于 max 前端调试工具mock的整数，属性值 number 只是用来确定类型。

'name|min-max.dmin-dmax': number

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

3.属性值是布尔类型

'name|1': boolean

随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

4.属性值是数组

'name|1': array

从属性值 array 中随机选取 1 个元素，作为最终值。

'name|+1': array

从属性值 array 中顺序选取 1 个元素，作为最终值。

'name|min-max': array

通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

'name|count': array

通过重复属性值 array 生成一个新数组，重复次数为 count。

【Mock.js】前端模拟假数据，不用在手拼了

前后端分离开发的时候，前端和后端是并行开发的，前端往往刚开始不能拿到测试的数据，都需要自己写测试数据。 编写测试数据还是比较浪费时间的，虽然简单，但是都是体力活。

那么是否有工具可以帮我们生成数据，生成API接口，让前端能够爽爽的开发。

Mock.js 正是这样一款类库，可以帮我们模拟生成一堆数据。

引入引入mock.js的包，然后生成数据。

生成的数据(数据的个数，1-10个中随机个数)

配置模拟数据

发送Ajax请求：

返回数据：

注意：

属性名 和 生成规则 之间用 | 分隔。生成规则 是可选的。生成规则 有 7 种格式：

生成规则 的 含义 需要依赖 属性值 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。

玩转 Mockjs，前端也能跑的很溜

mockjs作用就是，生成随机模拟数据，拦截 ajax 请求，可以对数据进行增删改查。在生成数据时，我们就需要能够熟练使用 mock.js 的语法。

Mockjs 的语法规范包括两部分：数据模板定义规范和数据占位符定义规范。

数据模板中的每个属性组成有：属性名、生成规则、属性值。

使用语法为：

值得注意的有：

生成规则的格式分别有：

1.1、属性值是类型 String

变量的重复次数是一个随机值。

直接指定重复次数。

1.2、属性值是 Number

生成不断累加的数字。

生成一个区间数值。

生成带有小数点的数字。

1.3、属性值是 Boolean

1.4、属性值是对象 Object

生成一个指定属性个数的对象。

生成一个属性个数随机的对象。

1.5、属性值是数组 Array

取数组中某个元素作为结果。

生成新数组。

1.6、属性值是函数 Function

在数据占位符中，属性值是函数有重要的意义。待会会重点解释。

1.7、属性值是正则 RegExp

数据占位符只是在属性字符串中占个位置，并不会出现在最终的属性值中。

使用格式：

注意：

创建一个 api 接口，返回一个随机生成的数组：

占位符引用的都是 Mock.random 内的方法，所以我们可以把上述代码更改为：

此时我们再查阅的时候，就发现生成的数组内，名字都是一模一样的。如果我们想生成不一样的姓名，该如何解决呢？

解决办法：把属性值更改为函数，将函数的返回值作为最终结果。

好了我今天的文章就到此结束了，喜欢我的可以点个关注哦！

关于前端调试工具mock和前端移动端调试工具的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 前端调试工具mock的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于前端移动端调试工具、前端调试工具mock的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。