...
//分页
//当前页码
if(page<
=
0){
page
= 1;
}
//起始记录下标
int from =
(page
‐
1)
*
size;
searchSourceBuilder.from(from);
searchSourceBuilder.size(size);
...
<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;
}
...
/
*
获取分类
*
/
export const sysres_category
=
()
=
> {
return http
.requestQuickGet(staticURL+
"
/static/category/category
.
json
"
);
}
async asyncData({ store, route }) {//服务端调用方法
//搜索课程
let page
= route.
query
.
page;
if(!page){
page
= 1;
}else{
page
= Number.
parseInt(page)
}
console.log(page);
//请求搜索服务，搜索服务
let course_data
=
await courseApi.search_course(page,2,route.
query);
console.log(course_data)
//查询分类
let category_data
=
await courseApi.sysres_category()
if (course_data && course_data.
queryResult ) {
//全部分类
let category
=
category_data.category//分部分类
let first_category
=
category[0]
.children//
一
级分类
let second_category
=
[]//二级分类
let keywords
=
''
let mt
=
''
let st
=
''
let grade
=
''
let keyword
=
''
let total =
course_data.
queryResult.total
if( route.
query
.mt){
mt
= route.
query
.mt
}
if( route.
query
.st){
st
= route.
query
.st
}
if( route.
query
.
grade){
grade
= route.
query
.
grade
}
if( route.
query
.keyword){
keyword
= route.
query
.keyword
}
//遍历
一
级分类
for(var i in first_category){
keywords+=first_category
.name+
' '
if(mt!
=
''
&& mt
== first_category
.id){
//取出二级分类
second_category
= first_category
.children;
// console.log(second_category)
break;
}
}
return {
courselist: course_data.
queryResult.list,//课程列表
first_category: first_category,
second_category: second_category,
keywords:keywords,
mt:mt,
st:st,
grade:grade,
keyword:keyword,
page:page,
total:total,
imgUrl:config
.imgUrl
}
}else{
return {
courselist: {},
first_category:{},
second_category:{},
mt:
''
,
st:
''
,
grade:
''
,
keyword:
''
,
page:page,
total:0,
imgUrl:config
.imgUrl
}
}
} <ul>
<li>
一
级分类：</li>
<li v
‐
if=
"
mt!
=
''"
><nuxt
‐
link class
=
"
title
‐
link
"
:to
=
"'
/course/search?
keyword
=
'
+keyword+
'
&grade
=
'
+grade
"
>全部</nuxt
‐
link></li>
<li class
=
"
all
"
v
‐
else>全部</li>
<ol>
<li v
‐
for=
"
category_v in first_category
"
>
<nuxt
‐
link class
=
"
title
‐
link all
"
:to
=
"'
/course/search?keyword
=
'
+keyword+
'
&mt
=
'
+
category_v.id
"
v
‐
if=
"
category_v.id
== mt
"
>{{category_v.name}}</nuxt
‐
link>
<nuxt
‐
link class
=
"
title
‐
link
"
:to
=
"'
/course/search?keyword
=
'
+keyword+
'
&mt
=
'
+
category_v.id
"
v
‐
else>{{category_v.name}}</nuxt
‐
link>
</li>
</ol>
<!
‐‐
<ol>
<li>数据分析</li>
<li>机器学习工程</li>
<li>前端开发工程</li>
</ol>
‐‐
>
</ul>
<ul>
<li>二级分类：</li>
<li v
‐
if=
"
st!
=
''"
><nuxt
‐
link class
=
"
title
‐
link
"
:to
=
"'
/course/search?
keyword
=
'
+keyword+
'
&mt
=
'
+mt+
'
&grade
=
'
+grade
"
>全部</nuxt
‐
link></li>
<li class
=
"
all
"
v
‐
else>全部</li>
<ol v
‐
if=
"
second_category
.length>0
"
>
<li v
‐
for=
"
category_v in second_category
"
>
<nuxt
‐
link class
=
"
title
‐
link all
"
:to
=
"'
/course/search?keyword
=
'
+keyword+
'
&mt
=
'
+mt+
'
&st
=
'
+ category_v.id
"
v
‐
if=
"
category_v.id
==
st
"
>{{category_v.name}}</nuxt
‐
link>
<nuxt
‐
link class
=
"
title
‐
link
"
:to
=
"'
/course/search?keyword
=
'
+keyword+
'
&mt
=
'
+mt+
'
&st
=
'
+
category_v.id
"
v
‐
else>{{category_v.name}}</nuxt
‐
link>
</li>
<!
‐‐
<li>大数据</li>
<li>云计算</li>
‐‐
>
</ol>
<!
‐‐
<a href=
"
#
"
class
=
"
more
"
>更多 ∨</a>
‐‐
>
</ul>
search(){
//刷新当前页面
window.location.reload();
}watch:{//路由发生变化立即搜索search表示search方法
'
$route
'
:
'
search
'
},
<ul>
<li>难度等级：</li>
<li v
‐
if=
"
grade!
=
''"
>
<nuxt
‐
link class
=
"
title
‐
link
"
:to
=
"'
/course/search?keyword
=
'
+keyword+
'
&mt
=
'
+
mt+
'
&st
=
'
+st+
'
&grade
=
'"
>全部
</nuxt
‐
link>
</li>
<li class
=
"
all
"
v
‐
else>全部</li>
<ol>
<li v
‐
if=
"
grade
==
'
200001
'"
class
=
"
all
"
>初级</li>
<li v
‐
else><nuxt
‐
link class
=
"
title
‐
link
"
:to
=
"'
/course/search?keyword
=
'
+keyword+
'
&mt
=
'
+
mt+
'
&st
=
'
+st+
'
&grade
=200001
'"
>初级</nuxt
‐
link></li>
<li v
‐
if=
"
grade
==
'
200002
'"
class
=
"
all
"
>中级</li>
<li v
‐
else><nuxt
‐
link class
=
"
title
‐
link
"
:to
=
"'
/course/search?keyword
=
'
+keyword+
'
&mt
=
'
+
mt+
'
&st
=
'
+st+
'
&grade
=200002
'"
>中级</nuxt
‐
link></li>
<li v
‐
if=
"
grade
==
'
200003
'"
class
=
"
all
"
>高级</li>
<li v
‐
else><nuxt
‐
link class
=
"
title
‐
link
"
:to
=
"'
/course/search?keyword
=
'
+keyword+
'
&mt
=
'
+
mt+
'
&st
=
'
+st+
'
&grade
=200003
'"
>高级</nuxt
‐
link></li>
</ol>
</ul>
...
//定义高亮
HighlightBuilder highlightBuilder = new HighlightBuilder();
highlightBuilder.
preTags(
"
<font class
=
'
eslight
'
>
"
);
highlightBuilder.
postTags(
"
</font>
"
);
highlightBuilder.fields()
.add(new HighlightBuilder.Field(
"
name
"
));
searchSourceBuilder.highlighter(highlightBuilder);
...
//解析高亮字段
for(SearchHit hit:searchHits){
CoursePub coursePub
= new CoursePub();
//源文档
Map<String, Object> sourceAsMap
= hit.
getSourceAsMap();
//课程id
String id
=
(String) sourceAsMap
.
get(
"
id
"
);
coursePub.setId(id);
//取出name
String name
=
(String) sourceAsMap
.
get(
"
name
"
);
//取出高亮字段
Map<String, HighlightField> highlightFields
= hit.
getHighlightFields();
if(highlightFields.
get(
"
name
"
)!
=null){
HighlightField highlightField
= highlightFields.
get(
"
name
"
);
Text[] fragments
= highlightField.fragments();
StringBuffer stringBuffer = new StringBuffer();
for(Text text:fragments){
stringBuffer.append(text);
}
name
=
stringBuffer.toString();
}
coursePub.setName(name);
....
<style>
.eslight{
color: red;
}
...
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |