3.2 查询全部
3.2.1 需求分析
初次进入页面，没有输入任何查询条件，默认查询全部课程，分页显示。 3.2.2 API方法
在api目录创建本工程所用的api方法类，api方法类使用了public.js等一些抽取类：
/api/public.js-------------抽取axios 的基础方法 /api/util.js-----------------工具类 /config/sysConfig.js----系统配置类，配置了系统参数变量
创建course.js，作为课程相关业务模块的api方法类。
[mw_shl_code=applescript,true]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); }[/mw_shl_code]
3.2.3搜索方法
实现思路如下：
1、用户请求本页面到达node.js
2、在asyncData方法中向服务端请求查询课程
3、asyncData方法执行完成开始服务端渲染
在asyncData中执行搜索，代码如下：
[mw_shl_code=applescript,true]
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,[/mw_shl_code]
[mw_shl_code=applescript,true]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
}
}
}
[/mw_shl_code]
3.2.5 页面
在页面中展示课程列表。
[mw_shl_code=applescript,true]<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>[/mw_shl_code]
3.3.1 服务端代码
[mw_shl_code=applescript,true]... //分页 //当前页码 if(page<=0){
page = 1; } //起始记录下标 int from = (page ‐1) * size; searchSourceBuilder.from(from); searchSourceBuilder.size(size); ...[/mw_shl_code]
3.3.2 前端代码
使用Element-UI的el-pagination分页插件：
[mw_shl_code=applescript,true]<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>
[/mw_shl_code]
定义分页触发方法：
[mw_shl_code=applescript,true]methods:{ //分页触发
handleCurrentChange(page) {
this.page = page
this.$route.query.page = page
let querys = querystring.stringify(this.$route.query)
window.location = '/course/search?'+querys; } ... [/mw_shl_code]
