一、添加bootstrap和vue的依赖
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="assets/vue.min-v2.5.16.js"></script>
<script src="assets/axios.min.js"></script>
二、前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="assets/vue.min-v2.5.16.js"></script>
<script src="assets/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
<table class="table table-striped">
<caption>用户列表</caption>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>创建日期</th>
</tr>
</thead>
<tbody>
<tr v-for="u in users">
<td>{{u.id}}</td>
<td>{{u.userName}}</td>
<td>{{u.createDate}}</td>
</tr>
</tbody>
</table>
<ul class="pagination" v-for="p in pageNum">
<li v-if="p == pageIndex" class="active"><a href="#" @click="doGo(p)">{{p}}</a></li>
<li v-else="p == pageIndex"><a href="#" @click="doGo(p)">{{p}}</a></li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
users: null,
pageIndex: 1,
pageSize: 10,
pageTotle: 0,
pageNum: 0
},
methods: {
requestUserList(url){
axios.get(url).then(response => {
console.log(response.data)
this.users = response.data.data;
this.pageTotle = response.data.pageTotle;
this.pageNum = Math.ceil(this.pageTotle / this.pageSize);
});
},
doGo(p){
this.pageIndex = p;
var url = 'http://127.0.0.1:8080/user/list?pageIndex='+p+'&pageSize='+this.pageSize;
this.requestUserList(url);
}
},
created: function () {
var url = 'http://127.0.0.1:8080/user/list?pageIndex='+this.pageIndex+'&pageSize='+this.pageSize;
this.requestUserList(url);
}
});
</script>
</body>
</html>
三、页面效果
