2020-01-17

react-mockjs 使用

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

用到mock 数据的工具是 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、炒鸡全面的示例:http://mockjs.com/examples.html

5、一个很详细的解释:https://www.jianshu.com/p/9dbcfbe6130f

react-mockjs的更多相关文章

  1. React之mockjs+sass+生命周期函数

    mdn W3C标准网站 运行sass cnpm i -D node-sass-chokidar npm-run-all rem单位设置 <script> //rem单位设置 documen ...

  2. react实战系列 —— 起步(mockjs、第一个模块、docusaurus)

    其他章节请看: react实战 系列 起步 本篇我们首先引入 mockjs ,然后进入 spug 系统,接着模仿"任务计划"模块实现一个类似的一级导航页面("My任务计划 ...

  3. React笔记_(5)_react语法4

    ajax 数据应用场景 在真实的开发环境中,拿到了产品需求,第一件事不是逼着后台开发人员先完成,然后前端再介入开发,这样太浪费时间. 正确的做法是跟后端人员先商量好接口名称,请求参数,返回的数据格式等 ...

  4. dva + antd + mockjs 实现基础用户管理

    1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard   [dvadashboard为项目名]       3.安装mockjs ...

  5. react Context

    import React, { useState, useEffect, useContext } from "react"; import axios from "ax ...

  6. react 使用hooks

    react hooks文档 λ yarn add react@16.7.0-alpha.2 λ yarn add react-dom@16.7.0-alpha.2 设置 state import Re ...

  7. 正确开启Mockjs的三种姿势:入门参考(一)

    一.文章初衷 阅读本文章需要注意以下几点: 文章不主要介绍Mockjs的使用语法 文章暂不涉及Mockjs的第三方封装框架 文章会结合以往做过上线项目的方式总结 想主要介绍如何使用Mockjs,是因为 ...

  8. 【mock】后端不来过夜半,闲敲mock落灯花 (mockjs+Vuex+Vue实战)

      mock的由来[假]   赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单 ...

  9. 手动搭建一个webpack+react笔记

    { "name": "lottery", "version": "1.0.0", "description&q ...

  10. React项目的最佳实践

    项目代码 从零开始简书项目 ​ 从我第一次接触vue这个框架已经过了快一年的时间,陪伴我从前端小白到前端工程师,前端时间也是使用了 ts+vue这样的组合写代码,明显感觉vue与ts似乎没有产生比较好 ...

随机推荐

  1. uni-app学习记录04-轮播图和滑屏图片

    <template> <view> <!-- 轮播图视图 swiper-item是每页的元素 --> <swiper :indicator-dots=&quo ...

  2. WPF 使用 Composition API 做高性能渲染

    在 WPF 中很多小伙伴都会遇到渲染性能的问题,虽然 WPF 的渲染可以甩浏览器渲染几条街,但是还是支持不了游戏级的渲染.在 WPF 使用的 DX 只是优化等级为 9 和 DX 9 差不多的性能,微软 ...

  3. 2018-8-10-win10-uwp-Window.Current.Dispatcher中Current为null

    title author date CreateTime categories win10 uwp Window.Current.Dispatcher中Current为null lindexi 201 ...

  4. 微软软件开发技术二十年回顾-MFC篇

    三. MFC篇 Windows API是面向过程的接口,因此对于当时的编程技术来说,它是完美无缺的.但是,随着人们逐渐使用C++进行Windows程序的开发,迫切需要建立与Windows API的面向 ...

  5. 闲着没事,做个chrome浏览器插件,适合初学者

    时光偷走的,永远都是我们眼皮底下看不见的珍贵. 本插件功能:替换掉网页中的指定图片的src地址. 使用插件前: 使用插件后: 鲜花(闲话):这个网站的不加水印的图片连接被保存在,图片的data-ima ...

  6. hadoop fs、hadoop dfs与hdfs dfs命令的区别

    Hadoop fs:使用面最广,可以操作任何文件系统. hadoop dfs与hdfs dfs:只能操作HDFS文件系统相关(包括与Local FS间的操作),前者已经Deprecated,一般使用后 ...

  7. 6.ChannelPipeline

    pipeline和handler ChannelPipline ChannelHandler ChannelHandlerContext pipeline的初始化 handler的添加和删除 hand ...

  8. 深入ThreadLocal的底层实现机制以及对应的使用风险

    学习Java中常用的开源框架,Mybatis.Hibernate中线程通过数据库连接对象Connection,对其数据进行操作,都会使用ThreadLocal类来保证Java多线程程序访问和数据库数据 ...

  9. 014 Ceph管理和自定义CRUSHMAP

    一.概念 1.1 Ceph集群写操作流程 client首先访问ceph monitor获取cluster map的一个副本,知晓集群的状态和配置 数据被转化为一个或多个对象,每个对象都具有对象名称和存 ...

  10. 跌宕起伏的java帝国史,剖析谷歌甲骨文长达8年的版权战争

    这篇博文是我在B站上发的一个科普java的视频文案整理,本来发过一次了,但是有几种不严谨的地方只能删掉重新发了一下,内容如标题,感兴趣的码农朋友可以观看视频的版本,欢迎提提意见啥的,感谢~https: ...