vue本身不支持ajax接口的請(qǐng)求憾股，所以在vue中經(jīng)常使用axios這個(gè)接口請(qǐng)求工具督惰。
axios的官方github： https://github.com/mzabriskie/axios
1. 封裝axios工具
在工程中的src目錄下新建一個(gè)名為api的目錄腊脱，在src/api目錄下新建一個(gè)index.js文件祝谚。
在index.js里面悠瞬，編寫如下內(nèi)容：
2 修改main.js文件
綁定api/index.js文件，添加如下內(nèi)容：
// 引用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下可以看到如下數(shù)據(jù)宵睦，說(shuō)明接口請(qǐng)求成功了记罚。
5 解決跨越問(wèn)題
在前后端分離的情況下，要解決的問(wèn)題就是跨域問(wèn)題壳嚎。
配置 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("*");
}
」
【參考鏈接】：
https://blog.csdn.net/fungleo/article/details/77601761
