一 后端
课程分类嵌套列表接口控制器
@CrossOrigin
@Api(description = "课程分类")
@RestController
@RequestMapping("/api/edu/subject")
public class ApiSubjectController {
@Autowired
private SubjectService subjectService;
/**
* 功能描述:嵌套数据列表
*
* @return R 返回给前端的数据
* @author cakin
* @date 2020/12/19
*/
@ApiOperation("嵌套数据列表")
@GetMapping("nested-list")
public R nestedList() {
List<SubjectVo> subjectVoList = subjectService.nestedList();
return R.ok().data("items", subjectVoList);
}
}
二 安装querystring
# url参数拼接工具
npm install querystring
三 前端
1 定义api
getSubjectNestedList() {
return request({
url: '/api/edu/subject/nested-list',
method: 'get'
})
},
2 网站端的查询条件
网站的前端查询一般要求浏览器的地址栏中体现出查询条件,这样的查询结果可备转发、收藏,例如腾讯课程的课程查询,京东的商品查询等:
3 脚本部分
export default {
async asyncData(page) {
// 组装查询参数
// 查询参数
const searchObj = {}
// 从url地址栏中获取查询参数,用于对页面中相应部分的内容进行高亮显示
const query = page.route.query
searchObj.subjectParentId = query.subjectParentId || ''
searchObj.subjectId = query.subjectId || ''
searchObj.buyCountSort = query.buyCountSort || ''
searchObj.gmtCreateSort = query.gmtCreateSort || ''
searchObj.priceSort = query.priceSort || ''
searchObj.type = query.type || '' // 1:正序,2:倒序
// 课程列表的查询
const courseListResponse = await courseApi.getList(searchObj)
const courseList = courseListResponse.data.courseList
// console.log('courseList', courseList)
// 课程分类列表的查询
const subjectNestedListResponse = await courseApi.getSubjectNestedList()
const subjectNestedList = subjectNestedListResponse.data.items
// 遍历一级分类:查询一级分类下的二级分类
let subSubjectList = []
for (let i = 0; i < subjectNestedList.length; i++) {
if (subjectNestedList[i].id === searchObj.subjectParentId) {
// 组装当前一级分类下的二级分类数据
subSubjectList = subjectNestedList[i].children
}
}
return {
courseList, // 课程列表
subjectNestedList, // 课程分类列表
subSubjectList, // 课程二级分类列表
searchObj // 查询对象
}
},
methods: {
// 下面这一组方法:当点击查询条件的时候:在url地址栏中组装查询参数
// 选择一级分类
searchSubjectLevelOne(subjectParentId) {
// 重新拼装url地址栏,使得让页面根据新的url地址刷新
window.location = 'course?subjectParentId=' + subjectParentId
},
// 选择二级分类
searchSubjectLevelTwo(subjectId) {
// console.log(this.searchObj)
// window.location = 'course?subjectId=' + subjectId + '&subjectParentId=' + this.searchObj.subjectParentId
const queryObj = {
subjectId: subjectId,
subjectParentId: this.searchObj.subjectParentId
}
const querys = querystring.stringify(queryObj)
// console.log(querys)
window.location = 'course?' + querys
},
// 选择按销量倒序
searchBuyCount() {
// console.log(this.searchObj)
// window.location = 'course?buyCountSort=1' + '&subjectId=' + this.searchObj.subjectId + '&subjectParentId=' + this.searchObj.subjectParentId
const queryObj = {
subjectId: this.searchObj.subjectId,
subjectParentId: this.searchObj.subjectParentId,
buyCountSort: 1
}
const querys = querystring.stringify(queryObj)
// console.log(querys)
window.location = 'course?' + querys
},
// 按创建时间排序
searchGmtCreate() {
const queryObj = {
subjectId: this.searchObj.subjectId,
subjectParentId: this.searchObj.subjectParentId,
gmtCreateSort: 1
}
const querys = querystring.stringify(queryObj)
// console.log(querys)
window.location = 'course?' + querys
},
// 按价格排序
searchPrice(type) {
const queryObj = {
subjectId: this.searchObj.subjectId,
subjectParentId: this.searchObj.subjectParentId,
priceSort: 1,
type: type
}
const querys = querystring.stringify(queryObj)
// console.log(querys)
window.location = 'course?' + querys
}
}
}
</script>
4 模板部分
<template>
<div id="aCoursesList" class="bg-fa of">
<!-- 课程列表 开始 -->
<section class="container">
<header class="comm-title">
<h2 class="fl tac">
<span class="c-333">全部课程</span>
</h2>
</header>
<section class="c-sort-box">
<section class="c-s-dl">
<dl>
<dt>
<span class="c-999 fsize14">课程类别</span>
</dt>
<dd class="c-s-dl-li">
<!-- 一级类别 开始-->
<ul class="clearfix">
<li :class="{current:!$route.query.subjectParentId}">
<a
title="全部"
href="javascript:void(0);"
@click="searchSubjectLevelOne('')">全部</a>
</li>
<li
v-for="item in subjectNestedList"
:key="item.id"
:class="{current:$route.query.subjectParentId===item.id}">
<a
:title="item.title"
href="javascript:void(0);"
@click="searchSubjectLevelOne(item.id)">{
{ item.title }}</a>
</li>
</ul>
<!-- /一级类别 结束-->
</dd>
</dl>
<dl>
<dt>
<span class="c-999 fsize14"/>
</dt>
<dd class="c-s-dl-li">
<!-- 二级类别 开始-->
<ul v-if="$route.query.subjectParentId" class="clearfix">
<li :class="{current:!$route.query.subjectId}">
<a
title="全部"
href="javascript:void(0);"
@click="searchSubjectLevelTwo('')">全部</a>
</li>
<li
v-for="item in subSubjectList"
:key="item.id"
:class="{current:$route.query.subjectId===item.id}">
<a
:title="item.title"
href="javascript:void(0);"
@click="searchSubjectLevelTwo(item.id)">{
{ item.title }}</a>
</li>
</ul>
<!-- /二级类别 结束-->
</dd>
</dl>
<div class="clear"/>
</section>
<div class="js-wrap">
<section class="fr">
<span class="c-ccc">
<i class="c-master f-fM">1</i>/
<i class="c-666 f-fM">1</i>
</span>
</section>
<section class="fl">
<!-- 排序 开始-->
<ol class="js-tap clearfix">
<li :class="{'current bg-green': $route.query.buyCountSort}">
<a title="销量" href="javascript:void(0);" @click="searchBuyCount()">销量
<i>↓</i>
</a>
</li>
<li :class="{'current bg-green': $route.query.gmtCreateSort}">
<a title="最新" href="javascript:void(0);" @click="searchGmtCreate()">最新
<i>↓</i>
</a>
</li>
<li :class="{'current bg-green': $route.query.priceSort}">
<a v-if="!$route.query.type || $route.query.type == 1" title="价格" href="javascript:void(0);" @click="searchPrice(2)">价格
<i>↑</i>
</a>
<a v-if="$route.query.type == 2" title="价格" href="javascript:void(0);" @click="searchPrice(1)">价格
<i>↓</i>
</a>
</li>
</ol>
<!-- /排序 结束-->
</section>
</div>
<div class="mt40">
<!-- /无数据提示 开始-->
<section v-if="courseList.length===0" class="no-data-wrap">
<em class="icon30 no-data-ico"> </em>
<span class="c-666 fsize14 ml10 vam">没有相关数据,小编正在努力整理中...</span>
</section>
<!-- /无数据提示 结束-->
<!-- 数据列表 开始-->
<article v-if="courseList.length>0" class="comm-course-list">
<ul id="bna" class="of">
<li v-for="item in courseList" :key="item.id">
<div class="cc-l-wrap">
<section class="course-img">
<img :src="item.cover" :alt="item.title" class="img-responsive">
<div class="cc-mask">
<a :href="'/course/'+item.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a :href="'/course/'+item.id" :title="item.title" class="course-title fsize18 c-333">{
{ item.title }}</a>
</h3>
<section class="mt10 hLh20 of">
<span v-if="Number(item.price) === 0" class="fr jgTag bg-green">
<i class="c-fff fsize12 f-fA">免费</i>
</span>
<span v-else class="fr jgTag ">
<i class="c-orange fsize12 f-fA"> ¥{
{ item.price }}</i>
</span>
<span class="fl jgAttr c-ccc f-fA">
<i class="c-999 f-fA">{
{ item.viewCount }}人学习</i>
|
<i class="c-999 f-fA">{
{ item.buyCount }}人购买</i>
</span>
</section>
</div>
</li>
</ul>
<div class="clear"/>
</article>
<!-- /数据列表 结束-->
</div>
</section>
</section>
<!-- /课程列表 结束 -->
</div>
</template>