本篇文章给大家谈谈前端的数据mock工具,以及前端模拟数据接口对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
今天给各位分享前端的数据mock工具的知识,其中也会对前端模拟数据接口进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
前端 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
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后端数据
在使用RestfulAPI方式进行项目开发的初期
前端的数据mock工具,通常由后端同学事先设计出API接口文档。而在开发阶段,往往前后端的开发是并行的,意味着在前端开发过程中,后端并不能提供相应API接口的server。在这种情况下,我们可以自行mock一个server来辅助我们的前端开发。
一个完美的本地模拟后端接口应该满足以下几个方面(暂时只想到这些)
前端的数据mock工具:
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连接起来
前端的数据mock工具?
webpack-dev-server提供了强大的代理功能,我们可以手动在webpack的配置文件中指定相应的api请求代理到2999端口上,配置方式如下:
关于前端的数据mock工具和前端模拟数据接口的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
前端的数据mock工具的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于前端模拟数据接口、前端的数据mock工具的信息别忘了在本站进行查找喔。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
暂时没有评论,来抢沙发吧~