vue2.0 + element-ui 实战项目-axios请求数据（三）

自从用饿了么框架重构项目以来，遇到很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~

Element UI手册：https://cloud.tencent.com/developer/doc/1270
github地址：https://github.com/ElemeFE/element

vue2.0官方网站：http://caibaojian.com/vue/guide/installation.html
element-ui官方网站：https://element.eleme.cn/#/zh-CN

1：进入项目，npm安装

npm install axios --save

2.在main.js下引用axios

import axios from 'axios'

3:准备json数据
自己写了一个json数据，放在服务器上，现在要通过vue项目调用数据
http://47.xxx.xx.78:8091/ConfigServer/picture.action

4：跨域问题，设置代理，利用proxyTable属性实现跨域请求
在config/index.js 里面找到proxyTable ：{} ，然后在里面加入以下代码
（这里处于安全考虑，我隐藏了自己的而服务器域名，如果需要测试，改成你自己的即可）

   proxyTable: {
  '/api': {
     target: 'http://x.xx.xx.78:8091',//设置你调用的接口域名和端口号 
    changeOrigin: true,//允许跨域
    pathRewrite: {
      '^/api': '' //这个是定义要访问的路径，名字随便写 
    }
  }
},

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

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

picture.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/ConfigServer/picture.action').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

6：再次运行

npm run dev

运行成功之后，打开f12，查看network的请求
这个时候，我们可以看见，本地的localhost替代了我之前放在服务器上的链接的域名，这也是设置代理成功，就解决了跨域的问题了。

请求成功

response里面也有返回值，ok,下一步就要开始将这些数据渲染在前端界面上面了。

最后编辑于：2020.11.05 13:47:49