npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mock-service-plugin

v1.2.2

Published

模拟后端接口服务

Downloads

317

Readme

mock 服务的作用

前后端分离并行开发,模拟后端接口服务

优势

  • 兼容 webpack 4/5
  • 兼容 常见框架 Vue/React
  • 支持 restful api 规范
  • 使用简单 易与项目集成

mock-service-plugin 介绍

示例项目

如果基于 Vue/React 搭建 mock 环境, 点击下方锚点跳转到对应安装教程

安装

npm i mock-service-plugin --save-dev

参数

new MockServicePlugin(options);
  • options.path mock 数据的存放路径
  • options.port 代理服务器端口,默认为 3000

Mock 文件夹位置

.
├── app         //工程目录
    ├── dist
    ├── config
    ├── src
    ├── mocks    //mock数据目录
    |   ├── data.js
    |   ├── data.json
        ...

Mock 数据

Mock 数据 并非严格的 json 格式数据文件,更像是 js 代码。 当我们只需要返回直接的数据结构,使用如下的 json 格式会显得非常直接,示例data.json如下:

/**
 * @url /login
 * @method POST
 * @title 登录接口
 * @content 说明
 * @param {string} userid
 * @param {string} password
 */
{
	"code": 404,
	"data|5-10": [
		{
			"name": "@cname",
			"id": "@guid",
			"email": "@email"
		}
	],
	"message": "success"
}

对应的文件内容可以这样理解

  • @url: 访问路径 (必填项)
  • @title: 接口名称 (非必填)
  • @method:请求方法 (非必填)
  • @param: 请求参数 (非必填)
  • @content: 页面说明/接口说明/备注

以上 mock 数据的语法均来自 mockjs,想获取更多语法可以参阅 mockjs 官网文档和示例

mock 数据说明文档和功能来源于 52cik/express-mockjs

注意

增加 mock 数据时,在 mock 中新建文件即可,webpack 配置无需更新,但是需要刷新界面

构建 mock 服务

分为三部分讲解:

  • webpack 通用配置
  • Vue 搭建 mock 服务
  • React 搭建 mock 服务
  • vite 构建 mock 服务

webpack 通用配置

在工程目录中增加一个 mocks 文件夹

.
├── app         //工程目录
    ├── dist
    ├── config
    ├── src
    ├── mocks    //mock数据目录
    |   ├── data.js
    |   ├── data.json
        ...

webpack.config.js 中,配置 proxy 和 mock-service-plugin

// 引入插件
const MockServicePlugin = require("mock-service-plugin");

// webpack 配置
module.exports = {
  // 配置插件
  plugins: [
    // 插件的功能是根据配置文件,起一个指定端口的server,将接口请求指向json文件
    new MockServicePlugin({
      // mock数据的存放路径
      path: path.join(__dirname, "./mocks"),
      // 配置mock服务的端口,避免与应用端口冲突
      port: 3000,
    }),
  ],
  // 配置代理,这里的代理为webpack自带功能
  devServer: {
    // 应用端口,避免与mock服务端口冲突
    port: 5001,
    proxy: {
      // 配置匹配服务的url规则,以及其代理的服务地址,即mock服务的地址
      "/": "http://localhost:3000/",
    },
  },
};

如果想要给 mock 服务指定 URL 前缀,你可以在 webpack 的 proxy 设置进行如下配置:

...
module.exports = {
  ...
  // 配置代理,这里的代理为webpack自带功能
  devServer: {
    // 应用端口,避免与mock服务端口冲突
    port: 5001,
    proxy: {
      '/api': {
        target: 'http://localhost:3000/',
        pathRewrite: {
          // 设置url的重写, 实际过程如下:
          // http://localhost:5001/api/getData -> http://localhost:3000/getData
          '^/api': ''
        }
      }
    }
  }
};

Vue 构建 mock 服务

  • 安装 mock-service-plugin

    npm i mock-service-plugin --save-dev
  • vue.config.js 配置 mock-service-plugin

    // 引入插件
    const MockServicePlugin = require("mock-service-plugin");
    
    module.exports = {
      configureWebpack: {
        // 在 plugins 初始化插件
        plugins: [
          // 初始化
          new MockServicePlugin({
            path: path.join(__dirname, "./mocks"), // mock数据存放在 mocks 文件夹中
            port: 9090, // 服务端口号
          }),
        ],
      },
    };
  • 项目根目录下创建 mock 数据文件夹 mocks 如下图 在这里插入图片描述

  • mocks文件夹下创建一个data.json文件 在这里插入图片描述

  • 添加如下数据(一个文件里仅仅放一个接口的 mock 数据,文件名随意)

    /**
     * @url /login
     */
    {
    	"code": 404,
    	"data|5-10": [
    		{
    			"name": "@cname",
    			"id": "@guid",
    			"email": "@email"
    		}
    	],
    	"message": "success"
    }

    说明:

    • 以获取用户信息接口为例( www.example.com/user/info),我们通常会把www.example.com作为 baseUrl ,user/info 作为接口 URL,在 data.json 文件文件中的 /login就相当于user/info (图片懒得换了你们懂就行),

    • 头部注释中的 @url 字段是必须的,当请求发送到 mock 服务器上时, mock 服务会遍历mocks文件夹下所有的.json文件, 将请求 url 与头部注释 @url 中的字段匹配, 匹配成功返回 json 中的数据

  • 添加好以上信息后重启项目 (注意控制台输出) 在这里插入图片描述

  • 在浏览器中打开 http://localhost:9090 在这里插入图片描述

  • 点击左侧列表中 /login 在这里插入图片描述

  • 如果看到上面的页面说明我们 mock 服务搭建成功了,接下来只要把请求发送到 mock 服务器上就可以了下面我们来实现下吧

  • 将请求发送到 http://localhost:9090, 在vue.config.js中配下代理 就可以了

      // 配置代理
      devServer: {
        // 应用端口,避免与mock服务端口冲突
        port: 3000,
        proxy: {
          '/api': {
            target: 'http://localhost:9090/',
            pathRewrite: {
              // 设置url的重写, 实际过程如下:
              // http://localhost:5001/api/getData -> http://localhost:3000/getData
              '^/api': ''
            }
          }
        }
      }
  • 设置 axios 的 baseUrlapi就可以了 这一步很简单,把我的配置贴在下面,根据实际情况自行调整哈 在这里插入图片描述

  • 在项目中使用 在这里插入图片描述

  • 在页面上测试下 在这里插入图片描述

  • Vue 项目的 mock 服务就搭建完成了

React 构建 mock 服务

CRA 官方并没有开放 Webpack 的配置,有两种解决方式,第一种弹出 webpack 配置,第二种社区适配方案,社区适配方案主流有两种 cracocustomize-cra 因为这两种方式都有人用,分别介绍下,建议将 Vue 配置教程详细阅读一遍,主要看配置流程,原理其实都一样

安装 mock-service-plugin

npm i mock-service-plugin --save-dev

craco 配置

// craco.config.js

import path from "path";

import { whenDev } from "@craco/craco";

// mock 插件
import MockServicePlugin from "mock-service-plugin";

const {
  REACT_APP_ENV, // 环境标识
} = process.env;

const pathResolve = (pathUrl) => path.join(__dirname, pathUrl);

module.exports = {
  webpack: {
    plugins: [
      ...whenDev(
        () => [
          // 配置mock服务
          new MockServicePlugin({
            path: path.join(__dirname, "./mocks"),
            port: 9090,
          }),
        ],
        []
      ),
    ],
  },
  devServer: {
    proxy: {
      "/mock": {
        secure: false,
        ws: false,
        target: `http://localhost:9090`,
        changeOrigin: true,
        pathRewrite: {
          "^/mock": "",
        },
      },
    },
  },
};

customize-cra 配置

// config.overrides.js

const path = require("path");

const {
  override, // 覆盖函数
  addWebpackAlias, // 别名配置
  addLessLoader, // less loader
  fixBabelImports, // babel 导入 引入antd-mobile
  addWebpackPlugin, // 增加插件
} = require("customize-cra");

// mock 插件
const MockServicePlugin = require("mock-service-plugin");

const {
  REACT_APP_ENV, // 环境标识
} = process.env;

/**
 * @description: 路径 处理
 * @param {String} pathUrl
 * @return {String} path
 */
const pathResolve = (pathUrl) => path.join(__dirname, pathUrl);

// override
module.exports = {
  webpack: override(
    addWebpackPlugin(
      // 配置mock服务
      new MockServicePlugin({
        path: path.join(__dirname, "./mocks"),
        port: 9090,
      })
    ),
    (config) => {
      return config;
    }
  ),
  devServer: (configFunction) => (proxy, allowedHost) => {
    proxy = {
      "/mock": {
        secure: false,
        ws: false,
        target: `http://localhost:9090`,
        changeOrigin: true,
        pathRewrite: {
          "^/mock": "",
        },
      },
    };
    return configFunction(proxy, allowedHost);
  },
};

Vite 构建 mock 服务

  1. 在项目根目录创建 vite-mock-plugin.ts 文件(文件名随意起)将下面代码粘贴进去
import MockServicePlugin from "mock-service-plugin";
import net from "net";
import path from "path";

function isPortTaken(port: number) {
  return new Promise((resolve) => {
    const server = net.createServer();

    server.once("error", (err: { code: string }) => {
      if (err.code === "EADDRINUSE") {
        resolve(true);
      } else {
        resolve(false);
      }
    });

    server.once("listening", () => {
      server.close();
      resolve(false);
    });

    server.listen(port);
  });
}

// eslint-disable-next-line import/no-default-export
export default function ViteMockServicePlugin(e: string) {
  return {
    name: "ViteMockServicePlugin",
    buildStart() {
      (async () => {
        const port = 3008;
        const portTaken = await isPortTaken(port);
        if (portTaken) {
          console.log(`Port ${port} is already in use`);
        } else {
          if (e === "mock") {
            const ints = new MockServicePlugin({
              // mock 数据的存放路径
              path: path.join(__dirname, "./mocks"),
              // 配置mock服务的端口,避免与应用端口冲突
              port: 3008,
            });
            ints.apply();
          }
        }
      })();
    },
  };
}
  1. 配置 vite.config.ts 文件
import react from "@vitejs/plugin-react";

import ViteMockServicePlugin from "./vite-mock-plugin";

export default defineConfig(({ mode }) => {
  return {
    plugins: [react(), ViteMockServicePlugin(mode)],
  };
});

更新支持

  1. 支持 RESTful API

    /llm/:schema/:type/:id/txt/v2

  2. 支持流式传输

    LLM、 SSE、 EventStream 响应

  3. 以下是流模式及 RESTful api 使用示例

/**
 * @url /llm/:schema/:type/:id/txt/v2
 * RESTful API endpoint for streaming LLM responses
 * 下面是 流模式 响应固定格式,
 * 必须包含 "stream": true,
 * 必须包含 "interval": "100"
 * 其他字段不是必须的,根据 业务需求自定义
 */
{
  "stream": true, // 是否为流模式
  "interval": "@integer(100,500)", // 间隔响应时间
  "items|50": [
    {
      "id": "@increment(1)",
      "data": {
        "id": "@guid",
        "object": "chat.completion.chunk",
        "created": "@now('T')",
        "model": "@pick(['moonshot-v1-8k', 'moonshot-v1-16k', 'moonshot-v1-32k'])",
        "choices": [
          {
            "index": 0,
            "delta": {
              "role": "assistant",
              "content": "@csentence(3,10)"
            },
            "finish_reason": null
          }
        ],
        "system_fingerprint": "fpv0_@string('lower',8)"
      }
    }
  ]
}