網站端課程分類與排序

一 後端

課程分類嵌套列表接口控制器

@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">&nbsp;</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>

四 測試結果