@liuhanfei/mock-service
TypeScript icon, indicating that this package has built-in type declarations

1.0.8 • Public • Published

mock 服务模拟后端接口响应

支持

  • 完全支持 mockjs 语法
  • 支持配置响应延迟

安装

$ npm install @liuhanfei/mock-service -D
$ yarn add @liuhanfei/mock-service -D

方法参数说明

start 启动 mock 服务

参数名 说明 类型 默认值
app 启动的 express 实例 express.Application -
config 额外配置 object -
config
参数名 说明 类型 默认值
timeout 延迟响应时间,必须传入数值或者一个数值范围,范围以 - 分割 例800-1000 number string -
folderName 指定 mock 文件夹名称 string mock

使用

1、请在项目根目录下新建 mock 文件目录
2、请以 http 请求方法命名子目录(如:get、post),支持方法 get、post、delete、put
3、项目中不同的请求方法分别放置对应的以请求方法命名的子目录下,目录下新建 xxx_xxx_xxx.json 文件,书写响应 json 报文,支持以 mockJs 数据模板定义

json 文件命名规范

如果要请求路径为:/get/user/info => get_user_info.json
如果要请求路径本身存在_:/get/user/org_info => get_user_org__info.json
注:除 .json 以外的文件都会忽略

目录规范示例

├── mock
│ ├── get
│ │ ├── xxx_xxx_xxx.json
│ │ └── xxx_xxx_xxx.json
│ ├── post
│ │ ├── xxx_xxx_xxx.json
│ │ └── xxx_xxx_xxx.json

vue 中使用示例

// vue.config.js

const mock = require('@liuhanfei/mock-service');

// 针对 vue-cli&webpack 的不同版本
module.exports = {
  devServer: {
    before(app) {
      // 建议通过环境变量来控制是否开启 mock 服务
      if (process.env.VUE_APP_IS_MOCK === 'true') {
        mock.start(devServer.app, { timeout: '800-1000', folderName: 'mock' });
      }
    }
  }
}


module.exports = defineConfig({
  devServer: {
    setupMiddlewares(middlewares, devServer) {
      if (process.env.VUE_APP_IS_MOCK === 'true') {
        mock.start(devServer.app, { timeout: '800-1000', folderName: 'mock' });
      }
      return middlewares;
    }
  }
})

项目中具体示例参考

https://github.com/LHF678/vue2-project-work-template.git

Readme

Keywords

none

Package Sidebar

Install

npm i @liuhanfei/mock-service

Weekly Downloads

0

Version

1.0.8

License

ISC

Unpacked Size

8.69 kB

Total Files

8

Last publish

Collaborators

  • liuhanfei