vue中使用axios调用后端接口

foochane

发布于 2019-05-23 12:22:21

6.8K1

发布于 2019-05-23 12:22:21

文章被收录于专栏：foochanefoochane

vue本身不支持ajax接口的请求，所以在vue中经常使用axios这个接口请求工具。 axios的官方github： https://github.com/mzabriskie/axios

1. 封装axios工具

在工程中的src目录下新建一个名为api的目录，在src/api目录下新建一个index.js文件。

在index.js里面，编写如下内容：

2 修改main.js文件

绑定api/index.js文件，添加如下内容：

// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api

3 修改index.vue

代码如下：

<template>
  <div>index page</div>
</template>
<script>
export default {
  created () {
    this.$api.get('topics', null, r => {
      console.log(r)
    })
  }
}
</script>

4 浏览器查看

在console下可以看到如下数据，说明接口请求成功了。

5 解决跨越问题

在前后端分离的情况下，要解决的问题就是跨域问题。配置 webpack 将接口代理到本地

5.1 修改config/index.js文件找到proxyTable，修改域名

proxyTable: {
      '/api':{
          target:'http://localhost:8036/',   //接口地址
          changeOrigin:false,
          pathRewrite:{
              '/api':''
          }
      },
      '/ms':{
          target:'http://localhost:8036/',
          changeOrigin: false
      }
    },
    // Various Dev Server settings
    host: 'localhost', 
    port: 8099,
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,

这种方法好像解决不了。

5.2 修改后端代码这边后端用的是java 基于springboot框架，在Application.java文件中添加如下代码：

public class Application extends WebMvcConfigurerAdapter {  
  
    @Override  
    public void addCorsMappings(CorsRegistry registry) {  
  
        registry.addMapping("/**")  
                .allowCredentials(true)  
                .allowedHeaders("*")  
                .allowedOrigins("*")  
                .allowedMethods("*");  
  
    }  
」

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.05.02 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript