前端mock工具接口支持（前端mock数据工具）

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

本文目录一览：

• 1、前端 API 接口数据模拟 (Mock)
• 2、『居善地』接口测试 — 21.Mock功能介绍（二）
• 3、前端mock接口数据最高效吗？
• 4、在前端开发中mock后端数据
• 5、mockjs 使用简介

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

在前端开发前端mock工具接口支持的过程中，会碰到以下一些问题：

为前端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

『居善地』接口测试 — 21.Mock功能介绍（二）

当需要调用接口来编写测试用例的时候，此时该接口并没有被实现，这个时候前端mock工具接口支持我们就可以用Mock框架来模拟一个接口出来。

使用Mock模拟接口以下功能：

编写一个Json文件，接口所有的信息都配置在该json文件中。

把Moco框架的jar包和上面编辑好的Json文件放在同一个文件夹中。

在cmd命令行或者PyCharm的命令行终端执行启动命令。

Moco服务启动后，前端mock工具接口支持我们可以使用Requests库请求接口，也可以用浏览器接口。

浏览器访问接口：

我们主要是看Json文件怎么写，其他步骤和上面练习一样。

1）、没有参数的get请求

2）、有参数的get请求

说明：请求地址为： api/moco/get/param/demo?name=xiaomingage=18

1）、没有参数的post请求

提示：POST请求就不能用浏览器进行查看了。只能用Request库或者JMeter，Postman等进行查看。（能进行接口调用的工具都可以）

2）、有参数的post请求

调用接口查看结果。

使用的是 request 中的 cookies 属性。

1）、get请求

调用接口查看结果。

2）、post请求

调用接口查看结果。

使用的是 request 中的 headers 属性。

Header 是添加请求头信息，关于请求头信息get请求和post请求都是一样的。

调用接口查看结果。

重定向使用的是和 request 同级的 redirectTo 属性。

使用浏览器进行测试就可以。

Json文件的配置属性说明：

像我们上面练习过的Json文件配置，所有的数据值是固定的，

如： description 、 request 、 response 、 redirectTo 等这些都是固定的，不能修改，修改可能连Moco服务都启动不来。

还有 request 的属性值，如： uri 、 method 、 cookies 、 headers ，也是必须这样写的。

还有GET请求传递参数用 queries 属性，POST请求传递参数用 forms 和 json 属性都可以。（PUT,DELETE请求同Post请求。）

Moco框架原理：

就是把所有接口的数据，包括发送请求的所有数据和返回结果的所有数据，以Json数据格式进行编写。

把这些数据放入Moco框架提供的HTTP或者HTTPS的服务上，就实现了接口数据的模拟。

在使用的时候，我们只要按照json文件中接口配置的信息进行请求即可，如果调用接口传递的数据和Json文件中接口编写要接收的数据不一致，则无法请求成功。

前端mock接口数据最高效吗？

前端开发中需要去调用后端的接口，如果后端还没有ready，为了不block开发进程，前端就需要自行mock数据。
我们常用的方法大概以下两种：

通过一个线上mock数据平台，如： Easy Mock

通过本地server。

第一种方法需要联网操作，我是碰到过几次网络链接不上的情况，，也可能是我自己的网络问题。

第二种方法，往往需要我们自己去写各种路由规则，如：

app.get('/api/getuser', (req, res)={

res.send({...})

})

这样来看的话前端的借口数据还是非常的高效的！

在前端开发中mock后端数据

​ 在使用RestfulAPI方式进行项目开发的初期，通常由后端同学事先设计出API接口文档。而在开发阶段，往往前后端的开发是并行的，意味着在前端开发过程中，后端并不能提供相应API接口的server。在这种情况下，我们可以自行mock一个server来辅助我们的前端开发。

​ 一个完美的本地模拟后端接口应该满足以下几个方面（暂时只想到这些）：

​ json-server的官方是这样介绍项目的：

​ 假设想要请求 http://localhost:3000/allcompanies 的资源，可以在db.json中编写前端希望接收到的响应，如下：

​ 启动 json-server mock/db.json --port 2999 ，即可在2999端口上请求到如上的json信息。

​ 考虑复杂一点的情况，假设我们请求的资源使用 http://localhost:3000/management/query/allcompanies ，但在db.json中是不支持直接写：

​ 这种情况下可以编写一个配置文件 routes.json 来指定一些路由规则，匹配规则有多种，详细信息参考 add-custom-routes

​ 执行 json-server mock/db.json --port 2999 在2999端口启动json-server，当然最佳的方式将该命令写在 package.json 中，将命令进行统一的管理：

​ 这样在开发阶段，通过执行 npm run dev 启动webpack的开发模式，执行 npm run mock 启动json-server来提供mock数据。

​ 在开发阶段，假设我们在webpack的配置文件 webpack.dev.config.js 中设置了webpack-dev-server的启动端口是3000，那么自然而然的，前端所有的ajax请求都会从3000端口去请求数据。而json-server跑在2999端口上，如何将两个server连接起来？

​ webpack-dev-server提供了强大的代理功能，我们可以手动在webpack的配置文件中指定相应的api请求代理到2999端口上，配置方式如下：

mockjs 使用简介

在前后端分离的开发模式中，数据需要通过 http 请求异步从服务器端获取，也就是前端开发需要依赖后端接口，如果不能时时保证数据获取通畅，就会造成开发阻塞。这时前端需要一种方式可以来模拟数据请求，从而更多的掌握主动权独立开发项目， mockjs 可以以无侵入的方式拦截 ajax 请求，通过模拟服务器端响应来返回数据

JSRUN

Mockjs 语法规范由数据模板定义规范和数据占位符定义规范组成，在官网的 示例文档 中提供了丰富的模板定义方法，可点击查看

Mockjs 实现的原理是对 XHR 对象的拦截，属于 js 拦截，并没有通过浏览器发出请求，所以一般会碰到以下问题。

为了处理以上问题，引入集成了 mockjs 的 mock server工具 easy-mock ，注册并登录 easy-mock 官网后，会有一个演示项目提供参考，参考演示项目可以轻松创建自己的项目，如下图

创建项目后可以基于当前项目创建请求接口，如下图，创建一个 url 为 \user 的 get 请求，会生成接口为 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/user 的完整地址，点击 用户列表 可查看返回数据，由于 easy-mock 内部集成了 mockjs ，所以在生成数据时可以采用mockjs数据模板来生成，把基础用法中的数据生成模板粘贴过来，可以生成相同数据
浏览器限制跨域访问，所以要访问到接口数据，还需要解决跨域问题，通过 Nginx 解决跨域我在另外一片文章有讨论过，点击可以可查，下面主要介绍下通过 webpack-dev-server 设置代理

假设本地请求的根路径为 http://localhost:8080 ，通过 ajax 请求 用户列表 的完整接口为 http://localhost:8080/proxy/user ， webpack-dev-server 通过代理方式将请求转发到我们在 easy-mock 中定义的接口 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/proxy/user ，此时接口地址中多了个代理标志 /proxy , 通过配置参数 pathRewrite: {'^/proxy': ' '} 将 /proxy 去掉即可。 关于前端mock工具接口支持和前端mock数据工具的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 前端mock工具接口支持的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于前端mock数据工具、前端mock工具接口支持的信息别忘了在本站进行查找喔。

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