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

灰太狼 2022-11-21 04:10 189阅读 0赞

1：进入项目，npm安装

npm install axios --save

![format_png][]

2.在main.js下引用axios

import axios from 'axios'

![format_png 1][]

3:准备json数据  
自己写了一个json数据，放在服务器上，现在要通过vue项目调用数据  
[http://47.xxx.xx.78:8091/ConfigServer/picture.action][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': '' //这个是定义要访问的路径，名字随便写 
        }
      }
    },

![format_png 2][]

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

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

![format_png 3][]

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

请求成功

![format_png 4][]

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

![format_png 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70][]

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

[format_png]: /images/20221120/4730941fa7c94197a56f9863ad11e28d.png
[format_png 1]: /images/20221120/ab105672720b452089856675ccc493f7.png
[http_47.xxx.xx.78_8091_ConfigServer_picture.action]: https://links.jianshu.com/go?to=http%3A%2F%2F47.xxx.xx.78%3A8091%2FConfigServer%2Fpicture.action
[format_png 2]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTAzMTBhN2JkZWVlZjQ1NTYucG5n?x-oss-process=image/format,png
[format_png 3]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTE2ZDUwYzU3NzZjZmNhNzIucG5n?x-oss-process=image/format,png
[format_png 4]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWYzODg0ZGQ2MTRjMjhlYzIucG5n?x-oss-process=image/format,png
[format_png 5]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWQ5YTM5ZjExNGFjMjFjNjkucG5n?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201105110652595.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy,size_16,color_FFFFFF,t_70