专栏首页编程微刊Vue框架Element UI教程-axios请求数据(六)

Vue框架Element UI教程-axios请求数据(六)

Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element


1:进入项目,npm安装

   npm install axios --save

2.在main.js下引用axios

  import axios from 'axios'

3:准备json数据 自己写了一个json数据,放在服务器上,现在要通过vue项目调用数据 http://www.intmote.com/test.json

4:跨域问题,设置代理,利用proxyTable属性实现跨域请求 在config/index.js 里面找到proxyTable :{} ,然后在里面加入以下代码

   proxyTable: {
  '/api': {
    target: 'http://www.intmote.com',//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,//允许跨域
    pathRewrite: {
      '^/api': '' //这个是定义要访问的路径,名字随便写 
    }
  }
},

5:打开一个界面User.vue,开始写请求数据的方法

 methods: {
            getData() {
                axios.get('/api/test.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }

User.vue参考代码:

<template>
    <div id="app">
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('/api/test.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

6:再次运行 npm run dev

这个时候,我们可以看见,请求的数据


原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚,对于博客上面有不会的问题,欢迎加入编程微刊qq群:260352626。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于promise用于浏览器和node.js的http客户端的axios

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

    祈澈菇凉
  • 进阶攻略|前端完整的学习路线

    祈澈菇凉
  • 进阶攻略|前端完整的学习路线

    祈澈菇凉
  • python requests模块详解

    requests是python的一个HTTP客户端库,跟urllib,urllib2类似,那为什么要用requests而不用urllib2呢?官方文档中是这样说...

    py3study
  • ROS_Kinetic_16 ubuntu中安装使用Matlab和ROS

    参考网址:http://cn.mathworks.com/hardware-support/robot-operating-system.html?reques...

    zhangrelay
  • 漏洞挖掘 | 单点登录的网站通过Referer盗取用户授权

    最近参加了一个赏金计划,然后在单点登录中发现了一个涉及比较多站点的漏洞,测试过程比较有意思,所以分享一下。

    HACK学习
  • eShopOnContainers 知多少[2]:Run起来

    执行命令git clone https://github.com/dotnet/eShopOnContainers.gitclone代码到本地。使用默认DEV分...

    圣杰
  • Spark 学习资源收集【Updating】

    (一)spark 相关安装部署、开发环境 1、Spark 伪分布式 & 全分布式 安装指南 http://my.oschina.net/leejun2005...

    用户1177713
  • Unity各版本资源文件

    韩东吉
  • OpenCV学习日记(一)——开发环境的配置

    于 2016/6/13 Visual studio2010 + openCV 2.4.9 一、关于开发环境的选择 我一开始是抱着什么都要用最新的态度,选择了op...

    TeeyoHuang

扫码关注云+社区

领取腾讯云代金券