使用axios获取本地json数据

第一步:在已有的vue项目中安装axios命令

npm install --save axios

第二步:在main.js里导入下面的代码

import axios from 'axios'

第三步:在static文件夹下添加testData文件夹,在这个文件夹下添加data.json文件

第四步:在需要数据的页面引入axios,异步加载数据

import axios from 'axios';
export default {
	name:"",
	data() {
		return{}
	},
	mounted(){
		this.loadData();
	},
	methods:{
		async loadData(){
			await axios.get("http://localhost:8080/static/testData/data.json").then(res =>{
			console.log(res);
			})
		}
	}
}

使用axios获取本地json文件,报404错

昨天刚写的文章,使用axios获取到本地json文件,今天重启项目莫名其妙就报错了

又查询了一番,折腾了几个小时,找不出原因。重新百度了一番,最终解决。但是再下次运行是否还会报错,不太确定,毕竟没有找到最终的原因。

解决方案:main.js里

import axios from "axios";
Vue.prototype.axios = axios;

json文件存放在public文件夹下

在要用到的页面上

网上的教程一直都有要在main.js里加那两行代码,但是我发现我注掉的话也不影响结果。

所以尝试的时候还是按自己的来,能出来效果就行

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

vue里的axios如何获取本地json数据的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. android – 在Google Play的Billing API v3中解决耗材的API购买逻辑缺陷(与使用API​​ v3的消耗品的每个人相关)

    )添加到GooglePlay并将第一个列表中的第2步更改为:可以非常轻松地解决此问题:>使用购买ID作为开发人员有效负载,使用getBuyIntent为集合中的下一个可用SKU启动购买流程.关于黑客行为的说明:>通过FreedomAPK或类似产品完成虚假购买:这些应用程序基本上冒充GooglePlay商店完成购买.要检测它们,需要在购买收据中包含verifythesignature并拒绝未通过支票的购买,大多数应用程序都不会这样做.大多数情况下问题解决了.>通过GameKiller或类似方式

  3. android – 在Mac上查看本地网络服务器,具有计算机名称,而不是IP

    解决方法简而言之,没有Android设备将无法通过.local地址默认访问您的Mac.OnMacs,“本地”通常会通过mDNS来解决.Android操作系统没有对mDNS的内置支持.Android通过标准DNS解析域名,除非您运行自己的本地DNS服务器,否则不会解析您的本地网络地址.Android设备要么使用ISP的DNS服务器,要么转发到ISP的路由器DNS服务器.

  4. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  5. vue使用动画实现滚动表格效果

    这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. 关于Vue 监控数组的问题

    这篇文章主要介绍了Vue 监控数组的示例,主要包括Vue 是如何追踪数据发生变化,Vue 如何更新数组以及为什么有些数组的数据变更不能被 Vue 监测到,对vue监控数组知识是面试比较常见的问题,感兴趣的朋友一起看看吧

  7. Vue子组件props从父组件接收数据并存入data

    这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. 解决axios:"timeout of 5000ms exceeded"超时的问题

    这篇文章主要介绍了解决axios:"timeout of 5000ms exceeded"超时的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  9. Vue h函数的使用详解

    本文主要介绍了Vue h函数的使用详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. VUE响应式原理的实现详解

    这篇文章主要为大家详细介绍了VUE响应式原理的实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部