vue脚手架用axios请求本地数据
首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的json数据,之后用axios请求过来,渲染到页面上。
1、cnpm install axios --save (在终端安装 上axios,我是用的淘宝镜像安装的)
2、哪个组件使用axios方法请求数据,就在哪个组件里面引入,不用在main.js里面引入,不用改原型链
在组件的script标签内写: import axios from ‘axios’
3、在组件的methods配置项里使用axios
methods:{
fn(){
axios.get('url').then(function(res){
console.log(res.data)
}).catch(function(err){
console.log(err)
})
}
}
注意:在本地放置自己的json文件时,一定要放在项目的static文件夹下,因为static文件时,vue脚手架暴露在外面的静态文件,放在其他文件内用相对路径或绝对路径是访问不到的,这一点需要注意,踩了一下午坑,终于请求到本地的json数据了。
vue脚手架用axios请求本地数据的更多相关文章
- vue 在发送axios请求时数据渲染问题
这是我请求的json格式的数据 一开始在vue用普通的数据渲染,更改为vue后使用v-for 发现没办法渲染上去了. obj.data就是以上数据. 必须加上这三行给this随意赋个值,神奇的事情就会 ...
- VUE请求本地数据的配置json-server
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- ajax和axios请求本地json数据对比
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
- vue使用axios请求后端数据
1. 安装axios $ npm install axios 2.在main.js里面导入axios import axios from 'axios' Vue.prototype.$http = a ...
- vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)
最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...
- axios请求本地的json文件在打包部署到子目录域名下,路径找不到
前言: 因为要同时部署两个项目,有一个是部署到域名下面的子目录下,如:https://xxx.com/siot-admin vue 项目中使用axios请求了本地项目的static文件夹下的json文 ...
- 解决axios请求本地的json文件在打包后路径出错问题
vue 项目中使用axios请求了本地项目的static文件夹下的json文件,使用npm run build 打包后,在Hbuilder编辑器打开,页面报错404: 在浏览器打开的路径 http:/ ...
- vue使用axios请求本地json文件出现404
之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下 位置根据json文件决定,但是必须是http://localhost:断口号
随机推荐
- 水塘抽样(Reservoir Sampling)问题
水塘抽样是一系列的随机算法,其目的在于从包含n个项目的集合S中选取k个样本,其中n为一很大或未知的数量,尤其适用于不能把所有n个项目都存放到主内存的情况. 在高德纳的计算机程序设计艺术中,有如下问题: ...
- Java知多少(5) Java开发环境的搭建
要进行Java开发,首先要安装JDK(Java Development Kit,Java开发工具箱). JDK 是一系列工具的集合,这些工具是编译Java源码.运行Java程序所必需的,例如JVM.基 ...
- Go指南_切片的长度与容量
源地址 https://tour.go-zh.org/moretypes/11 一.描述 切片拥有 长度 和 容量. 切片的长度就是它所包含的元素个数. 切片的容量是从它的第一个元素开始数,到其底层数 ...
- mysql设置对外访问
报错:Host is not allowed to connect to this MySQL server解决方法 先说说这个错误,其实就是我们的MySQL不允许远程登录,所以远程登录失败了,解决方 ...
- java.util.Stack(栈)的简单使用
import java.util.Stack; import org.junit.Before; import org.junit.Test; /** * Stack(栈)继承了Vector类,底层实 ...
- Markdown 标题
用 Markdown 书写时,只需要在文本前面加上 # 即可创建标题,Markdown 支持六级标题,语法及效果如下 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五 ...
- C# 反射(Reflection)
什么是反射 发射是 .net framework 提供的一个帮助类库,用于读取和使用元数据. 用到的类:System.Reflection,System.Type.System.Type 类对于反射起 ...
- iOS - 标准时间与时间戳相互转换
做倒计时后台传的不是时间戳,是时间然后需要与系统时间对比得出时间戳进行倒计时显示 #pragma mark -- 倒计时 // 倒计时时间 NSString* timeStr = task.recei ...
- day10 多媒体(文字 图片 音频 视频)
1计算机表示图形的几种方式 bmp:以高质量保存 用于计算机 jpg:以良好的质量保存 用于计算机或者网络 png:以高质量保存 图片大小的计算公式:图片 ...
- amcharts去除版权标志
打开amcharts.js, 查找drb, 找到后,将drb:function(){......}程序{}中间内容清空, 或者改成drb:function(){return;}