跳到主要内容

mock挡板

数据模拟 介绍​

介绍​

  • API服务：
    • 本项目是NODE.js工程，API服务基于 json-server、Mock 等工具进行开发，方便前端没有API时，自己模拟数据，无须等待后端同学，从而进行快速开发。
    • 相关文献：
    • json-server 中文文档地址
    • json-server 英文文档地址
    • Mock 文档地址
  • API接口文档：
    • 本项目API接口文档根据项目中每个API的注释自动生成，生成API文档基于apidoc.js服务生成静态页面后，项目将启用一个固定的路由(/apidoc)，来支持API文档的本地预览。
    • 相关文献：
    • apidoc 文档地址
  • 项目遵循 restful API 风格进行开发

安装教程​

# 克隆项目
# git clone https://gitee.com/enation/mocker.git

# 安装依赖
npm install
       
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 启动API服务
npm run dev

# 生成API文档
npm run doc

# 启动API服务 && 生成API文档
npm run dev:doc

开发说明​

  1. 在根目录下新建album文件夹，在文件夹下新建 test.js
  2. 引入相关项目依赖
    const jsonServer = require('json-server')
    const Mock = require('mockjs');
    const server = jsonServer.create()
3.  书写符合 restful API 规范的接口，并基于 apidoc 规范，书写正确的API注释
`API路径格式`
    方法 |  示例  |  注释
    --- | --- 
     增  |  POST /picture  |   增加图片
     删  |  DELETE /picture/ID  |  删除某一项图片
    改  |  PUT /picture/ID  |  修改某一项图片
    查  |  GET /picture  |  查询图片列表
`模拟数据`
  ```javascript
  server.get('/picture', (req, res) => {
  const { page_size = 12, page_no = 1, group_id } = req.query
  const key = `data|${page_size}`

  let data = Mock.mock({
    [key]: [{
      'id|+1': (page_no - 1) * page_size,
      'image_name': '@ctitle(5,10).jpg',
      'group_id': group_id ? group_id : '@integer(1, 3)',
      'image_url': `@image(330x330, @color())`
    }],
    "page_size": page_size,
    "page_no": page_no,
    "data_total": group_id ? '@integer(30, 50)' : 130
  })
  res.send(data);
});

API注释文档

/**
* @apiVersion 0.0.1
* @api {GET} /picture 查询图片列表 GET
* @apiDescription 查询图片列表
* @apiName 查询图片列表
* @apiGroup 图片空间
*
* @apiHeader {String} Authorization TOKEN 登陆校验
*
* @apiParam {Number} page_size 分页大小
* @apiParam {Number} page_no 第几页
* @apiParam {Number} group_id 分组ID
*
* @apiSuccess {String} id 图片ID
* @apiSuccess {String} image_name 图片名字
* @apiSuccess {Number} group_id 分组ID
* @apiSuccess {String} image_url 图片地址
*
* @apiSuccessExample {json} Success-Response:
* {
*  data: {
*    id: 1,
*    image_name: "随机名字",
*    group_id: "分组ID",
*    image_url: "图片地址",
*  },
*  page_size: 10,
*  page_no: 1,
*  data_total: 1,
* }
*
* @apiSampleRequest http://localhost:8080/picture
* **/
  1. 把写好的API引入到入口文件中(index.js)
  2. 用json-server创建的实例，USE 它。
  3. 重启项目 npm run dev:doc