react-mockjs
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的更多相关文章
- React之mockjs+sass+生命周期函数
mdn W3C标准网站 运行sass cnpm i -D node-sass-chokidar npm-run-all rem单位设置 <script> //rem单位设置 documen ...
- react实战系列 —— 起步(mockjs、第一个模块、docusaurus)
其他章节请看: react实战 系列 起步 本篇我们首先引入 mockjs ,然后进入 spug 系统,接着模仿"任务计划"模块实现一个类似的一级导航页面("My任务计划 ...
- React笔记_(5)_react语法4
ajax 数据应用场景 在真实的开发环境中,拿到了产品需求,第一件事不是逼着后台开发人员先完成,然后前端再介入开发,这样太浪费时间. 正确的做法是跟后端人员先商量好接口名称,请求参数,返回的数据格式等 ...
- dva + antd + mockjs 实现基础用户管理
1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard [dvadashboard为项目名] 3.安装mockjs ...
- react Context
import React, { useState, useEffect, useContext } from "react"; import axios from "ax ...
- react 使用hooks
react hooks文档 λ yarn add react@16.7.0-alpha.2 λ yarn add react-dom@16.7.0-alpha.2 设置 state import Re ...
- 正确开启Mockjs的三种姿势:入门参考(一)
一.文章初衷 阅读本文章需要注意以下几点: 文章不主要介绍Mockjs的使用语法 文章暂不涉及Mockjs的第三方封装框架 文章会结合以往做过上线项目的方式总结 想主要介绍如何使用Mockjs,是因为 ...
- 【mock】后端不来过夜半,闲敲mock落灯花 (mockjs+Vuex+Vue实战)
mock的由来[假] 赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单 ...
- 手动搭建一个webpack+react笔记
{ "name": "lottery", "version": "1.0.0", "description&q ...
- React项目的最佳实践
项目代码 从零开始简书项目 从我第一次接触vue这个框架已经过了快一年的时间,陪伴我从前端小白到前端工程师,前端时间也是使用了 ts+vue这样的组合写代码,明显感觉vue与ts似乎没有产生比较好 ...
随机推荐
- H3C 高级ACL
- 2018-8-10-win10-uwp-win2d-使用-Path-绘制界面
title author date CreateTime categories win10 uwp win2d 使用 Path 绘制界面 lindexi 2018-08-10 19:17:19 +08 ...
- 2018-12-25-WPF-如何在-WriteableBitmap-写文字
title author date CreateTime categories WPF 如何在 WriteableBitmap 写文字 lindexi 2018-12-25 09:13:57 +080 ...
- Java内存溢出java.lang.OutOfMemoryError: PermGen space
今天把以前的一个项目部署在tomcat,启动没问题.因为用到了webservice,当调用webservice中的方法时一直报内存溢出异常 Exception in thread "http ...
- "技术框架太多,多的眼花缭乱,如何在众多选择中找到自己的方向?
"技术框架太多,多的眼花缭乱,如何在众多选择中找到自己的方向?",经常有人这么问我. 咱们从开源项目说起,可以从两个维度来对开源项目进行分类,一方面是编程语言,另一方面是应用领域. ...
- 【Linux】nl笔记
nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...
- python scrapy爬取前程无忧招聘信息
使用scrapy框架之前,使用以下命令下载库: pip install scrapy -i https://pypi.tuna.tsinghua.edu.cn/simple 1.创建项目文件夹 scr ...
- ML基础——搜索引擎与图书管理,百度与李彦宏
本文始发于个人公众号:TechFlow 谈及机器学习,大家想必会有许多联想,比如最近火热的人工智能,再比如战胜李世石的AlphaGo,甚至还会有人联想起骇客帝国或者是机械公敌等经典机器人电影. 但实际 ...
- 记录安装Python第三方包“tesserocr”的方法和遇到的坑
1. 环境: 系统环境:Win7 32 位系统 Python版本: 3.6.5 虚拟环境为:Miniconda3 2. 共需要安装的模块: a. tesserocr b. tessera ...
- [梁山好汉说IT] 边缘计算在梁山的应用
[梁山好汉说IT] 边缘计算在梁山的应用 0x00 摘要 梁山泊下四个酒店就是边缘计算在梁山的应用,以朱贵南山酒店为例能看出其"计算实时/省流量/具备智能"等各种优点. 0x01 ...