create-react-app项目使用假数据
做新项目的时候,前端每次要等后端接口准备好再开始,就会延期,等后端接口准备好了,前端这边的项目又会相互紧张,如果前端跟后端同时进行,前期将框架,基础做好,定好接口文档,前端在后端没准备好接口的时候使用假数据,等后端接口准备好,前端项目也已经完成的差不多,就剩下联调,这样一个工程完成,大大减少了时间
接入假数据,两个方向,如果需要假数据,走假数据,不需要,走真实路径,首先需要一个配置文件
/**
* 用假数据还是真实数据的配置
* isMock 配置是否使用假数据,true表示使用家数据,false表示不使用假数据
*/
let mockPort = 3000;
export default {
isMock: true,
mockHost: 'http://localhost:' + mockPort,
mockPort: mockPort
};
后期是走假数据还是真实数据,只要在这里配置就好了
然后在请求页面做区分
import ApiList from './api.js';
import config from './config.js'; const isMock = !!config.isMock; //api的请求
let apiCall = (api, params, success, fail) => {
let options = ApiList[api];
fetch(isMock ? '../mock_ajax/'+api+'.json': options.url).then((res) => {
success(res);
}).catch(function(error){
fail(error);
});
}
这里看到,如果是假数据,走mock_ajax文件加里面的json文件,如果是真实,走真实网路请求
这里遇到一个坑,假数据里面的json文件等静态资源需要放在public文件夹里面才能访问
上面的apilist是集合所有api的地方,根据业务的api传递,配置请求参数
create-react-app项目使用假数据的更多相关文章
- create react app 项目部署在Spring(Tomcat)项目中
网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- 用weex create 创建app项目 报 ERROR in index.web.js from UglifyJs 错误!
用weex create创建一个APP项目,安装依赖后运行报 这个是package.json index.web.js 在dist目录下是build时生成的. 上面的答案没有给大家细节,不好意思致歉下 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
随机推荐
- 爬虫(GET)——爬取多页的html
工具:python3 目标:将编写的代码封装,不同函数完成不同功能,爬取任意页数的html 新学语法:with open as 除了有更优雅的语法,with还可以很好的处理上下文环境产生的异常. # ...
- css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
- Java基础03-类型转换
1.自动转换 int->double char->String 例:double a=10; 2.强制类型转换 (类型名)表达式 注意:String不能强制转化为char public c ...
- WEBAPI测试
测试 #region 测试 [HttpPost] public HttpResponseMessage UserData(int userId, string userName) { var user ...
- java 通过反射获取和设置对象属性值
public static Object parseDate(Object object){ SimpleDateFormat sdf = new SimpleDateFormat("yyy ...
- AFNetworking 3.0修改指南
AFNetworking是一款在OS X和iOS下都令人喜爱的网络库.为了迎合iOS新版本的升级, AFNetworking在3.0版本中删除了基于NSURLConnectionAPI的所有支持.如果 ...
- 连接Mysql时出现java.math.BigInteger cannot be cast to java.lang.Long问题
今天遇见这样一个坑.在连接数据库进行查询数据时,大家可能会遇见这样一个问题:java.math.BigInteger cannot be cast to java.lang.Long,然后去检查代码中 ...
- Spring-cloud之Ribbon负载均衡的使用及负载均衡策略配置(与Eurka配合使用)
什么是Ribbon,ribbon有什么用,个人先总结一下(不正确请提出讨论):Ribbon是基于客户端的负载均衡器,为我们提供了多样的负载均衡的方案,比如轮询,最小的并发请求的server,随机ser ...
- maven课程 项目管理利器-maven 3-3 maven中的坐标和仓库
本节主要讲了两大方面: 1 maven坐标 1.0 构件定义 任何依赖,插件,项目构建输出 都称之为构件. 1.1 maven坐标概念 groupid 公司或组织的域名倒序+当前项目名称 artif ...
- thinkphp中怎么判断是手机端访问还是pc端访问?
function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) r ...