网站端课程分类与排序

缺乏、安全感 2021-07-24 19:59 499阅读 0赞

# 一 后端 #

课程分类嵌套列表接口控制器

@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 网站端的查询条件 ##

网站的前端查询一般要求浏览器的地址栏中体现出查询条件，这样的查询结果可备转发、收藏，例如腾讯课程的课程查询，京东的商品查询等：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

## 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>

# 四 测试结果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/5541553261e64359b67c5ef837c60686.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/0659cffe99c947f29fd147feabe7e3e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/f52c4767e9be4f1cabc8cbcf62a02a9b.png