react mock_vue mock数据

react mock_vue mock数据前言在开发项目时,前端需要和后端对接数据,但有时后端并没有写好数据,前端还需要继续往下开发,这时候就需要mock数据了。如何mock数据?如下代码,在input获得焦点时调用getList()方法。constmapDispathToProps=(dispatch)=>{return{handleInputFocus(){…

前言

在开发项目时,前端需要和后端对接数据,但有时后端并没有写好数据,前端还需要继续往下开发,这时候就需要mock数据了。

如何mock数据?

如下代码,在input获得焦点时调用getList()方法。

const mapDispathToProps = (dispatch) => { 
   
    return { 
   
        handleInputFocus() { 
   
            dispatch(actionCreators.getList())
        }
    }
}

getList()方法是通过Ajax获取数据,此时后端并没有写好,所以自己mock一个数据。

export const getList = () => { 
   
    return (dispatch) => { 
   
        axios.get('/api/headerList.json').then((res) => { 
   
            const data = res.data;
            console.log(data)
        }).catch(() => { 
   
            console.log('error')
        })
    }
}

axios.get('/api/headerList.json')这句代码,计算机会首先去src目录下寻找/api/headerList.json,没有找到然后去public目录下找,此时我们在public目录下建立/api/headerList.json文件,文件如下:

{ 
   
    "success":true,
    "data":["微信","支付宝","蚂蚁金服","被骗","借呗","诈骗","盗窃","pandas","TensorFlow","PyTorch","Caffe","scikit-learn","Python","Keras","pyecharts","ggplot","Matplotlib","Gensim","Bokeh","Theano","Scrapy","SciPy","Plotly","NumPy","XGBoost","是","他","有","光大永明","我","要","人","Android","女","大","不","着","男","它","二","于","中","java","把","上","这","下","的","了","来"]
}

此时返回的数据就是以上数据,通过console.log(res.data)打印数据如下图:
在这里插入图片描述

这样mock数据就成功了。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/222871.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • seq2seq模型以及其tensorflow的简化代码实现

    seq2seq模型以及其tensorflow的简化代码实现

    2021年11月19日
  • id门禁卡复制到手机_门禁卡复制到苹果手机

    id门禁卡复制到手机_门禁卡复制到苹果手机大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答。门禁卡复制到苹果手机的步骤如下:1、首先读取卡的ID,并安装“NFCTagInfo”,打开手机的NFC设置,门禁卡贴到手机后盖NFC部分,“NFCTagInfo”读取校园卡ID。可以看到“我的卡”ID号码。2、其次修改手机NFC的ID。随即打开R.E.管理器,根目录etc,找到etc文件夹中的“libnfc-nxp.conf”…

    2022年5月1日
  • Servlet学习笔记-Servlet工作原理和过程

    Servlet学习笔记-Servlet工作原理和过程1、前言  JavaServlet技术简称Servlet技术,是Java开发Web应用的底层技术。由Sun公司于1996年发布,用来代替CGI——当时生成Web动态内容的主流技术。官方文档对Servlet的概述,请参考《Servlet的概述》。2、关键词ServletServlet是JavaEE规范的一种,主要是为了扩展Java作为Web服务的功能。为了方便第三方准守这种规范,Sun公…

    2022年10月5日
  • eplan永久激活码【2021免费激活】「建议收藏」

    (eplan永久激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月26日
  • 圆柱体体积的计算公式圆柱体积的计算公式_空心圆柱重量计算公式

    圆柱体体积的计算公式圆柱体积的计算公式_空心圆柱重量计算公式圆柱的体积计算公式同仁实验学校各年级组备课教师教案教案设计课题教学内容年级六年级科目圆柱体积的计算公式数学教案类型新授P25页例5及补充例题,完成“做一做”及练习五第1~3题。授课人1、通过用切割拼合的方法借助长方体的体积公式推导出圆柱的体积公式,能够运用公教学目标式正确地计算圆柱的体积和容积。2、初步学会用转化的数学思想和方法,解决实际问题的能力。3、渗透转化思想,培养…

    2022年9月20日
  • 【Windows】Windows10 更新报错的解决方案[通俗易懂]

    【Windows】Windows10 更新报错的解决方案[通俗易懂]本文记录安装Windows10Pro后遇到的无法获得更新的问题的解决方案.Windows10系统更新报错0x8024401c,该方案也适用于其他Windows10发行版和错误代码.

    2022年6月5日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号