mock工具 nodejs（mock工具排行）

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

本文目录一览：

• 1、使用 NodeJs 实现本地接口系统
• 2、使用 MockJs — 实现真正的前后端分离
• 3、数据Mock与后端联调
• 4、搭建本地mock服务
• 5、mockjs 使用简介
• 6、我是怎么搭建前端mock-server的

使用 NodeJs 实现本地接口系统

一个基于node.js的轻量级 API mock服务 。

 

在存放mock数据的文件夹下执行命令启动服务。

如果mock数据文件放在名为 mock-data 的文件夹下，则在 mock-data 文件夹下执行以下命令。

以下命令默认端口为 7777

或者使用自定义端口

服务启动后，访问地址为

在存放mock数据的目录下新建 .json 或者 .js 为后辍的文件。

mock规则示例如下：

如果对同一接口分别创建了 js 和 json 两个mock文件，会优先取 js文件 的数据。

mock文件名必须和API接口的文件名一致，才能将API和mock文件匹配。

示例:

示例：

1） 先安装包

2） 在任意位置新建一个文件夹 mock-test

3） 在 mock-test 目录下新建mock数据文件 test.json ，并添加内容如下：

4） 在 mock-test 目录下面执行命令启动mock服务 (默认端口7777)

5） 打开浏览器，输入以下地址，访问mock文件

请求地址只要以 test 结尾的，都可以访问到上面创建的 test.json 文件

6） 项目中使用

以webpack4为例：

Github仓库源码地址： https://github.com/ahbool/mock123 ，欢迎 +Star

使用 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。保持编码模块化风格一致确实也是需要优化的一个地方，不管了，反正我不干。

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

数据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 语句，进行简单的测试。

搭建本地mock服务

一mock工具 nodejs：为什么用mock

1.不用mock依赖后端接口mock工具 nodejs，串行开发会拉长开发周期

2.再也不用跟后端屁股后头崔接口，定义好数据格式即可

二：mock分类

1.直接写死假数据

2.安装mock.js 利用Mock.mock()

3.在本地启动一个mock服务

4.搭建一个mock平台

三：l-mock在项目中mock工具 nodejs的应用

一：l-mock是一个启动本地mock服务mock工具 nodejs的工具 1.全局安装 npm i l-mock -g

2.初始化mock目录, init命令在project根目录下生成mock目录，并放置demo接口 cd path/to/project lmock init

3.运行, 进入生成的mock目录，运行start命令，直接访问localhost:3000/a 则可看到/a接口返回 cd mock lmock start 第一次初始化后，后面的开发只需要在mock目录中运行lmock start就可以开启接口模拟。 为了方便我们可以直接配置在npm命令中，往后就运行 npm run mock

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-server的

作者：张云龙
链接：https://www.zhihu.com/question/35436669/answer/62753889
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权mock工具 nodejs，非商业转载请注明出处。

为了更好的分工合作，让前端能在不依赖后端环境的情况下进行开发，其中一种手段就是为前端开发者提供一个web容器，这个本地环境就是 mock server。
要完整运行前端代码，通常并不需要完整的后端环境，mock工具 nodejs我们只要在mock server中实现以下几点就行了：

能渲染模板

实现请求路由映射

数据接口代理到生产或者测试环境

能渲染模板很简单，在mock server中集成模板引擎就行了，然后提供模拟的页面数据用于完整渲染页面，不过有时候生产环境中的模板引擎可能有一些环境依赖的扩展，这个要单独实现。
请求路由映射，实现原理就是要让本地的mock server有一个router，能接收所有HTTP请求，然后在router中根据线上的路由约定，实现一套一样的规则，这个也不难，不赘述了。
最后数据接口代理。与前端相关的HTTP请求一共就3种响应情况：

渲染页面的请求；

静态资源的请求；

获取数据的请求。

由于实现了router，我们把渲染页面的请求在mock server中处理掉，直接输出本地模板的渲染结果；静态资源的请求直接返回文件内容；而把数据请求代理到测试或者生产环境，本地就不用mock了（当然，如果出现新的接口测试环境没有的，可以追加router，在mock server想响应假数据）

画个图总结一下：

补充一些Tips：

由于Mock Server需要具备渲染模板的能力，因此可能需要一种轻量的服务端跨平台server实现方案，如果是java的后端，可以考虑使用jetty，一个1.8M的jar即可；如果是php的后端，可以考虑使用php 5.4以后内置的server，启动命令是 php -S 127.0.0.1:3000 router.php；如果是Nodejs，那就很简单了，估计都不需要Mock Server，本地也可以跑的

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

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