vue中使用axios调用后端接口

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("*");  
  
    }  
」 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券