前端开发基础:mock挡板数据模拟介绍、安装教程及开发说明

后台-系统设置-扩展变量-手机广告位-内容正文顶部

数据模拟介绍

API服务:

  本项目是NODE.js工程,API服务基于json-server、Mock等工具进行开发,方便前端没有API时,自己模拟数据,无须等待后端同学,从而进行快速开发。

  相关文献:

  •   json-server中文文档地址
  •   json-server英文文档地址
  •   Mock文档地址

API接口文档:

  •   本项目API接口文档根据项目中每个API的注释自动生成,生成API文档基于apidoc.js服务生成静态页面后,项目将启用一个固定的路由(/apidoc),来支持API文档的本地预览。
  •   相关文献:
  •   apidoc文档地址

项目遵循restfulAPI风格进行开发

  •   相关文献
  •   restful规范restful规范

安装教程

  #克隆项目

  #gitclonehttps://gitee.com/enation/mocker.git

  #安装依赖

  npminstall

  #建议不要用cnpm安装会有各种诡异的bug可以通过如下操作解决npm下载速度慢的问题

  npminstall--registry=https://registry.npm.taobao.org

  #启动API服务

  npmrundev

  #生成API文档

  npmrundoc

  #启动API服务&&生成API文档

  npmrundev:doc

开发说明

  1、在根目录下新建album文件夹,在文件夹下新建test.js

  2、引入相关项目依赖

  constjsonServer=require('json-server')

  constMock=require('mockjs');

  constserver=jsonServer.create()

  3、书写符合restfulAPI规范的接口,并基于apidoc规范,书写正确的API注释API路径格式方法|示例|注释---|---增|POST/picture|增加图片删|DELETE/picture/ID|删除某一项图片改|PUT/picture/ID|修改某一项图片查|GET/picture|查询图片列表模拟数据

  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注释文档

  /**

  *@apiVersion0.0.1

  *@api{GET}/picture查询图片列表GET

  *@apiDescription查询图片列表

  *@apiName查询图片列表

  *@apiGroup图片空间

  *

  *@apiHeader{String}AuthorizationTOKEN登陆校验

  *

  *@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,

  *}

  *

  *@apiSampleRequesthttp://localhost:8080/picture

  ***/

 

     4、把写好的API引入到入口文件中(index.js)

  5、用json-server创建的实例,USE它。

  6、重启项目npmrundev:doc

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

后台-系统设置-扩展变量-手机广告位-内容正文底部
留言与评论(共有 0 条评论)
   
验证码: