这是我参与更文挑战的第 10 天，活动详情查看： 更文挑战
上一篇给大家介绍了 【效率工具】下一代 接口模拟工具-Mock Service worker(一)，与应用解耦，使用简单，本文介绍一些其他的数据接口模拟工具及插件
按需食用，不足之处，欢迎各路大佬不吝赐教，补充完善，欢迎分享
- 工欲善其事，必先利其器。实践（巧偷懒）促进科技发展
- 本文分享使用
node + koa进行 数据接口模拟mock api的详细不走，手摸手从零启动一个服务，以及一个工具库mock.js， 助你开发提效
1. 使用node + express or koa 自己搭建一个 mock api
这种方法没有前文 Mock Service Worker 来的简单，还需要自己维护，稍微有点小麻烦！！
下面小试牛刀，学习一下 node + koa 加载 .json 文件启动服务接口
node + koa mock api
主要通过读取 .json 文件，使用 路由与之对应，形成对应接口:
1.1 新建项目文件夹，node-koa-mock 安装相关依赖
yarn add koa koa-router glob koa-logger nodemon
复制代码1.2 新建 app.js 代码逻辑如下：
// app.js
const Koa = require("koa");
const Router = require("koa-router");
const glob = require("glob"); // glob 支持文件遍历查寻
const logger = require("koa-logger"); // koa-logger 实现在终端打印node日志，方便调试
const { resolve } = require("path");
const fs = require("fs");
const app = new Koa();
const router = new Router({ prefix: "/api" });
const routerMap = {}; // 存放 文件路径与路由 的 映射
app.use(logger());
let content = '' // api/list 目录
// 注册路由
glob.sync(resolve("./api", "**/*.json")).forEach((item, i) => {
let apiJsonPath = item && item.split("/api")[1];
let apiPath = apiJsonPath.replace(".json", "");
console.log(item, apiJsonPath, apiPath);
content += apiPath + '\n'
router.get('/list', (ctx, next)=> { // => /api/list/
ctx.body = content
})
router.get(apiPath, (ctx, next) => {
// http://localhost:3000/newscontent?aid=123
//从ctx中读取get传值
console.log("ctx.query: ", ctx.query); // { aid: '123' } 获取的是对象 用的最多的方式 **推荐**
console.log("ctx.querystring: ", ctx.querystring); // aid=123&name=zhangsan 获取的是一个字符串
console.log("ctx.url: ", ctx.url); // 获取url地址
// ctx 里面的 request 里面获取 get 传值
console.log(ctx.request.url);
console.log(ctx.request.query); // { aid: '123', name: 'zhangsan' } 对象
console.log(ctx.request.querystring); // aid=123&name=zhangsan
try {
console.log(item);
let jsonStr = fs.readFileSync(item).toString();
ctx.body = {
data: JSON.parse(jsonStr),
status: 200,
type: "success" // 自定义响应体
};
} catch (err) {
console.log(err);
ctx.body = {
status: 404,
type: "false"
};
ctx.throw("服务器错误: ", 500);
}
});
routerMap[apiJsonPath] = apiPath;
});
/**
* router.routes() // 启动路由
* router.allowedMethods()作用：这是官方文档的推荐用法, 我们可以
* 看到 router.allowedMethods() 用在了路由匹配 router.routes() 之后,
* 所以在当所有路由中间件最后调用. 此时根据 ctx.status 设置 response 响应头
*/
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log("app started at port 3000...");
});
复制代码1.3 新建.json文件，对应路由，对应接口
项目目录新建如下路径：
api/v1/user.json,
api/v1/name.json,
api/v1/articles/12345.json
{
"name": "xn213",
"age": "21",
"worke_years": "6",
"desc": "you are coder?"
}
复制代码1.4 启动项目 nodemon
这里使用 nodemon 自动监听 app， 启动项目如下图
// 配置启动命令
"serve": "nodemon -w ./ --exec",
复制代码1.5 测试请求
然后在浏览器测试一下请求, 如下请求成功，和我们定义的 .json文件内容一致：
至此， 我们就使用 node + koa 成功实现了模拟数据接口，这里简单处理一些简单的数据，具体项目中的复杂逻辑，请根据具体需求进行更深层次的探究。--嘻嘻--
2. Mock.js 
A simulation data generator Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
- 根据数据模板生成模拟数据
- 模拟 Ajax 请求，生成并返回模拟数据
- 基于 HTML 模板生成模拟数据
通过使用 mockjs 我们能根据模板和规则生成复杂的接口数据，而无需我们自己动手去书写
【官网】： mockjs.com
【文档】： mockjs.com/0.1/
【示例】： mockjs.com/examples
【源码】： github/mswjs
【特点】
- 前后端分离 让前端攻城师独立于后端进行开发。
- 增加单元测试的真实性 通过随机数据，模拟各种场景。
- 开发无侵入 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
- 用法简单 符合直觉的接口。
- 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
- 方便扩展 支持支持扩展更多数据类型，支持自定义函数和正则。
3. ...
当然好用的
mock api工具/方法有很多，这里列举部分工具，仅作参考，抛砖引玉，有没有
get到呢?
欢迎评论出你的私藏工具分享给大家=，=
今日份预告不了了 明天更新还没有思路/话题：
由于今天的文章更新有点晚了，还没想好明天更新话题，早点休息，明天再想吧
那下一篇敬请期待！ hahah~
