3.2 查询全部

3.2.1 需求分析

初次进入页面,没有输入任何查询条件,默认查询全部课程,分页显示。
在这里插入图片描述
启动搜索服务
在这里插入图片描述

启动 ElasticSearch服务
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
测试接口通了就行了

3.2.2 API方法

在api目录创建本工程所用的api方法类,api方法类使用了public.js等一些抽取类:
/api/public.js-------------抽取axios 的基础方法
/api/util.js-----------------工具类
/config/sysConfig.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方法执行完成开始服务端渲染
在这里插入图片描述
参考index_2.vue代码。
在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
}
}
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
源码中也有内容,说明是服务端渲染

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐