11-搜索前端开发-分页搜索

3.2.5 页面

在页面中展示课程列表。

<div class="content‐list">
<div class="recom‐item" v‐for="(course, index) in courselist">
<nuxt‐link :to="'/course/detail/'+course.id+'.html'" target="_blank">
<div v‐if="course.pic">
<p><img :src="imgUrl+'/'+course.pic" width="100%" alt=""></p>
</div>
<div v‐else>
<p><img src="/img/widget‐demo1.png" width="100%" alt=""></p>
</div>
<ul >
<li class="course_title"><span v‐html="course.name"></span></li>
<li style="float: left"><span v‐if="course.charge == '203001'">免费</span>
<span v‐if="course.charge == '203002'">￥{{course.price | money}}</span>
<!‐‐ <em> ∙ </em>‐‐>&nbsp;&nbsp;<!‐‐<em>1125人在学习</em>‐‐></li>
</ul>
</nuxt‐link>
</div>
<li class="clearfix"></li>
</div>

3.3 分页查询

3.3.1 服务端代码

...
//分页
//当前页码
if(page<=0){
page = 1;
}
//起始记录下标
int from = (page ‐1) * size;
searchSourceBuilder.from(from);
searchSourceBuilder.size(size);
...

重启服务

3.3.2 前端代码

使用Element-UI的el-pagination分页插件：

<div style="text‐align: center">
<el‐pagination
background
layout="prev, pager, next"
@current‐change="handleCurrentChange"
:total="total"
:page‐size="page_size"
:current‐page="page"
prev‐text="上一页"
next‐text="下一页">
</el‐pagination>
</div>

定义分页触发方法

methods:{
//分页触发
handleCurrentChange(page) {
this.page = page
this.$route.query.page = page
let querys = querystring.stringify(this.$route.query)
window.location = '/course/search?'+querys;
}
...

测试点击分页