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

简介: vue2.0 + element-ui 实战项目-axios请求数据(三)

1:进入项目,npm安装

npm install axios --save

 

 

2.在main.js下引用axios

import axios from 'axios'

 


3:准备json数据

自己写了一个json数据,放在服务器上,现在要通过vue项目调用数据


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,下一步就要开始将这些数据渲染在前端界面上面了。

 

相关文章
|
10天前
|
API
使用axios发送请求的格式是什么?示例代码
使用axios发送请求的格式是什么?示例代码
12 0
|
1天前
|
机器学习/深度学习 算法 数据可视化
【深度学习实战】基于深度学习的图片风格快速迁移软件(Python源码+UI界面)
【深度学习实战】基于深度学习的图片风格快速迁移软件(Python源码+UI界面)
|
10天前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
9 0
|
23天前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
30天前
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
15 0
|
30天前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
18 1
|
30天前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
64 0
|
30天前
|
机器学习/深度学习 人工智能 自然语言处理
【AI大模型应用开发】3.2 RAG实战 - RAG应用+UI实现加载本地文件并对话
【AI大模型应用开发】3.2 RAG实战 - RAG应用+UI实现加载本地文件并对话
56 0
|
JavaScript 前端开发
模拟Vue数据的双向绑定
Vue的数据双向绑定功能一直为人称道, Vue数据的双向数据绑定主要依赖了Object.defineProperty,这里尝试用最简单的代码, 实现数据的双向绑定Demo MVVM ViewModel基本实现原理 Gi...
898 0
|
2天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
15 0