<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="container">
<el-table :data="books" height="300" :stripe="true" :border="true">
<el-table-column label="图书编号" prop="id"></el-table-column>
<el-table-column label="图书名称" prop="name"></el-table-column>
<el-table-column label="图书作者" prop="author"></el-table-column>
<el-table-column label="图书价格" prop="price"></el-table-column>
<el-table-column label="操作">
<template v-slot:default="data">
<el-button type="primary" icon="el-icon-edit" circle size="mini" ></el-button>
<el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :total="count" :page-size="3" @current-change="changePage"></el-pagination>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
books:[],
count:0,
pageSize:3,
pageNum:1
},
beforeMount:function(){
//使用axios查询图书信息
//axios.get(url).then(fn).catch(fn);
axios.get("http://localhost:8080/book/list?pageNum=1&pageSize="+this.pageSize).then(function(res){
vm.count = res.data.data.count;
vm.books = res.data.data.data;
});
},
methods:{
changePage:function(pn){
this.pageNum = pn;
console.log(this.pageNum);
axios.get("http://localhost:8080/book/list?pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(function(res){
vm.count = res.data.data.count;
vm.books = res.data.data.data;
});
}
}
});
</script>
</body>
</html>
