mock工具开后端发思想（mock工作原理）

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

本文目录一览：

• 1、在前端开发中mock后端数据
• 2、数据Mock与后端联调
• 3、使用 MockJs — 实现真正的前后端分离
• 4、mockjs 使用简介
• 5、前端 API 接口数据模拟 (Mock)

在前端开发中mock后端数据

​ 在使用RestfulAPI方式进行项目开发mock工具开后端发思想的初期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 中设置mock工具开后端发思想了webpack-dev-server的启动端口是3000，那么自然而然的，前端所有的ajax请求都会从3000端口去请求数据。而json-server跑在2999端口上，如何将两个server连接起来mock工具开后端发思想？

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

数据Mock与后端联调

通常前端开发的时候，我们的页面已经开发完成。但是后端的接口不一定已经写完就了。这时候我们就可以自己去伪造一些符合规范的数据，用于前期的测试，等到后端接口完成的时候我们可以在进行一个接口联调。

对于我们前端来说，我们天生就会一个后端开发语言，nodejs即可实现。

我们只需要创建一个简易服务器，对请求路径进行判断，返回对应的mock数据。

Mock.js可以快速通过模板生成数据。

http://mockjs.com/examples.html

@ctitle(3, 10)
@cparagraph
@cword
@cname
@integer(10, 100)
@float(20, 30, 2, 3)
@color
@date
@time
@now
@id
@url
@email
@image('200x100')

http://rap2.taobao.org

约定好接口的路径是什么？
如
/auth/register

接口的提交类型是什么？
如
GET 获取数据
POST 提交或创建
PATCH 修改数据，部分修改
DELETE 删除数据
PUT 修改数据，整体替换原有数据

参数类型/格式
如
fromdata 或者 application/x-www-form-urlencoded

参数字段限制条件
返回成功的格式
返回失败的格式

当后端给到你接口的时候，你可以使用命令行的 curl 语句，进行简单的测试。

使用 MockJs — 实现真正的前后端分离

前言： 刚刚看了下的后台，发现我技术文章中，阅读留言最多的是关于移动端的文章，甚至还有人付费赞赏或咨询。关于 PC 端的技术文章就显得比较冷清了，唉，废了好大劲写的，没人看。 和我想的一样，移动端才是王道，下次找工作我也搞移动端😂 。

背景： 去年我写了一篇 学习使用 json-server 和 mockjs 的文章，当时没有仔细研究，文章只提到了 MockJs 其中一个 Random 的用法，关于 MockJs 拦截器和另一个很常用的 Mock.mock 函数都没有提及。这次来搞一下。

唉！以前我也是经常会听到 前后端分离 这个名词，只模糊的知道它最重要的一个作用就是，大大的提升了 前端的地位。 但是平时在开发的时候，我也会想奶奶的，没有接口这前端不就写了一个破页面，后期还的和后端对接口，对接口的时候花费的时间，肯定是不比前端开发的时候短，工期上最起码一半一半吧， 这也就前后端分离 ，我这个小脑袋就不是太明白了。

不过我现在是终于搞明白这个问题了， 对于前端来讲，真正的前后端分离，标志是不依赖后端的前端工作开发完成，项目基本宣告结束。 后端开发完接口，只需要提换一个 URL 就行了，这也意味着前端需要去写一些接口。

除了带来开发任务稍微重点外，我至少看到了两个最大的优点：

我体会最深就是这两点。

插曲 ：对了，今天中午我捡到一个手机，我必须要用一张动图来描述下：

这个经典的 GIF ，来自郑伊健的恐怖电影「第一诫」，清凉一冬，绝对值得一看，虽然剧情有很大的 bug ，但是港片就这点好，它有很抓人的地方，让你觉得特别好看。

正文由此开始：

待续~~~

上面三种方案都可以，但你要知道接口很多，需要支持批量引入，所以 使用 Axios 响应拦截器 就不太可取，只能在这简单的造些假数据。

著名开源项目 vue-element-admin 开发环境下模拟假接口使用的是 在 webpack-dev-server 的 before 处拦截。生产环境下是在项目入口文件（ index,js ）使用 Mock.mock 模拟的。

拦截请求的步骤如下，根据 devserverbefore 配置的栗子🌰：

可知道 before 接收一个函数，函数的第一个参数一般叫 app ，因为它的作用和 express 的 app 是等效的。也就是说这个 app 自带路由， 正好解决接口批量引入的问题。

在项目中，一般都是这么写，把逻辑提出去：

./mock/mock-server.js 文件的内容为：

./mock/index.js 文件的内容为：

mockXHR 不用看，因为这是给线上环境用的，所以可以简单的改写为：

随便找一个，例如 user 看下接口怎么写的：

完美，到此结束。

我想你一定对更改文件的时候，为什么要 清路由和清缓存感兴趣。

如果熟悉 express 框架，看到 app._router.stack 你就知道了。不知道也没关，我演示给你看，新建一个JS 文件，文件内容为：

执行结束，看在 test.js 文件的内容：

发现没，重复被添加的路由，不是覆盖而是扩展。

这个涉及到 CJS 模块的运行机制， 记住 require 的文件会被加到 require.cache 里面，当文件改变读的是缓存，而不是最新更改的文件。

项目结构过大，如果只在 mock 文件夹里面管理有点麻烦，我就想在页面所在目录直接写接口，怎么办？没错使用 require.context 来批量引入。但是 NodeJs 是没有批量引入的 API 的。找遍了 npm 也没发现一个 package 和 require.context 长得像的。

难道没办法了吗？当然不是，自己动手丰衣足食。 依照 vue-cli 插件的命名规范，我给写的 package 取名 node-plugin-require-context ，简单讲下实现原理：

其实还有一个缺点，如果你看过 Antd-Pro 项目，你就会发现它模拟数据，模块化采用的是 ESModule ，而不是 CJS。保持编码模块化风格一致确实也是需要优化的一个地方，不管了，反正我不干。

官网本来就是中文的，我在使用中发现写的贼好，我就不用画蛇添足了。建议每次使用前：

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 去掉即可。

前端 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 关于mock工具开后端发思想和mock工作原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 mock工具开后端发思想的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于mock工作原理、mock工具开后端发思想的信息别忘了在本站进行查找喔。

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