课程列表页
- 主页里面关键字搜索
- 主页里面通过类型导航过去.
需求分析
- 主页里面关键字搜索
没有面包屑(类型层次结果)-没有固定类型
分页查询+排序 select name from t_user where name like xxx order by - 主页里面通过类型导航过去.
有面包屑
分页查询+排序 select name from t_user where name like xxx order by limit 0,10
设计-前端用户搜索
实现
主页跳转列表页
分析：
①主页携带参数跳转到列表页.
location.href = list.html?keyword =xx 关键字
location.href = list.html?courseType=154 课程里跳转 list?productType====>list.html?courseType
②列表页,加载完毕后,获取传递过来keyword ,或者courseType
keyword
①回显搜索框
②以keyword为搜索条件到es中查询分页数据,展示在界面
CouseType
①发送获取面包屑请求,展示在界面
②以CourseType为搜索条件到es中查询分页数据,展示在界面
实现：
改模板,重新生成
接收参数
<script type="text/javascript">
new Vue({
el:"#myBody",
data(){
return {
queryParams:{
"keyword":'',
"CourseTye":null
}
}
},
methods:{
},
mounted(){
//获取路径中值赋值给keyword,keyword在做一个双向绑定
//http://127.0.0.1:6002/list.html?CourseType=102
let url = location.href;
url = url.substr(url.indexOf("?")+1);//CourseType=102
var tmps = url.split("="); //[Coursetype,102]
var paramName = tmps[0]; //keyword CourseType
var paramValue = tmps[1];
//动态属性
this.queryParams[paramName] = paramValue;
console.log(this.queryParams,"jjjjjjjjjjjjjj")
}
});
</script>
类型所独有面包屑实现
根据当前类型获取层级关系,并且每一级都有自己及其兄弟. List<Map<Sring,Object>>
每一级有一个Map表示,里面有两个值,一个是CourseType ownerCourseType;一个是List otherCourseTypes.
2) 后台接口
@Override
public List<Map<String, Object>> getCrumbs(Long courseTypeId) {
List<Map<String,Object>> result = new ArrayList<>();
//1 获取path 1.2.3
CourseType courseType = courseTypeMapper.selectById(courseTypeId);
String path = courseType.getPath();
//2 截取path中各个节点自己 1 2 3
String[] paths = path.split("\\.");
//3 获取自己节点兄弟封装Map,放入List中进行返回
for (String ownerIdStr : paths) {
Map<String,Object> map = new HashMap<>();
Long ownerId = Long.valueOf(ownerIdStr);
System.out.println(ownerId);
//获取每个自己
CourseType owner = courseTypeMapper.selectById(ownerId);
map.put("owner",owner);
//查询兄弟
//获取父亲所有儿子
List<CourseType> allChildren = courseTypeMapper
.selectList(new EntityWrapper<CourseType>().eq("pid",owner.getPid()));
//干掉自己-边遍历边操作(正删改),要用迭代器
Iterator<CourseType> iterator = allChildren.iterator();
while (iterator.hasNext()){
CourseType currentType = iterator.next();
if (currentType.getId().longValue()==owner.getId().longValue()){
iterator.remove();
continue;
}
}
map.put("otherCourseTypes",allChildren);
result.add(map);
}
return result;
}
- 前台
<div class="crumbs-nav crumbs-nav0" v-for="node in crumbs" :key="node" >
<a class="crumbs-title" :href="listUrl + node.owner.id">
{{node.owner.name}}
<i class="icon"></i>
</a>
<div class="crumbs-drop">
<ul class="crumbs-drop-list">
<li v-for="CourseType in node.otherCourseTypes" :key="CourseType">
<a :href="listUrl + CourseType.id">{{CourseType.name}}</a>
</li>
</ul>
</div>
</div>
<div class="crumbs-nav crumbs-nav0" v-on:mouseenter="onMouseenter"
v-on:mouseleave="onMouseleave" v-for="node in crumbs" :key="node" >
<a class="crumbs-title" :href="listUrl + node.owner.id">
{{node.owner.name}}
methods:{
//v-on:mouseenter="onMouseenter" v-on:mouseleave="onMouseleave"
onMouseenter(e) {
var el = e.currentTarget; //当前被移入对象
$(el).toggleClass('curr'); //有就去掉,没有就加上
},
onMouseleave(e){
var el = e.currentTarget;
$(el).toggleClass('curr');
},
select name form t_user where name like order by id desc limit 0,10
后台
@PostMapping("/queryCourses")
public PageList<Map<String,Object>> queryCourses(@RequestBody Map<String,Object> query){
System.out.println(query);
return courseService.queryCourses(query);
}
@Override
public PageList<Map<String, Object>> queryCourses(Map<String,Object> query) {
return esCourseClient.query(query);
}
EsClient
@PostMapping("/query")
PageList<Map<String,Object>> query(@RequestBody Map<String, Object> params){
return esCourseService.query(params);
}
@Override
public PageList<Map<String, Object>> query(Map<String, Object> params) {
// keyword CourseyType brandId priceMin priceMax sortField sortType page rows
String keyword = (String) params.get("keyword"); //查询
String sortField = (String) params.get("sortField"); //排序
String sortType = (String) params.get("sortType");//排序
Long courseType = params.get("CourseType") !=null?Long.valueOf(params.get("CourseType").toString()):null;//过滤
Long priceMin = params.get("priceMin") !=null?Long.valueOf(params.get("priceMin").toString())*100:null;//过滤
Long priceMax = params.get("priceMax") !=null?Long.valueOf(params.get("priceMax").toString())*100:null;//过滤
Long page = params.get("page") !=null?Long.valueOf(params.get("page").toString()):null; //分页
Long rows = params.get("rows") !=null?Long.valueOf(params.get("rows").toString()):null;//分页
//构建器
NativeSearchQueryBuilder builder = new NativeSearchQueryBuilder();
//设置查询条件=查询+过滤
BoolQueryBuilder boolQuery = QueryBuilders.boolQuery();
if (StringUtils.isNotBlank(keyword)){
boolQuery.must(QueryBuilders.matchQuery("all", keyword));
}
List<QueryBuilder> filter = boolQuery.filter();
if (courseType != null){ //类型
System.out.println(courseType+"jjjjjjjjjjjjjjjjjjj");
filter.add(QueryBuilders.termQuery("courseTypeId", courseType));
}
//最大价格 最小价格
//minPrice <= priceMax && maxPrice>=priceMin
if(priceMax!=null &&priceMin != null){
filter.add(QueryBuilders.rangeQuery("price").gte(priceMin).lte(priceMax));
}
builder.withQuery(boolQuery);
//排序
SortOrder defaultSortOrder = SortOrder.DESC;
if (StringUtils.isNotBlank(sortField)){//销量 新品 价格 人气 评论
//如果传入的不是降序改为升序
if (StringUtils.isNotBlank(sortType) && !sortType.equals(SortOrder.DESC)){
defaultSortOrder = SortOrder.ASC;
}
// 价格 索引库有两个字段 最大,最小
//如果用户按照升序就像买便宜的,就用最小价格,如果用户按照降序想买贵的,用最大价格
if (sortField.equals("jg")){
builder.withSort(SortBuilders.fieldSort("price").order(defaultSortOrder));
}
}
//分页
Long pageTmp = page-1; //从0开始
builder.withPageable(PageRequest.of(pageTmp.intValue(), rows.intValue()));
//截取字段 @TODO
//封装数据
Page<EsCourse> CourseDocs = repository.search(builder.build());
List<Map<String,Object>> datas = esCourses2ListMap(CourseDocs.getContent());
return new PageList<>(CourseDocs.getTotalElements(),datas);
}
/**
* 数据转换
* @param content
* @return
*/
private List<Map<String,Object>> esCourses2ListMap(List<EsCourse> content) {
List<Map<String,Object>> result = new ArrayList<>();
for (EsCourse esCourse : content)
{
result.add(esCourse2Map(esCourse));
}
return result;
}
private Map<String,Object> esCourse2Map(EsCourse esCourse) {
Map<String,Object> result = new HashMap<>();
result.put("id", esCourse.getId());
result.put("name", esCourse.getName());
result.put("users", esCourse.getUsers());
result.put("courseTypeId", esCourse.getCourseTypeId());
result.put("courseTypeName", esCourse.getCourseTypeName());
result.put("gradeId", esCourse.getGradeId());
result.put("gradeName", esCourse.getGradeName());
result.put("status", esCourse.getStatus());
result.put("tenantId", esCourse.getTenantId());
result.put("tenantName", esCourse.getTenantName());
result.put("userId", esCourse.getUserId());
result.put("userName", esCourse.getUserName());
result.put("startTime", esCourse.getStartTime());
result.put("endTime", esCourse.getEndTime());
result.put("expires", esCourse.getExpires());
result.put("priceOld", esCourse.getPriceOld());
result.put("price", esCourse.getPrice());
result.put("intro", esCourse.getIntro());
result.put("qq", esCourse.getQq());
result.put("resources", esCourse.getResources());
return result;
}
前台
已经处理了类型和关键字的搜索了.
①其他的可以监视查询对象,如果有变化重新查询.
②当我们选择条件的是否修改查询对象的值就ok了.
课程详情页
当点击列表页中一个课程时,需要跳转到详情页面,里面展示一些想象信息.
页面静态化:
-
经常访问
-
一定时间是不变的.
初始化:上线时进行初始化,下线的时候删除静态页面
数据改变: 删除或修改
实现
页面静态化实现
@Override
public void onLine(Long[] ids) {
//在索引库批量添加数据
List<Course> courseList = mapper.selectBatchIds(Arrays.asList(ids));
List<EsCourse> esCourseList = courseList2EsCourse(courseList);
esCourseClient.batchSave(esCourseList);
//批量修改状态
//update t_course set status = 1,start_time=xxx where id in (1,2,3)
mapper.batchOnline(Arrays.asList(ids));
// @TODO 页面静态化
}
@Override
public void offLine(Long[] ids) {
List<Course> courseList = mapper.selectBatchIds(Arrays.asList(ids));
List<EsCourse> esCourseList = courseList2EsCourse(courseList);
esCourseClient.batchDel(esCourseList);
//批量修改状态
//update t_course set status = 1,start_time=xxx where id in (1,2,3)
mapper.batchOffline(Arrays.asList(ids));
// @TODO 删除静态页面
}
@Override
public boolean deleteById(Serializable id) {
//删除数据库
mapper.deleteById(id);
//判断状态-还要删除索引库
Course course = mapper.selectById(id);
if ( course.getStatus() ==1)
esCourseClient.delete(Integer.valueOf(id.toString()));
// @TODO 同步删除静态页面
return true;
}
@Override
public boolean updateById(Course entity) {
//修改数据库
mapper.updateById(entity);
//判断状态-还要修改索引库
Course course = mapper.selectById(entity.getId());
if ( course.getStatus() ==1)
esCourseClient.save(course2EsCourse(entity));
// @TODO 同步修改-先删除后添加
return true;
}
跳转静态页面
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
