vue中访问springboot中的RestController中的服务
1、创建项目
使用vue init webpack my_frontend 创建vue项目
在HelloWorld.vue文件中添加内容:
HelloWorld.vue 文件内容:
html
<template>
<div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="id" label="ID" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="pwd" label="密码"> </el-table-column>
</el-table>
</div>
</template>
<script>
// import testApi from '../api/test.js'
import axios from "axios";
export default {
name: 'HelloWorld',
data () {
return {
tableData: [],
}
},
mounted() {
this.fetch();
},
methods:{
fetch() {
const http = axios.create({
// baseURL: BASEURL,
timeout: 1000 * 30,
withCredentials: true,
headers: { 'Content-Type': 'application/json; charset=utf-8' }
})
http.get('/api/datas/v1/users').then((res) =>{
this.tableData = res.data
console.log(res)
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
2、在项目根目录下创建vue.config.js,并添加内容
javascript
module.exports = {
devServer: {
host: '127.0.0.1',
port: 8080, //vue项目端口
open: true,// vue项目启动时自动打开浏览器
proxy: {
'/api': { // '/api'是代理标识,用于告诉node,url前面是/api的就是使用代理的
target: "http://127.0.0.1:8088", //目标地址,一般是指后台服务器地址
changeOrigin: true, //是否跨域
pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
'^/api': ""
}
}
}
}
}
但是运行项目访问,还是显示跨域问题, 访问restfull接口: '/api/datas/v1/users
没有替换为:http://127.0.0.1:8088/datas/v1/users,而是使用vue项目的访问url:
h++ttp://127.0.0.1:8080/api/datas/v1/users++,可见vue.config.js没有作用。
3、查找原因
查看项目目录下package.json, package.json命令启动类的js
打开/build/webpack.dev.conf.js, 显示内容如下:
注意到这个代理的关键配置是在这个config目录下,所以把这个vue.config.js中的proxy部份内容放到config目录下的index.js中的dev.proxyTable中就行了,不是官网上的放到根目录
4、重启项目测试
npm run dev
可以正常访问restful服务。