vue2.0实现一个axios请求数据

末蓝、 2022-11-22 05:09 129阅读 0赞

对于一个新手来说，学习一个框架最重要的事情就是记录一下过程，下次再回顾的时候就很容易记住步骤了，不记得也可以直接翻出来自己之前写过的教程，几次之后也就顺手很多了，学习这个循序渐进的过程里面，笔记千万不可以少哦，下面就是我随手记录的一些笔记。

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

![52de8d0715b848a073f94015589006d1.png][]

2.在main.js下引用axios

import axios from 'axios'

![1ce7ee86f98cd8515c58da658f442fd4.png][]

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': '' //这个是定义要访问的路径，名字随便写 
        }
      }
    },

![f3aca13f8ea1fed667267e152307d351.png][]

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

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

![f457bedd133cc32fab0a7a077a947e75.png][]

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替代 了我之前放在服务器上的链接的域名，这也是设置代理成功，就解决了跨域的问题了。

请求成功  
![7de0024a84f28fd0dfc4ef79bdddf612.png][]  
response里面也有返回值，ok,下一步就要开始将这些数据渲染在前端界面上面了。

![e470d0fbc11b678b023ecd6dd13ca1eb.png][]

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[52de8d0715b848a073f94015589006d1.png]: /images/20221120/e28bc826a4e344258b44547b9334cc4c.png
[1ce7ee86f98cd8515c58da658f442fd4.png]: /images/20221120/8e07b93e12a44e2eb298e33157314f05.png
[f3aca13f8ea1fed667267e152307d351.png]: /images/20221120/80d99327c81743df85945cb6708667f6.png
[f457bedd133cc32fab0a7a077a947e75.png]: /images/20221120/d5bff39257d94f9d9e89190204210fe4.png
[7de0024a84f28fd0dfc4ef79bdddf612.png]: /images/20221120/08c26f59d84f44b2b247c0625b9d60e1.png
[e470d0fbc11b678b023ecd6dd13ca1eb.png]: /images/20221120/68769eb0a241474bbe5ee3fc936b18d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/7e3c642efef34326a8b4ab3b874289e7.png