学成在线-第12天-讲义-搜索前端 Nuxt.js 七

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;
}
...

3.4 按分类搜索 
3.4.1 需求分析 
1、通过
一
级分类搜索 
2、选择
一
级分类后将显示下属的二级分类 
3、选择二分类进行搜索 
4、选择
一
级分类的全部则表示没有按照分类搜索 
5、选择
一
级分类的全部时二级分类不显示 
3.4.2 API方法 
课程分类将通过页面静态化的方式写入静态资源下，通过/category/category.json可访问，通过www.xuecheng.com/static/category/category.json即可访问。
category.json的内容如下：

/
*
获取分类
*
/
export const sysres_category
=
()
=
> {
return http
.requestQuickGet(staticURL+
"
/static/category/category
.
json
"
);
}

3.4.3 在asyncData中查询分类 
进入搜索页面将默认显示所有一级分类，当前如果已选择一级分类则要显示所有一级分类及该一级分类下属的二级分类。
在asyncData方法中实现上边的需求，代码如下： 
 

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[i]
.name+
' '
if(mt!
=
''
&& mt
== first_category[i]
.id){
//取出二级分类
second_category
= first_category[i]
.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
}
}
}

3.3.4 页面 
在页面显示一级分类及二级分类，需要根据当前是否选择一级分类、是否选择二分类显示页面内容。

<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>

3.3.5 立即搜索 
当用户点击分类时立即执行搜索，实现思路如下： 
1）点击分类立即更改路由。 
2）通过监听路由，路由更改则刷新页面。 
1）创建搜索方法

search(){
//刷新当前页面
window.location.reload();
}

2）定义watch 
通过vue.js的watch可以实现监视某个变量，当变量值出现变化时执行某个方法。
实现思路是： 
1、点击分类页面路由更改 
2、通过watch监视路由，路由更改触发search方法 
与methods并行定义watch： 

watch:{//路由发生变化立即搜索search表示search方法
'
$route
'
:
'
search
'
},

3.5 按难度等级搜索 
3.5.1 需求分析 
用户选择不同的课程难度等级去搜索课程

 
3.5.2 API方法 
使用 search_course方法完成搜索。 
3.5.3页面 
按难度等级搜索思路如下： 
1）点击难度等级立即更改路由。 
2）通过监听路由，路由更改则立即执行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>

3.6 高亮显示 
3.6.1 服务端代码 
修改service的搜索方法，添加高亮设置：

...
//定义高亮
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);
....

3.6.2 前端代码 
在search/index.vue中定义eslight样式：

<style>[/size][/font]
[font=微软雅黑][size=3].eslight{
color: red;
}
...

4 集成测试 
4.1 需求分析 
本次集成测试的目的如下： 
1、测试课程发布与CMS接口是否正常。 
2、测试课程发布与ES接口是否正常。 
3、测试课程从创建到发布的整个过程。 
4.2 准备环境 
1、启动MySQL、MongoDB 
2、启动ElasticSearch、RabbitMQ 
3、启动Eureka Server 
4、启动CMS、课程管理服务、搜索服务。 
5、启动Nginx、系统管理前端、教学管理前端、Nuxt.js。