欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react-mockjs

程序员文章站 2022-05-18 19:07:51
2020-01-17 react-mockjs 使用 最近参加了公司的一个新的项目,前后端同时开发,这时后端提供不了前端接口,那么就要靠咱们前端自己mock数据啦。 用到mock 数据的工具是 mockjs ,就是这个。 这里是github地址:https://github.com/nuysoft/ ......

2020-01-17

react-mockjs 使用

最近参加了公司的一个新的项目,前后端同时开发,这时后端提供不了前端接口,那么就要靠咱们前端自己mock数据啦。

用到mock 数据的工具是 mockjs ,就是这个。

react-mockjs

 

 

 这里是github地址:https://github.com/nuysoft/mock/wiki/getting-started

 

# 安装
npm install mockjs

 

# 导入 mockjs
import mockjs from 'mockjs';

 

const proxy = {'get /api/getuser': (req, res) => res.send(mockjs.mock({   // /api/getuser 是我需要访问的接口名称
    "code": 0,
    "content|1": [{    // content|1 content 是我最终想要拿到的数据  1是指生成一个content  
       "id|+1": 1,
"name": "@cname",
"job|1": ["前端工程师", "前端助理", "前端专家", "运维专家", "后端工程师"],
"jobnum|1": [1, 12, 34, 56, 23, 45, 56, 34, 56, 77, 4, 321, 443, 654, 231],
"date": "@date",
"jobhour": "@integer",
  }],
 success: true,
message: '123',
})) }
export default delay(proxy, 1000); 

 

mockjs 有很多方便之处,它的规范和用法官网写的很清楚,去官网看哦

1、安装:https://github.com/nuysoft/mock/wiki/getting-started

2、规范:https://github.com/nuysoft/mock/wiki/syntax-specification

3、占位符@xxx规范:https://github.com/nuysoft/mock/wiki/mock.random

4、炒鸡全面的示例:

5、一个很详细的解释:

推荐阅读