最近学了下vuejs的东西,然后打算结合后端练习下。
后端用了(sping+spingmvc+hibernate)
结果页面报以下这个错误:
报错:Failed to load http://localhost:8080/XXXX: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.
解决办法:
前端代码:vue+axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<div id="app" >
<button @click="queryUser">查询</button>
<ul v-for="(item,index) in list">
<li>{{index+1}}.姓名:{{item.name}},年龄:{{item.age}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
list:[],
inputValue:""
},
methods:{
queryUser:function () {
var that=this;
axios.get("http://localhost:8080/手动打码,对,我自己打的").then(function(response){
that.list=response.data;
}
).catch(function(error) {
console.log(error);
})
}
},
})
</script>
</body>
</html>
效果展示:
点击查询,数据才会出来。这里是从数据库中读取数据。
数据库的数据:
详情代码,我另外写个文档说明。
https://blog.csdn.net/weixin_43849543/article/details/105543666