首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的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请求本地数据的更多相关文章

  1. vue 在发送axios请求时数据渲染问题

    这是我请求的json格式的数据 一开始在vue用普通的数据渲染,更改为vue后使用v-for 发现没办法渲染上去了. obj.data就是以上数据. 必须加上这三行给this随意赋个值,神奇的事情就会 ...

  2. VUE请求本地数据的配置json-server

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  3. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  4. ajax和axios请求本地json数据对比

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...

  5. vue使用axios请求后端数据

    1. 安装axios $ npm install axios 2.在main.js里面导入axios import axios from 'axios' Vue.prototype.$http = a ...

  6. vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)

    最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...

  7. axios请求本地的json文件在打包部署到子目录域名下,路径找不到

    前言: 因为要同时部署两个项目,有一个是部署到域名下面的子目录下,如:https://xxx.com/siot-admin vue 项目中使用axios请求了本地项目的static文件夹下的json文 ...

  8. 解决axios请求本地的json文件在打包后路径出错问题

    vue 项目中使用axios请求了本地项目的static文件夹下的json文件,使用npm run build 打包后,在Hbuilder编辑器打开,页面报错404: 在浏览器打开的路径 http:/ ...

  9. vue使用axios请求本地json文件出现404

    之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下   位置根据json文件决定,但是必须是http://localhost:断口号

随机推荐

  1. 为app录制展示gif

    已同步更新至个人blog:http://dxjia.cn/2015/07/make-gif-for-app/ 在github上好多不错的开源项目展示demo的时候,都是采用了一个gif图片,很生动具体 ...

  2. python安装模块

    pychram安装模块,非常简单!

  3. 设计模式-行为型模式,python访问者模式

    访问者模式 在访问者模式(Visitor Pattern)中,我们使用了一个访问者类,它改变了元素类的执行算法.通过这种方式,元素的执行算法可以随着访问者改变而改变.这种类型的设计模式属于行为型模式. ...

  4. [Paper] **Before GAN: sparse coding

    读罢[UFLDL] ConvNet,为了知识体系的完整,看来需要实战几篇论文深入理解一些原理. 如下是未来博文系列的初步设想,为了hold住 GAN而必备的知识体系,也是必经之路. [Paper] B ...

  5. 前端和后端的数据交互(jquery ajax+python flask+mysql)

    上web课的时候老师布置的一个实验,要求省市连动,基本要求如下: 1.用select选中一个省份. 2.省份数据传送到服务器,服务器从数据库中搜索对应城市信息. 3.将城市信息返回客户,客户用sele ...

  6. 系统信号(signal)与其他(定时器,退出清理等)

    信号signal,可以用作进程线程通信,也可以用作接收中断后退出,退出时,清理资源,记录日志.python相关包为signa. linux信号表 root@server:~# kill -l ) SI ...

  7. Automatic Summarization of Bug Reports

      CONTENT: example : KDE bug report: https://bugs.kde.org/show_bug.cgi?id=188311 (其中还有很多comments没显示) ...

  8. 专访姚冬:All-in-One,智能时代下企业需要更快速的变革

    2017年,msup将咨询服务列入公司发展战略目标,并邀请前IBM大中华区技术总监姚冬成为咨询合伙人.近一年来,msup在咨询服务方面持续发力,与包括百度.平安科技.用友等在内的大型公司形成企业合作联 ...

  9. [No0000133]c# ERROR:“.”(十六进制值 0x00)是无效的字符

    December 24, 2013 c# exception “.”(十六进制值 0x00)是无效的字符. 解决方法:常见于socket方式连接(包括HTTP方式)等.报文交互时候,对方会在字符串后面 ...

  10. Impala2.7.0-cdh5.x.x安装部署

    部署impala impala安装选择rpm包方式进行,这是本次部署唯一一个主要主件采用rpm方式进行安装部署,这里主要原因是cloudera没有提供现成的tar包文件,而源码编译过程会出现各种未知原 ...