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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • navicat 激活码【2021免费激活】

    (navicat 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlS32PGH0SQB-eyJsa…

    2022年3月26日
  • 如何传输大文件(GB级别)

    如何传输大文件(GB级别)一、拆分:压缩工具,压缩并拆分为多个小文件。二、QQ离线传输QQ离线文件有限制条件:1.离线传送的文件,为用户保存7天,逾期接收方不接收文件,系统将自动删除该文件;2.离线传送的文件,单个文

    2022年7月4日
  • 常用的DNS服务器_国内目前最快的DNS

    常用的DNS服务器_国内目前最快的DNS北京联通      202.106.0.20   202.106.196.115阿里              223.5.5.5 223.6.6.6114              114.114.114.114南方电信      180.153.225.136百度              180.76.76.76360                 101.226….

    2022年9月3日
  • Flake8_quakemaker

    Flake8_quakemakerFlake8简介转载自:http://www.malike.net.cn/blog/2013/10/23/flake8-tutorial/| COMMENTSFlake8包装了下列工具:PyFlakes:静态检查Python代码逻辑错误的工具。pep8:静态检查PEP8编码风格的工具。NedBatchelder’sMcCabescript:静态

    2022年9月13日
  • 遗传算法经典实例matlab代码_退火算法与遗传算法

    遗传算法经典实例matlab代码_退火算法与遗传算法经典遗传算法及简单实例(MATLAB)1.遗传算法简单介绍1.1理论基础1.2算法要点1.1编码1.2适应度函数1.3基本流程2.雪兔实例1.遗传算法简单介绍1.1理论基础整个算法的基础就是达尔文的生物进化论,“物竞天择,适者生存”这句话已经是常识了。雪兔的故事:东北那旮瘩,有群原始雪兔,刚从未知物种进化而来,五颜六色(表现型)漂亮极了,称之为I(0)。(注意:种群初始化)入夏了,雪兔们出来觅食,浅色兔在草地中无所遁形,被雪狐收割了一波(大批浅色+小批深色)。入冬了,雪

    2022年9月13日
  • linux时间戳转换成日期格式_数据库时间戳转换成时间

    linux时间戳转换成日期格式_数据库时间戳转换成时间//ConvertUnixtimestamptonormaldatestylepublicStringTimeStamp2Date(StringtimestampString){Longtimestamp=Long.parseLong(timestampString)*1000;Stringdate=newjava.text.S…

    2022年10月2日

发表回复

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

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