本文摘自PHP中文网,作者coldplay.xixi,侵删。
react mock数据的方法:首先在public目录下建立【/api/headerList.json】文件;然后加入相关代码【axios.get('/api/headerList.json')】。
本教程操作环境:windows7系统、React17版、thinkpad t480电脑。
react mock数据的方法:
如下代码,在input获得焦点时调用getList()
方法。
1 2 3 4 5 6 7 |
|
getList()方法是通过Ajax获取数据,此时后端并没有写好,所以自己mock一个数据。
1 2 3 4 5 6 7 8 9 10 |
|
axios.get('/api/headerList.json')
这句代码,计算机会首先去src目录下寻找/api/headerList.json,没有找到然后去public目录下找,此时我们在public目录下建立/api/headerList.json文件,文件如下:
1 2 3 4 |
|
此时返回的数据就是以上数据,通过console.log(res.data)
打印数据如下图:
相关阅读 >>
更多相关阅读请进入《React》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者