axios-0.18.0.js可以导入jar
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>axios</artifactId>
<version>0.18.0</version>
</dependency>
vuejs-2.5.16.js可以导入
dependency>
<groupId>org.webjars.bowergithub.vuejs</groupId>
<artifactId>vue</artifactId>
<version>2.5.16</version>
</dependency>
<script src="webjars/vue/dist/vue.min.js"></script>
<script src="webjars/axios/0.18.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>{{name}}</td>
</tr>
<tr v-for="u in userList">
<td>{{u.id}}</td>
<td>{{u.username}}</td>
<td>{{u.password}}</td>
<td>{{u.sex}}</td>
<td>{{u.age}}</td>
<td>{{u.email}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#app',
data:{
name:"wjc",
user: {id:"",username:"aaa",password:"",age:"",sex:"",email:""},
userList:[]
},
methods:{
//查询所有
findAll:function () {
var _this=this;
axios.post('http://localhost:8080/findAll').then(function (response) {
_this.userList = response.data;//响应数据给userList赋值
console.log( _this.userList);
})
.catch(function (error) {
console.log(error);
})
}
},
findById:function (userid) {
//在当前方法中定义一个变量,表明是vue对象
var _this = this;
axios.get('http://localhost:8080/findById',{params:{id:userid}})
.then(function (response) {
_this.user = response.data;//响应数据给userList赋值
$("#myModal").modal("show");
})
.catch(function (error) {
console.log(error);
})
},
update:function (user) {//post请求
//在当前方法中定义一个变量,表明是vue对象
var _this = this;
axios.post('http://localhost:8080/updateUser', _this.user)
.then(function (response) {
_this.findAll();
})
.catch(function (error) {
console.log(error);
});
}
created:function() {//当我们页面加载的时候触发请求,查询所有
this.findAll();
}
})
</script>
</body>