nodejs mock工具（nodejs mock server）

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

本文目录一览：

• 1、使用 NodeJs 实现本地接口系统
• 2、使用 MockJs — 实现真正的前后端分离
• 3、数据Mock与后端联调

使用 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 语句，进行简单的测试。 关于nodejs mock工具和nodejs mock server的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 nodejs mock工具的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于nodejs mock server、nodejs mock工具的信息别忘了在本站进行查找喔。

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