做了个图书管理系统，做了个分页，感觉查询框放在那没啥功能看着难受，于是做了一个多功能分页查询。
前端
*通过在下拉菜单中添加三个按钮分开三个功能：1.正常分页查询 2.按类型分页查询（我这里类型是固定好那么多种的） 3.按书名查询
先上代码：
ui
<el-input v-model="input" placeholder="请输入查询信息" style="width: 200px"></el-input>
<el-dropdown>
<el-button type="primary">
查询选项菜单<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-button type="primary" @click="currentpage=1,getAllByPage()">默认查询</el-button>
</el-dropdown-item>
<br>
<el-dropdown-item>
<el-button type="primary" @click="currentpage=1,inquireBookByTypeByPage()">按书类查询</el-button>
</el-dropdown-item>
<br>
<el-dropdown-item>
<el-button type="primary" @click="currentpage=1,inquireBookByNameByPage()">按书名查询</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
讲一下为什么@onclick后面需要设置currentpage=1：假如我没有设置，我第一次全局查，有5页的数据，我翻到第五页，此时currentpage=5，那么我这时候按类型查询，数据没那么多，页码到不了第五页，那就bug了，所以我最好回到第一页再进行下一次查询。
那有人就问了：那为什么不放在方法中呢？因为我每次换页都需要重新调方法，假如我放在方法中，我换到第二页，你执行currentpage=1，那就bug了，数据出不来。
vue的data中,设置各属性默认值:
input:'',
total:'',
currentpage:1,
pagesize:8,
options: [{
value: '文学',
label: '文学'
}, {
value: '科技',
label: '科技'
}, {
value: '学术',
label: '学术'
}, {
value: '自然',
label: '自然'
}, {
value: '美食',
label: '美食'
}],
钩子函数中设置调用正常分页略
methods中调用的方法：
inquireBookByTypeByPage(){
axios.get("/books/inquireByType/"+this.input+"/"+this.currentpage+"/"+this.pagesize).then((res)=>{
if(res.data.code === 30021){
this.total=res.data.total;
this.tableData=res.data.data;
}else{
this.$message.error(res.data.msg);
}
})
},
inquireBookByNameByPage(){
axios.get("/books/inquireByName/"+this.input+"/"+this.currentpage+"/"+this.pagesize).then((res)=>{
if(res.data.code === 30021){
this.total=res.data.total;
this.tableData=res.data.data;
}else{
this.$message.error(res.data.msg);
}
})
},
handleCurrentChange(currentpage){
this.currentpage=currentpage;
if(this.input!==null){
for(let item of this.options){
if(this.input === item.value){
this.inquireBookByTypeByPage();
return;
}
}
this.inquireBookByNameByPage()
}else {
this.getAllByPage();
}
},
getAllByPage(){
this.input=null;
axios.get("/books/"+this.currentpage+"/"+this.pagesize).then((res)=>{
if(res.data.code === 30021){
this.total=res.data.total;
this.tableData=res.data.data;
}else{
this.$message.error(res.data.msg);
}
});
},
异步这种懒得说了，详细可以看我上一篇分页的笔记
（请看优化，这里逻辑太复杂了不提倡）主要讲一下handleCurrentChange()为什么这么写：因为换页是会把currentpage这个属性换值，需要重新查询，这时就会出现三种情况1.我下次还得按类型来查（因为我按类型查出来一页放不下，你肯定要翻到第二页看我的数据的吧，翻到第二页那我的数据是不是要变，那我的sql语句是不是要变） 2.下次还得按书名查（理由同1中） 3.下次直接正常查。所以我就看你这个input框里面有没有东西，如果有，是不是和我定的那么多类型匹配的，如果是，那我认定你是按类型查的，如果不是那就是按书名查的；如果input框里面没东西，那我认定你没有使用特殊的查询功能，自动就按正常查询跑。此外，每次执行正常分页前要把input框里面的东西设置成null，保证你下次换页的时候调方法不要调到按类型或者按书名分页查询。
ps：有个小bug写markdown的时候想到的：要是出现书名和类型相同的情况会按类型查，因为书名是模糊查，最好就不要出现书名和类型一样的情况吧。
后端
经典MVC架构不说了自己看吧
controller
@GetMapping("/{currentpage}/{pagesize}")
public Result getAllByPage(@PathVariable Integer currentpage, @PathVariable Integer pagesize) {
Integer total=bookService.getCount();
Integer begin=(currentpage - 1)*pagesize;
List<Book> bookList=bookService.getAllByPage(begin,pagesize);
Integer code=bookList!=null?Code.GET_OK:Code.GET_ERR;
String msg=bookList!=null?"":"数据查询失败，请重试！";
return new Result(code,bookList,msg,total);
}
@GetMapping("/inquireByType/{type}/{currentpage}/{pagesize}")
public Result inquireBookByTypeByPage(@PathVariable String type,@PathVariable Integer currentpage, @PathVariable Integer pagesize) {
Integer total=bookService.getCountByType(type);
Integer begin=(currentpage - 1)*pagesize;
List<Book> bookList=bookService.inquireBookByTypeByPage(type,begin,pagesize);
Integer code=bookList!=null?Code.GET_OK:Code.GET_ERR;
String msg=bookList!=null?"":"数据查询失败，请重试！";
return new Result(code,bookList,msg,total);
}
@GetMapping("/inquireByName/{name}/{currentpage}/{pagesize}")
public Result inquireBookByNameByPage(@PathVariable String name,@PathVariable Integer currentpage, @PathVariable Integer pagesize) {
Integer total=bookService.getCountByName(name);
Integer begin=(currentpage - 1)*pagesize;
List<Book> bookList=bookService.inquireBookByNameByPage(name,begin,pagesize);
Integer code=bookList!=null?Code.GET_OK:Code.GET_ERR;
String msg=bookList!=null?"":"数据查询失败，请重试！";
return new Result(code,bookList,msg,total);
}
service
List<Book> getAllByPage(Integer begin,Integer pagesize);
Integer getCount();
List<Book> inquireBookByTypeByPage(String type,Integer begin,Integer pagesize);
List<Book> inquireBookByNameByPage(String name,Integer begin,Integer pagesize);
Integer getCountByType(String type);
Integer getCountByName(String name);
及实现类
@Override
public List<Book> getAllByPage(Integer begin,Integer pagesize) {
return bookDao.getAllByPage(begin,pagesize);
}
@Override
public Integer getCount() {
return bookDao.getCount();
}
@Override
public List<Book> inquireBookByTypeByPage(String type, Integer begin, Integer pagesize) {
return bookDao.inquireBookByTypeByPage(type,begin,pagesize);
}
@Override
public List<Book> inquireBookByNameByPage(String name, Integer begin, Integer pagesize) {
return bookDao.inquireBookByNameByPage(name,begin,pagesize);
}
@Override
public Integer getCountByType(String type) {
return bookDao.getCountByType(type);
}
@Override
public Integer getCountByName(String name) {
return bookDao.getCountByName(name);
}
数据层（DAO）
@Select("select * from SSM limit #{begin},#{pagesize}")
public List<Book> getAllByPage(@Param("begin") Integer begin,@Param("pagesize") Integer pagesize);
@Select("select count(*) from SSM")
public Integer getCount();
@Select("select count(*) from SSM where type=#{type}")
public Integer getCountByType(@Param("type") String type);
@Select("select count(*) from SSM where name like concat('%',#{name},'%')")
public Integer getCountByName(@Param("name") String name);
@Select("select * from SSM where type=#{type} limit #{begin},#{pagesize}")
public List<Book> inquireBookByTypeByPage(@Param("type") String type,@Param("begin") Integer begin,@Param("pagesize") Integer pagesize);
@Select("select * from SSM where name like concat('%',#{name},'%') limit #{begin},#{pagesize}")
public List<Book> inquireBookByNameByPage(@Param("name") String name,@Param("begin") Integer begin,@Param("pagesize") Integer pagesize);
后续优化（建议看前端methods前看）：
在handleCurrentChange()函数这里逻辑较复杂且容易出现bug，为了达到我们预期的目的：按不同方法分页，且在分页以后的换页继续调用同一分页函数我们引入functionmode变量（默认值为1），记录上一次调用的分页查询函数，比如1代表默认分页，2代表按类分页，3代表按名分页。前端methods中的代码变化（data中），这样就解决了原写法中复杂的逻辑问题：
functionmode: 1,inquireBookByTypeByPage() {
this.functionmode = 2
axios.get("/books/inquireByType/" + this.input + "/" + this.currentpage + "/" + this.pagesize).then((res) => {
if (res.data.code === 30021) {
this.total = res.data.total;
this.tableData = res.data.data;
} else {
this.$message.error(res.data.msg);
}
})
},
inquireBookByNameByPage() {
this.functionmode = 3
axios.get("/books/inquireByName/" + this.input + "/" + this.currentpage + "/" + this.pagesize).then((res) => {
if (res.data.code === 30021) {
this.total = res.data.total;
this.tableData = res.data.data;
} else {
this.$message.error(res.data.msg);
}
})
},
handleCurrentChange(currentpage) {
this.currentpage = currentpage;
if (this.functionmode === 1) {
this.getAllByPage()
} else if (this.functionmode === 2) {
this.inquireBookByTypeByPage()
} else if (this.functionmode === 3) {
this.inquireBookByNameByPage()
}
},
getAllByPage() {
this.input = "";
this.functionmode = 1;
axios.get("/books/" + this.currentpage + "/" + this.pagesize).then((res) => {
if (res.data.code === 30021) {
this.total = res.data.total;
this.tableData = res.data.data;
} else {
this.$message.error(res.data.msg);
}
});
},实现效果如下：
新手写分页的一点心得，希望能帮到你们，有改进的大方提出，我还希望能偷懒少写点代码。
1136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
