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

3.1.4 搜索页面 
创建搜索页面如下：

//配置文件
let config
= require(
'
~
/config/sysConfig
'
)
import querystring from
'
querystring
'
import
*
as courseApi from
'
~
/api/course
'
export default {
head() {
return {
title:
'
传智播客
‐
一
样的教育,不
一
样的品质
'
,
meta: [
{charset:
'
utf
‐
8
'
},
{name:
'
description
'
, content:
'
传智播客专注IT培训,Java培训,Android培训,安卓培训,PHP培
训,C++培训,网页设计培训,平面设计培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,云计算大数据培训,
全栈工程师培训,产品经理培训。
'
},
{name:
'
keywords
'
, content: this.keywords}
],
link: [
{rel:
'
stylesheet
'
, href:
'
/static/plugins/normalize
‐
css/normalize.css
'
},
{rel:
'
stylesheet
'
, href:
'
/static/plugins/bootstrap/dist/css/bootstrap
.css
'
},
{rel:
'
stylesheet
'
, href:
'
/static/css/page
‐
learing
‐
list.css
'
}
]
}
},

其它数据模型及方法：

<script>
//配置文件
let config
= require(
'
~
/config/sysConfig
'
)
import querystring from
'
querystring
'
import
*
as courseApi from
'
~
/api/course
'
export default {
head() {
return {
title:
'
传智播客
‐
一
样的教育,不
一
样的品质
'
,
meta: [
{charset:
'
utf
‐
8
'
},
{name:
'
description
'
, content:
'
传智播客专注IT培训,Java培训,Android培训,安卓培训,PHP培
训,C++培训,网页设计培训,平面设计培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,云计算大数据培训,
全栈工程师培训,产品经理培训。
'
},
{name:
'
keywords
'
, content: this.keywords}
],
link: [
{rel:
'
stylesheet
'
, href:
'
/static/plugins/normalize
‐
css/normalize.css
'
},
{rel:
'
stylesheet
'
, href:
'
/static/plugins/bootstrap/dist/css/bootstrap
.css
'
},
{rel:
'
stylesheet
'
, href:
'
/static/css/page
‐
learing
‐
list.css
'
}
]
}
},
async asyncData({ store, route }) {
return {
courselist: {},
first_category:{},
second_category:{},
mt:
''
,
st:
''
,
grade:
''
,
keyword:
''
,
total:0,
imgUrl:config
.imgUrl
}
},
data() {
return {
courselist: {},
first_category:{},
second_category:{},
mt:
''
,
st:
''
,
grade:
''
,
keyword:
''
,
imgUrl:config
.imgUrl,
total:0,//总记录数
page:1,//页码
page_size:12//每页显示个数
}
},
watch:{//路由发生变化立即搜索search表示search方法
'
$route
'
:
'
search
'
},
methods: {
//分页触发
handleCurrentChange(page) {
},
//搜索方法
search(){
//刷新当前页面
window.location.reload();
}
}
}
</script>

3.1.5 测试 
重启Nginx，请求：http://www.xuecheng.com/course/search，页面效果如下： 

 
3.2 查询全部 
3.2.1 需求分析 
初次进入页面，没有输入任何查询条件，默认查询全部课程，分页显示。 
3.2.2 API方法 
在api目录创建本工程所用的api方法类，api方法类使用了public.js等一些抽取类：/api/public.js-------------抽取axios 的基础方法/api/util.js-----------------工具类/confifig/sysConfifig.js----系统配置类，配置了系统参数变量创建course.js，作为课程相关业务模块的api方法类。

import http from
'
./public
'
import qs from
'
qs
'
let config
= require(
'
~
/config/sysConfig
'
)
let apiURL =
config
.apiURL
let staticURL =
config
.staticURL
if (typeof window ===
'
undefined
'
) {
apiURL =
config
.backApiURL
staticURL =
config
.backStaticURL
}
/
*
搜索
*
/
export const search_course
=
(page,size,params)
=
> {
let querys
=
qs.stringify(params);
return http
.requestQuickGet(apiURL+
"
/search/course/list/
"
+page+
"
/
"
+size+
"
?
"
+querys);
}

3.2.3搜索方法 
实现思路如下： 
1、用户请求本页面到达node.js
2、在asyncData方法中向服务端请求查询课程 
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)
if (course_data && course_data.
queryResult ) {
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
}
return {
courselist: course_data.
queryResult.list,//课程列表
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.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>
‐‐
>  <!
‐‐
<em>1125人在学习</em>
‐‐
></li>
</ul>
</nuxt
‐
link>
</div>
<li class
=
"
clearfix
"
></li>
</div>