React项目配置5(引入MockJs,实现假接口开发)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React项目配置1(如何管理项目公共js方法)---2018.01.11

2、React项目配置2(自己封装Ajax)---2018.01.12

3、React项目配置3(如何管理项目API接口)---2018.01.15

4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16

5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17

6、React项目配置6(前后端分离如何控制用户权限)---2018.01.18

7、React项目配置6(ES7的Async/Await的使用)---2018.01.19(新增)

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

产品把需求文档、原型搞好了,UI 设计图也搞好了,该开发了!前端啪啪啪的写完了页面,需要数据调试,发现后端还在设计数据库!哈哈,写的有点极端了!

真实情况是前后端是需要对下接口设计的,一般在局域网会有个wiki平台,后端用来写接口文档,当然也可以是其他方式。总之后端在写完接口文档之后,最好叫前端过来给讲解一下。也有的是前端写接口文档,后端照着文档开发,但很少这种情况,目前国内还是后端老大!

接口设计完了,但是后端开发还需要一些时间。前端需要调试咋办?前端闲着?如果你想闲着就先闲着!如果不想闲着,一般前端会根据接口文档写一些静态假数据,但是写完了,将来还得删,反正会遇到很多问题!今天我们就来讲下如何用Mock.js来模拟假数据!

以上废话大家可以不用看,各家有各家的流程!

进入正题!

1、首先还是先安装依赖

npm i -D mockjs

2、新建mock文件夹

在根目录下新建mock文件夹,并建立todolist.js

3、编写mock

import Mock from 'mockjs';

Mock.mock(/\/todoList.mock/, {
    'code': 0,
    'data': {
        'list|1-10': [{
            // 属性 id 是一个自增数,起始值为 1,每次增 1
            'id|+1': 1,
            'title': '前端人人@id',
            'status': 1
        }]
    },
    'message': '操作成功',
    'systemDate': new Date().getTime()
});

具体的编写方法我就不讲了,大家可以去官网查看:

http://mockjs.com/

4、引入mock

修改apiManager.js

import cookie from 'react-cookie'

if (process.env.NODE_ENV === 'development') {
    require('../../../mock/todoList')
}

let token = cookie.load('token');
let postApi = (path, mock) => {
    return path + (mock ? '' : '.mock') + '?token=' + token;
};
export default {
    "newsList": postApi("/api/order/news"),
    "newsList2": postApi("/api/newsList2"),
    "todoList": postApi("/todoList", 0)
}

下面这段代码意思是,在开发环境下,引入mock

if (process.env.NODE_ENV === 'development') {
    require('../../../mock/todoList')
}

postApi方法接收两个参数,接口地址及是否需要mock数据,0需要,1不需要

"todoList": postApi("/todoList", 0)

当为0的时候

return path + (mock ? '' : '.mock') + '?token=' + token;

会返回 /todoList.mock地址,就会被 mock -> todoList.js 中的 假数据命中,ajax会被拦截!使用假数据!

5、测试一下

先打开demo2->TodoList.jsx

引入 apiRequest

我们看下浏览器,没有获取到假数据

我们把 todoList 改成0,让他获取mock假数据

再看下浏览器

ok,请求被拦截,并获取到了mock假数据!!!

所以调试完,记得把它改成1哦!

真假接口切换也不知道有没有其他好的办法,有的话,记得分享给我们哦!

如果你有什么问题,可以在下方留言给我们!

本文分享自微信公众号 - 前端人人(frontend_everyone)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-01-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

react+redux+webpack教程2

先弄个什么例子呢?如果是现代的MVVM框架,可能会用双向绑定来吸引你。那react有双向绑定吗? 没有。 也算是有吧,有插件。不过双向绑定跟react不是一个路...

35170
来自专栏IT大咖说

一场由React引发的前后端分离架构的思考

摘要 以React技术栈为主分享我们在大规模企业应用建设过程中遇到的问题,对前后端分离架构的思考,前后端分离的技术方案,前后端分离过程中的实践经验,前后端分离带...

1.2K60
来自专栏互联网杂技

React中的-- 数据流

简介 React的组件简单理解起来其实就是一个函数,这个函数会接收props和state作为参数,然后进行相应的逻辑处理,最终返回该组件的虚拟DOM展现。在Re...

43090
来自专栏IT大咖说

Redux助力美团点评前端进阶之路

摘要 都说Redux好,但Redux到底好在哪,它真的解决了业务中遇到的问题吗? 因为在业务中引入Redux而带来的额外成本是否让你苦恼过? 会不会是我们打开R...

35940
来自专栏互联网杂技

React数据流和组件间的通信总结

首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。 先介绍单向数据流吧。 React单向数据流:   React是单向数据流,数据主要...

43170
来自专栏互联网杂技

如何学习用Typescript写Reactjs?

首先扫盲一下,先从搭建环境开始: 1.安装node,因为ts的编译器是js/ts写的; 安装node后同时获得npm命令,这是nodejs世界里的包管理器...

729120
来自专栏互联网杂技

react+redux+webpack教程5

现在项目已经有了,但是要把它放到生产环境中还是有些事情要做,在这最后一节,来把它们一一搞定。 这一节其实更多是关于webpack的内容。不过要想把react用得...

364110
来自专栏互联网杂技

React -- 组件间通信

分为三种类型的通信关系: 1、父组件向子组件通信 2、子组件向父组件通信 3、没有嵌套关系的组件之间的通信 父组件向子组件通信 父组件通过子组件的prop...

47270
来自专栏互联网杂技

react+redux+webpack教程4

接着上回新闻搜索的例子。现在我们要通过路由进入一个新的页面来查看新闻详细内容。 react和路由并没有什么直接关系,用什么路由都可以。不过使用react-rou...

391100
来自专栏灯塔大数据

塔荐 | 2018 年最值得关注的 JavaScript 趋势

前言 JavaScript 渗透的范围越来越广,它能做的事情已经远不止前端开发而已。不久前stateofjs.com刚刚发布了 2017 JavaScript ...

37280

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励