【效率工具】数据接口模拟-Node+Koa-实现& mock.js方案 （二）

这是我参与更文挑战的第 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~