foochane 关注
2018.05.02 21:55 字数 288 阅读 77评论 1喜欢 1
vue本身不支持ajax接口的请求，所以在vue中经常使用axios这个接口请求工具。
axios的官方github： https://github.com/mzabriskie/axios
1. 封装axios工具
在工程中的src目录下新建一个名为api的目录，在src/api目录下新建一个index.js文件。
[图片上传失败...(image-ad39a-1536033683980)]
在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下可以看到如下数据，说明接口请求成功了。
[图片上传失败...(image-24c999-1536033683980)]
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("*");
}
」
【参考链接】：
https://blog.csdn.net/fungleo/article/details/77601761
