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

简介: Vue框架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://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

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

相关文章
|
10天前
|
监控 JavaScript 前端开发
使用Vue.js开发员工上网行为监控的实时数据展示页面
使用Vue.js开发的实时员工上网行为监控页面,展示员工访问的网站、应用和时间等数据。页面响应式设计,适应不同设备。通过Vue组件显示实时数据,如`&lt;li v-for=&quot;activity in activities&quot;&gt;`循环渲染。数据定时更新,利用Vue的生命周期钩子和axios从服务器获取并自动刷新,确保数据的时效性。该页面有助于管理者即时了解员工网络活动,保障企业网络安全和资源管理。
51 5
|
11天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
11 1
|
12天前
|
JavaScript
vue数据的双向绑定
vue数据的双向绑定
|
16天前
|
JavaScript
vue 请求拦截器 的响应拦截器有几种?
vue 请求拦截器 的响应拦截器有几种?
|
16天前
|
JavaScript
|
20天前
|
前端开发 JavaScript API
Vue.js:渐进式JavaScript框架-前端开发
Vue.js:渐进式JavaScript框架-前端开发
23 3
|
19天前
|
XML API Android开发
06. 【Android教程】Android 的 UI 根基 View与View
06. 【Android教程】Android 的 UI 根基 View与View
11 1
|
23天前
|
JavaScript Java 测试技术
基于ssm+vue.js的框架失物招领信息交互平台附带文章和源代码设计说明文档ppt
基于ssm+vue.js的框架失物招领信息交互平台附带文章和源代码设计说明文档ppt
15 1
|
5天前
|
JavaScript 前端开发 编译器
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
14 0
|
5天前
|
关系型数据库 MySQL API
实时计算 Flink版操作报错合集之同步MySQL数据到另一个MySQL数据库,第一次同步后源表数据发生变化时目标表没有相应更新,且Web UI中看不到运行的任务,该怎么解决
在使用实时计算Flink版过程中,可能会遇到各种错误,了解这些错误的原因及解决方法对于高效排错至关重要。针对具体问题,查看Flink的日志是关键,它们通常会提供更详细的错误信息和堆栈跟踪,有助于定位问题。此外,Flink社区文档和官方论坛也是寻求帮助的好去处。以下是一些常见的操作报错及其可能的原因与解决策略。