12-搜索前端开发-按分类搜索

最新推荐文章于 2023-06-27 18:26:08 发布

feng_fly_28

最新推荐文章于 2023-06-27 18:26:08 发布

阅读量1.2k

点赞数

分类专栏： day12 搜索前端 Nuxt.js

本文链接：https://blog.csdn.net/minihuabei/article/details/118026455

版权

day12 搜索前端 Nuxt.js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

3.4 按分类搜索

3.4.1 需求分析

1、通过一级分类搜索
2、选择一级分类后将显示下属的二级分类
3、选择二分类进行搜索
4、选择一级分类的全部则表示没有按照分类搜索
5、选择一级分类的全部时二级分类不显示

3.4.2 API方法

课程分类将通过页面静态化的方式写入静态资源下，通过/category/category.json可访问，通过
www.xuecheng.com/static/category/category.json即可访问。
nginx.conf文件代码如下

 location /static/category/ {
        proxy_pass http://static_server_pool;
        }

    #静态资源服务
    upstream static_server_pool{
     server 127.0.0.1:91 weight=10;
    }

        location /static/category/ {
             alias E:/java_www/xcEduUI05/static/category/;
        }

在这里插入图片描述

category.json的内容如下：

{
  "category": [
    {
      "children": [
        {
          "children": [
            {
              "id": "1-1-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "HTML/CSS",
              "name": "HTML/CSS",
              "orderby": 1,
              "parentid": "1-1"
            },
            {
              "id": "1-1-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "JavaScript",
              "name": "JavaScript",
              "orderby": 2,
              "parentid": "1-1"
            },
            {
              "id": "1-1-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "jQuery",
              "name": "jQuery",
              "orderby": 3,
              "parentid": "1-1"
            },
            {
              "id": "1-1-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "ExtJS",
              "name": "ExtJS",
              "orderby": 4,
              "parentid": "1-1"
            },
            {
              "id": "1-1-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "AngularJS",
              "name": "AngularJS",
              "orderby": 5,
              "parentid": "1-1"
            },
            {
              "id": "1-1-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "ReactJS",
              "name": "ReactJS",
              "orderby": 6,
              "parentid": "1-1"
            },
            {
              "id": "1-1-7",
              "isleaf": "1",
              "isshow": "1",
              "label": "Bootstrap",
              "name": "Bootstrap",
              "orderby": 7,
              "parentid": "1-1"
            },
            {
              "id": "1-1-8",
              "isleaf": "1",
              "isshow": "1",
              "label": "Node.js",
              "name": "Node.js",
              "orderby": 8,
              "parentid": "1-1"
            },
            {
              "id": "1-1-9",
              "isleaf": "1",
              "isshow": "1",
              "label": "Vue",
              "name": "Vue",
              "orderby": 9,
              "parentid": "1-1"
            },
            {
              "id": "1-1-10",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 10,
              "parentid": "1-1"
            }
          ],
          "id": "1-1",
          "isleaf": "0",
          "isshow": "1",
          "label": "前端开发",
          "name": "前端开发",
          "orderby": 1,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-2-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "微信开发",
              "name": "微信开发",
              "orderby": 1,
              "parentid": "1-2"
            },
            {
              "id": "1-2-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "iOS",
              "name": "iOS",
              "orderby": 2,
              "parentid": "1-2"
            },
            {
              "id": "1-2-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "手游开发",
              "name": "手游开发",
              "orderby": 3,
              "parentid": "1-2"
            },
            {
              "id": "1-2-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "Swift",
              "name": "Swift",
              "orderby": 4,
              "parentid": "1-2"
            },
            {
              "id": "1-2-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "Android",
              "name": "Android",
              "orderby": 5,
              "parentid": "1-2"
            },
            {
              "id": "1-2-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "ReactNative",
              "name": "ReactNative",
              "orderby": 6,
              "parentid": "1-2"
            },
            {
              "id": "1-2-7",
              "isleaf": "1",
              "isshow": "1",
              "label": "Cordova",
              "name": "Cordova",
              "orderby": 7,
              "parentid": "1-2"
            },
            {
              "id": "1-2-8",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 8,
              "parentid": "1-2"
            }
          ],
          "id": "1-2",
          "isleaf": "0",
          "isshow": "1",
          "label": "移动开发",
          "name": "移动开发",
          "orderby": 2,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-3-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "C/C++",
              "name": "C/C++",
              "orderby": 1,
              "parentid": "1-3"
            },
            {
              "id": "1-3-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "Java",
              "name": "Java",
              "orderby": 2,
              "parentid": "1-3"
            },
            {
              "id": "1-3-3",
              "isleaf": "1",
              "isshow": "1",
              "label": ".NET",
              "name": ".NET",
              "orderby": 3,
              "parentid": "1-3"
            },
            {
              "id": "1-3-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "Objective-C",
              "name": "Objective-C",
              "orderby": 4,
              "parentid": "1-3"
            },
            {
              "id": "1-3-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "Go语言",
              "name": "Go语言",
              "orderby": 5,
              "parentid": "1-3"
            },
            {
              "id": "1-3-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "Python",
              "name": "Python",
              "orderby": 6,
              "parentid": "1-3"
            },
            {
              "id": "1-3-7",
              "isleaf": "1",
              "isshow": "1",
              "label": "Ruby/Rails",
              "name": "Ruby/Rails",
              "orderby": 7,
              "parentid": "1-3"
            },
            {
              "id": "1-3-8",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 8,
              "parentid": "1-3"
            }
          ],
          "id": "1-3",
          "isleaf": "0",
          "isshow": "1",
          "label": "编程开发",
          "name": "编程开发",
          "orderby": 3,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-4-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "Oracle",
              "name": "Oracle",
              "orderby": 1,
              "parentid": "1-4"
            },
            {
              "id": "1-4-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "MySQL",
              "name": "MySQL",
              "orderby": 2,
              "parentid": "1-4"
            },
            {
              "id": "1-4-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "SQL Server",
              "name": "SQL Server",
              "orderby": 3,
              "parentid": "1-4"
            },
            {
              "id": "1-4-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "DB2",
              "name": "DB2",
              "orderby": 4,
              "parentid": "1-4"
            },
            {
              "id": "1-4-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "NoSQL",
              "name": "NoSQL",
              "orderby": 5,
              "parentid": "1-4"
            },
            {
              "id": "1-4-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "Mongo DB",
              "name": "Mongo DB",
              "orderby": 6,
              "parentid": "1-4"
            },
            {
              "id": "1-4-7",
              "isleaf": "1",
              "isshow": "1",
              "label": "Hbase",
              "name": "Hbase",
              "orderby": 7,
              "parentid": "1-4"
            },
            {
              "id": "1-4-8",
              "isleaf": "1",
              "isshow": "1",
              "label": "数据仓库",
              "name": "数据仓库",
              "orderby": 8,
              "parentid": "1-4"
            },
            {
              "id": "1-4-9",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 9,
              "parentid": "1-4"
            }
          ],
          "id": "1-4",
          "isleaf": "0",
          "isshow": "1",
          "label": "数据库",
          "name": "数据库",
          "orderby": 4,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-5-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "机器学习",
              "name": "机器学习",
              "orderby": 1,
              "parentid": "1-5"
            },
            {
              "id": "1-5-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "深度学习",
              "name": "深度学习",
              "orderby": 2,
              "parentid": "1-5"
            },
            {
              "id": "1-5-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "语音识别",
              "name": "语音识别",
              "orderby": 3,
              "parentid": "1-5"
            },
            {
              "id": "1-5-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "计算机视觉",
              "name": "计算机视觉",
              "orderby": 4,
              "parentid": "1-5"
            },
            {
              "id": "1-5-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "NLP",
              "name": "NLP",
              "orderby": 5,
              "parentid": "1-5"
            },
            {
              "id": "1-5-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "强化学习",
              "name": "强化学习",
              "orderby": 6,
              "parentid": "1-5"
            },
            {
              "id": "1-5-7",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 7,
              "parentid": "1-5"
            }
          ],
          "id": "1-5",
          "isleaf": "0",
          "isshow": "1",
          "label": "人工智能",
          "name": "人工智能",
          "orderby": 5,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-6-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "Spark",
              "name": "Spark",
              "orderby": 1,
              "parentid": "1-6"
            },
            {
              "id": "1-6-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "Hadoop",
              "name": "Hadoop",
              "orderby": 2,
              "parentid": "1-6"
            },
            {
              "id": "1-6-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "OpenStack",
              "name": "OpenStack",
              "orderby": 3,
              "parentid": "1-6"
            },
            {
              "id": "1-6-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "Docker/K8S",
              "name": "Docker/K8S",
              "orderby": 4,
              "parentid": "1-6"
            },
            {
              "id": "1-6-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "云计算基础架构",
              "name": "云计算基础架构",
              "orderby": 5,
              "parentid": "1-6"
            },
            {
              "id": "1-6-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "虚拟化技术",
              "name": "虚拟化技术",
              "orderby": 6,
              "parentid": "1-6"
            },
            {
              "id": "1-6-7",
              "isleaf": "1",
              "isshow": "1",
              "label": "云平台",
              "name": "云平台",
              "orderby": 7,
              "parentid": "1-6"
            },
            {
              "id": "1-6-8",
              "isleaf": "1",
              "isshow": "1",
              "label": "ELK",
              "name": "ELK",
              "orderby": 8,
              "parentid": "1-6"
            },
            {
              "id": "1-6-9",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 9,
              "parentid": "1-6"
            }
          ],
          "id": "1-6",
          "isleaf": "0",
          "isshow": "1",
          "label": "云计算/大数据",
          "name": "云计算/大数据",
          "orderby": 6,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-7-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "Photoshop",
              "name": "Photoshop",
              "orderby": 1,
              "parentid": "1-7"
            },
            {
              "id": "1-7-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "3Dmax",
              "name": "3Dmax",
              "orderby": 2,
              "parentid": "1-7"
            },
            {
              "id": "1-7-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "Illustrator",
              "name": "Illustrator",
              "orderby": 3,
              "parentid": "1-7"
            },
            {
              "id": "1-7-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "Flash",
              "name": "Flash",
              "orderby": 4,
              "parentid": "1-7"
            },
            {
              "id": "1-7-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "Maya",
              "name": "Maya",
              "orderby": 5,
              "parentid": "1-7"
            },
            {
              "id": "1-7-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "AUTOCAD",
              "name": "AUTOCAD",
              "orderby": 6,
              "parentid": "1-7"
            },
            {
              "id": "1-7-7",
              "isleaf": "1",
              "isshow": "1",
              "label": "UG",
              "name": "UG",
              "orderby": 7,
              "parentid": "1-7"
            },
            {
              "id": "1-7-8",
              "isleaf": "1",
              "isshow": "1",
              "label": "SolidWorks",
              "name": "SolidWorks",
              "orderby": 8,
              "parentid": "1-7"
            },
            {
              "id": "1-7-9",
              "isleaf": "1",
              "isshow": "1",
              "label": "CorelDraw",
              "name": "CorelDraw",
              "orderby": 9,
              "parentid": "1-7"
            },
            {
              "id": "1-7-10",
              "isleaf": "1",
              "isshow": "1",
              "label": "InDesign",
              "name": "InDesign",
              "orderby": 10,
              "parentid": "1-7"
            },
            {
              "id": "1-7-11",
              "isleaf": "1",
              "isshow": "1",
              "label": "Pro/Engineer",
              "name": "Pro/Engineer",
              "orderby": 11,
              "parentid": "1-7"
            },
            {
              "id": "1-7-12",
              "isleaf": "1",
              "isshow": "1",
              "label": "Cinema 4D",
              "name": "Cinema 4D",
              "orderby": 12,
              "parentid": "1-7"
            },
            {
              "id": "1-7-13",
              "isleaf": "1",
              "isshow": "1",
              "label": "3D Studio",
              "name": "3D Studio",
              "orderby": 13,
              "parentid": "1-7"
            },
            {
              "id": "1-7-14",
              "isleaf": "1",
              "isshow": "1",
              "label": "After Effects（AE）",
              "name": "After Effects（AE）",
              "orderby": 14,
              "parentid": "1-7"
            },
            {
              "id": "1-7-15",
              "isleaf": "1",
              "isshow": "1",
              "label": "原画设计",
              "name": "原画设计",
              "orderby": 15,
              "parentid": "1-7"
            },
            {
              "id": "1-7-16",
              "isleaf": "1",
              "isshow": "1",
              "label": "动画制作",
              "name": "动画制作",
              "orderby": 16,
              "parentid": "1-7"
            },
            {
              "id": "1-7-17",
              "isleaf": "1",
              "isshow": "1",
              "label": "Dreamweaver",
              "name": "Dreamweaver",
              "orderby": 17,
              "parentid": "1-7"
            },
            {
              "id": "1-7-18",
              "isleaf": "1",
              "isshow": "1",
              "label": "Axure",
              "name": "Axure",
              "orderby": 18,
              "parentid": "1-7"
            },
            {
              "id": "1-7-19",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 19,
              "parentid": "1-7"
            }
          ],
          "id": "1-7",
          "isleaf": "0",
          "isshow": "1",
          "label": "UI设计",
          "name": "UI设计",
          "orderby": 7,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-8-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "Cocos",
              "name": "Cocos",
              "orderby": 1,
              "parentid": "1-8"
            },
            {
              "id": "1-8-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "Unity3D",
              "name": "Unity3D",
              "orderby": 2,
              "parentid": "1-8"
            },
            {
              "id": "1-8-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "Flash",
              "name": "Flash",
              "orderby": 3,
              "parentid": "1-8"
            },
            {
              "id": "1-8-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "SpriteKit 2D",
              "name": "SpriteKit 2D",
              "orderby": 4,
              "parentid": "1-8"
            },
            {
              "id": "1-8-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "Unreal",
              "name": "Unreal",
              "orderby": 5,
              "parentid": "1-8"
            },
            {
              "id": "1-8-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 6,
              "parentid": "1-8"
            }
          ],
          "id": "1-8",
          "isleaf": "0",
          "isshow": "1",
          "label": "游戏开发",
          "name": "游戏开发",
          "orderby": 8,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-9-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "无线通信",
              "name": "无线通信",
              "orderby": 1,
              "parentid": "1-9"
            },
            {
              "id": "1-9-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "电子工程",
              "name": "电子工程",
              "orderby": 2,
              "parentid": "1-9"
            },
            {
              "id": "1-9-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "Arduino",
              "name": "Arduino",
              "orderby": 3,
              "parentid": "1-9"
            },
            {
              "id": "1-9-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "体感技术",
              "name": "体感技术",
              "orderby": 4,
              "parentid": "1-9"
            },
            {
              "id": "1-9-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "智能硬件",
              "name": "智能硬件",
              "orderby": 5,
              "parentid": "1-9"
            },
            {
              "id": "1-9-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "驱动/内核开发",
              "name": "驱动/内核开发",
              "orderby": 6,
              "parentid": "1-9"
            },
            {
              "id": "1-9-7",
              "isleaf": "1",
              "isshow": "1",
              "label": "单片机/工控",
              "name": "单片机/工控",
              "orderby": 7,
              "parentid": "1-9"
            },
            {
              "id": "1-9-8",
              "isleaf": "1",
              "isshow": "1",
              "label": "WinCE",
              "name": "WinCE",
              "orderby": 8,
              "parentid": "1-9"
            },
            {
              "id": "1-9-9",
              "isleaf": "1",
              "isshow": "1",
              "label": "嵌入式",
              "name": "嵌入式",
              "orderby": 9,
              "parentid": "1-9"
            },
            {
              "id": "1-9-10",
              "isleaf": "1",
              "isshow": "1",
              "label": "物联网技术",
              "name": "物联网技术",
              "orderby": 10,
              "parentid": "1-9"
            },
            {
              "id": "1-9-11",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 11,
              "parentid": "1-9"
            }
          ],
          "id": "1-9",
          "isleaf": "0",
          "isshow": "1",
          "label": "智能硬件/物联网",
          "name": "智能硬件/物联网",
          "orderby": 9,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-10-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "敏捷开发",
              "name": "敏捷开发",
              "orderby": 1,
              "parentid": "1-10"
            },
            {
              "id": "1-10-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "软件设计",
              "name": "软件设计",
              "orderby": 2,
              "parentid": "1-10"
            },
            {
              "id": "1-10-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "软件测试",
              "name": "软件测试",
              "orderby": 3,
              "parentid": "1-10"
            },
            {
              "id": "1-10-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "研发管理",
              "name": "研发管理",
              "orderby": 4,
              "parentid": "1-10"
            },
            {
              "id": "1-10-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 5,
              "parentid": "1-10"
            }
          ],
          "id": "1-10",
          "isleaf": "0",
          "isshow": "1",
          "label": "研发管理",
          "name": "研发管理",
          "orderby": 10,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-11-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "Linux",
              "name": "Linux",
              "orderby": 1,
              "parentid": "1-11"
            },
            {
              "id": "1-11-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "Windows",
              "name": "Windows",
              "orderby": 2,
              "parentid": "1-11"
            },
            {
              "id": "1-11-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "UNIX",
              "name": "UNIX",
              "orderby": 3,
              "parentid": "1-11"
            },
            {
              "id": "1-11-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "Mac OS",
              "name": "Mac OS",
              "orderby": 4,
              "parentid": "1-11"
            },
            {
              "id": "1-11-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "网络技术",
              "name": "网络技术",
              "orderby": 5,
              "parentid": "1-11"
            },
            {
              "id": "1-11-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "路由协议",
              "name": "路由协议",
              "orderby": 6,
              "parentid": "1-11"
            },
            {
              "id": "1-11-7",
              "isleaf": "1",
              "isshow": "1",
              "label": "无线网络",
              "name": "无线网络",
              "orderby": 7,
              "parentid": "1-11"
            },
            {
              "id": "1-11-8",
              "isleaf": "1",
              "isshow": "1",
              "label": "Ngnix",
              "name": "Ngnix",
              "orderby": 8,
              "parentid": "1-11"
            },
            {
              "id": "1-11-9",
              "isleaf": "1",
              "isshow": "1",
              "label": "邮件服务器",
              "name": "邮件服务器",
              "orderby": 9,
              "parentid": "1-11"
            },
            {
              "id": "1-11-10",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 10,
              "parentid": "1-11"
            }
          ],
          "id": "1-11",
          "isleaf": "0",
          "isshow": "1",
          "label": "系统运维",
          "name": "系统运维",
          "orderby": 11,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-12-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "交互设计",
              "name": "交互设计",
              "orderby": 1,
              "parentid": "1-12"
            },
            {
              "id": "1-12-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "产品设计",
              "name": "产品设计",
              "orderby": 2,
              "parentid": "1-12"
            },
            {
              "id": "1-12-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "原型设计",
              "name": "原型设计",
              "orderby": 3,
              "parentid": "1-12"
            },
            {
              "id": "1-12-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "用户体验",
              "name": "用户体验",
              "orderby": 4,
              "parentid": "1-12"
            },
            {
              "id": "1-12-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "需求分析",
              "name": "需求分析",
              "orderby": 5,
              "parentid": "1-12"
            },
            {
              "id": "1-12-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 6,
              "parentid": "1-12"
            }
          ],
          "id": "1-12",
          "isleaf": "0",
          "isshow": "1",
          "label": "产品经理",
          "name": "产品经理",
          "orderby": 12,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-13-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "运营管理",
              "name": "运营管理",
              "orderby": 1,
              "parentid": "1-13"
            },
            {
              "id": "1-13-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "企业信息化",
              "name": "企业信息化",
              "orderby": 2,
              "parentid": "1-13"
            },
            {
              "id": "1-13-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "网络营销",
              "name": "网络营销",
              "orderby": 3,
              "parentid": "1-13"
            },
            {
              "id": "1-13-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "Office/WPS",
              "name": "Office/WPS",
              "orderby": 4,
              "parentid": "1-13"
            },
            {
              "id": "1-13-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "招聘/面试",
              "name": "招聘/面试",
              "orderby": 5,
              "parentid": "1-13"
            },
            {
              "id": "1-13-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "电子商务",
              "name": "电子商务",
              "orderby": 6,
              "parentid": "1-13"
            },
            {
              "id": "1-13-7",
              "isleaf": "1",
              "isshow": "1",
              "label": "CRM",
              "name": "CRM",
              "orderby": 7,
              "parentid": "1-13"
            },
            {
              "id": "1-13-8",
              "isleaf": "1",
              "isshow": "1",
              "label": "ERP",
              "name": "ERP",
              "orderby": 8,
              "parentid": "1-13"
            },
            {
              "id": "1-13-9",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 9,
              "parentid": "1-13"
            }
          ],
          "id": "1-13",
          "isleaf": "0",
          "isshow": "1",
          "label": "企业/办公/职场",
          "name": "企业/办公/职场",
          "orderby": 13,
          "parentid": "1"
        },
        {
          "children": [
            {
              "id": "1-14-1",
              "isleaf": "1",
              "isshow": "1",
              "label": "密码学/加密/破解",
              "name": "密码学/加密/破解",
              "orderby": 1,
              "parentid": "1-14"
            },
            {
              "id": "1-14-2",
              "isleaf": "1",
              "isshow": "1",
              "label": "渗透测试",
              "name": "渗透测试",
              "orderby": 2,
              "parentid": "1-14"
            },
            {
              "id": "1-14-3",
              "isleaf": "1",
              "isshow": "1",
              "label": "社会工程",
              "name": "社会工程",
              "orderby": 3,
              "parentid": "1-14"
            },
            {
              "id": "1-14-4",
              "isleaf": "1",
              "isshow": "1",
              "label": "漏洞挖掘与利用",
              "name": "漏洞挖掘与利用",
              "orderby": 4,
              "parentid": "1-14"
            },
            {
              "id": "1-14-5",
              "isleaf": "1",
              "isshow": "1",
              "label": "云安全",
              "name": "云安全",
              "orderby": 5,
              "parentid": "1-14"
            },
            {
              "id": "1-14-6",
              "isleaf": "1",
              "isshow": "1",
              "label": "防护加固",
              "name": "防护加固",
              "orderby": 6,
              "parentid": "1-14"
            },
            {
              "id": "1-14-7",
              "isleaf": "1",
              "isshow": "1",
              "label": "代码审计",
              "name": "代码审计",
              "orderby": 7,
              "parentid": "1-14"
            },
            {
              "id": "1-14-8",
              "isleaf": "1",
              "isshow": "1",
              "label": "移动安全",
              "name": "移动安全",
              "orderby": 8,
              "parentid": "1-14"
            },
            {
              "id": "1-14-9",
              "isleaf": "1",
              "isshow": "1",
              "label": "病毒木马",
              "name": "病毒木马",
              "orderby": 9,
              "parentid": "1-14"
            },
            {
              "id": "1-14-10",
              "isleaf": "1",
              "isshow": "1",
              "label": "其它",
              "name": "其它",
              "orderby": 10,
              "parentid": "1-14"
            }
          ],
          "id": "1-14",
          "isleaf": "0",
          "isshow": "1",
          "label": "信息安全",
          "name": "信息安全",
          "orderby": 14,
          "parentid": "1"
        }
      ],
      "id": "1",
      "isleaf": "0",
      "isshow": "1",
      "label": "根结点",
      "name": "根结点",
      "orderby": 1,
      "parentid": "0"
    }
  ]
}

我们需要定义api方法获取所有的分类
在/api/course.js中添加：

/*获取分类*/
export const sysres_category = () => {
return http.requestQuickGet(staticURL+"/static/category/category.json");
}

在这里插入图片描述

3.4.3 在asyncData中查询分类
进入搜索页面将默认显示所有一级分类，当前如果已选择一级分类则要显示所有一级分类及该一级分类下属的二级
分类。
在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)
//查询分类
      let category_data = await courseApi.sysres_category()
      if (course_data && course_data.queryResult ) {
//全部分类
        let category = category_data.category//分部分类
        let first_category = category[0].children//一级分类
        let second_category=[]//二级分类
        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
        }
//遍历一级分类
        for(var i in first_category){
          keywords+=first_category[i].name+' '
          if(mt!=''&& mt == first_category[i].id){
//取出二级分类
            second_category = first_category[i].children;
// console.log(second_category)
            break;
          }
        }
        return {
          courselist: course_data.queryResult.list,//课程列表
          first_category: first_category,
          second_category: second_category,
          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
        }
      }
    },

3.3.4 页面
在页面显示一级分类及二级分类，需要根据当前是否选择一级分类、是否选择二分类显示页面内容。

<ul>
<li>一级分类：</li>
<li v‐if="mt!=''"><nuxt‐link class="title‐link" :to="'/course/search?
keyword='+keyword+'&grade='+grade">全部</nuxt‐link></li>
<li class="all" v‐else>全部</li>
<ol>
<li v‐for="category_v in first_category">
<nuxt‐link class="title‐link all" :to="'/course/search?keyword='+keyword+'&mt=' +
category_v.id" v‐if="category_v.id == mt">{{category_v.name}}</nuxt‐link>
<nuxt‐link class="title‐link" :to="'/course/search?keyword='+keyword+'&mt=' +
category_v.id" v‐else>{{category_v.name}}</nuxt‐link>
</li>
</ol>
<!‐‐<ol>
<li>数据分析</li>
<li>机器学习工程</li>
<li>前端开发工程</li>
</ol>‐‐>
</ul>
<ul>
<li>二级分类：</li>
<li v‐if="st!=''"><nuxt‐link class="title‐link" :to="'/course/search?
keyword='+keyword+'&mt='+mt+'&grade='+grade">全部</nuxt‐link></li>
<li class="all" v‐else>全部</li>
<ol v‐if="second_category.length>0">
<li v‐for="category_v in second_category">
<nuxt‐link class="title‐link all" :to="'/course/search?keyword='+keyword+'&mt='+mt+'&st='
+ category_v.id" v‐if="category_v.id == st">{{category_v.name}}</nuxt‐link>
<nuxt‐link class="title‐link" :to="'/course/search?keyword='+keyword+'&mt='+mt+'&st=' +
category_v.id" v‐else>{{category_v.name}}</nuxt‐link>
</li>
<!‐‐ <li>大数据</li>
<li>云计算</li>‐‐>
</ol>
<!‐‐<a href="#" class="more">更多 ∨</a>‐‐>
</ul>

启动服务
在这里插入图片描述

在这里插入图片描述

预览
在这里插入图片描述

index.vue源码如下：

<template>
  <div>
    <div class="learing-list">
      <div class="list-box">
        <ul>
          <li>关键字：</li>
          <ol>
            <li>{{keyword}}

              <nuxt-link v-if="keyword" class="title-link" :to="'/course/search?keyword=&mt='+mt+'&st=' + st+'&grade='+grade">
                &Chi;
              </nuxt-link>
            </li>
          </ol>
        </ul>
        <ul>
          <li>一级分类：</li>
          <li v-if="mt!=''"><nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&grade='+grade">全部</nuxt-link></li>
          <li class="all" v-else>全部</li>
          <ol>
            <li v-for="category_v in first_category">
              <nuxt-link  class="title-link all" :to="'/course/search?keyword='+keyword+'&mt=' + category_v.id" v-if="category_v.id == mt">{{category_v.name}}</nuxt-link>
              <nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&mt=' + category_v.id" v-else>{{category_v.name}}</nuxt-link>
            </li>
          </ol>
          <!--<ol>
            <li>数据分析</li>
            <li>机器学习工程</li>
            <li>前端开发工程</li>
          </ol>-->
        </ul>
        <ul>
          <li>二级分类：</li>
          <li v-if="st!=''"><nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&mt='+mt+'&grade='+grade">全部</nuxt-link></li>
          <li class="all" v-else>全部</li>
          <ol v-if="second_category.length>0">
            <li v-for="category_v in second_category">
              <nuxt-link  class="title-link all" :to="'/course/search?keyword='+keyword+'&mt='+mt+'&st=' + category_v.id" v-if="category_v.id == st">{{category_v.name}}</nuxt-link>
              <nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&mt='+mt+'&st=' + category_v.id" v-else>{{category_v.name}}</nuxt-link>
            </li>
            <!-- <li>大数据</li>
             <li>云计算</li>-->
          </ol>
          <!--<a href="#" class="more">更多 ∨</a>-->
        </ul>
        <ul>
          <li>难度等级：</li>
          <li v-if="grade!=''">
            <nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade='">全部
            </nuxt-link>
          </li>
          <li class="all" v-else>全部</li>
          <ol>
            <li v-if="grade=='200001'" class="all">初级</li>
            <li v-else><nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade=200001'">初级</nuxt-link></li>
            <li v-if="grade=='200002'" class="all">中级</li>
            <li v-else><nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade=200002'">中级</nuxt-link></li>
            <li v-if="grade=='200003'" class="all">高级</li>
            <li v-else><nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade=200003'">高级</nuxt-link></li>
          </ol>
        </ul>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-md-9 list-row-left">
          <div class="list-cont-left">
            <div class="tit">
              <ul class="nav nav-tabs ">
                <!--<li class="active"><a href="#">推荐</a></li>
                <li><a href="#">最新</a></li>
                <li><a href="#">热评</a></li>-->
                <!-- <div class="page navbar-right">
                   <a href="#" class="prev">
                     < </a>
                   <span class="">1/28</span>
                   <a href="#" class="next"> ></a>
                 </div>-->
              </ul>
            </div>
            <div class="tab-content">
              <div class="content-list">

                <!--<div class="recom-item">
                  <a href="/course/detail?id=1010" target="_blank">
                    <p><img src="/img/widget-demo1.png" width="100%" alt=""><span class="lab">HOT</span></p>
                    <ul>
                      <li>Think PHP 5.0 博客系统实战项目演练 </li>
                      <li><span>高级</span> <em> · </em> 1125人在学习</li>
                    </ul>
                  </a>
                </div>-->
                <div class="recom-item" v-for="(course, index) in courselist">
                  <nuxt-link :to="'/course/detail/'+course.id+'.html'" target="_blank">
                    <div v-if="course.pic">
                      <p><img :src="imgUrl+'/'+course.pic" width="100%" alt=""></p>
                    </div>
                    <div v-else>
                      <p><img src="/img/widget-demo1.png" width="100%" alt=""></p>
                    </div>
                    <ul >
                      <li class="course_title"><span v-html="course.name"></span></li>
                      <li style="float: left"><span v-if="course.charge == '203001'">免费</span><span v-if="course.charge == '203002'">￥{{course.price | money}}</span>
                        <!-- <em> · </em>-->&nbsp;&nbsp;<!--<em>1125人在学习</em>--></li>
                    </ul>
                  </nuxt-link>
                </div>

                <li class="clearfix"></li>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>

          <div style="text-align: center">
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
              :total="total"
              :page-size="page_size"
              :current-page="page"
              prev-text="上一页"
              next-text="下一页">
            </el-pagination>
          </div>
        </div>
        <div class="col-md-3 list-row-rit">
          <div class="list-cont-right">
            <!--精品推荐-->
            <!--#include virtual="/include/BestTop.html"-->
            <!--精品推荐结束-->
            <!--猜你喜欢开始-->
            <div class="right-box">
              <div class="tit">猜你喜欢</div>
              <div class="contList">
                <div class="contList-titB">通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……</div>
                <div class="contList-item">
                  <p>Think PHP 5.0 博客系统实战项目演练</p>
                  <li><span>高级</span> <em> · </em> 1125人在学习</li>
                </div>
                <div class="contList-item">
                  <p>Think PHP 5.0 博客系统实战项目演练</p>
                  <li><span>高级</span> <em> · </em> 1125人在学习</li>
                </div>
                <div class="contList-item">
                  <p>Think PHP 5.0 博客系统实战项目演练</p>
                  <li><span>高级</span> <em> · </em> 1125人在学习</li>
                </div>
                <div class="contList-item">
                  <p>Think PHP 5.0 博客系统实战项目演练</p>
                  <li><span>高级</span> <em> · </em> 1125人在学习</li>
                </div>
              </div>
            </div>
            <!--猜你喜欢结束-->
          </div>
        </div>
      </div>

    </div>

  </div>
</template>
<script>
  //配置文件
  let config = require('~/config/sysConfig')
  import querystring from 'querystring'
  import * as courseApi from '~/api/course'
  export default {
    head() {
      return {
        title: '传智播客-一样的教育,不一样的品质',
        meta: [
          {charset: 'utf-8'},
          {name: 'description', content: '传智播客专注IT培训,Java培训,Android培训,安卓培训,PHP培训,C++培训,网页设计培训,平面设计培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,云计算大数据培训,全栈工程师培训,产品经理培训。'},
          {name: 'keywords', content: this.keywords}
        ],
        link: [
          {rel: 'stylesheet', href: '/static/plugins/normalize-css/normalize.css'},
          {rel: 'stylesheet', href: '/static/plugins/bootstrap/dist/css/bootstrap.css'},
          {rel: 'stylesheet', href: '/static/css/page-learing-list.css'}
        ]
      }
    },
    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)
//查询分类
      let category_data = await courseApi.sysres_category()
      if (course_data && course_data.queryResult ) {
//全部分类
        let category = category_data.category//分部分类
        let first_category = category[0].children//一级分类
        let second_category=[]//二级分类
        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
        }
//遍历一级分类
        for(var i in first_category){
          keywords+=first_category[i].name+' '
          if(mt!=''&& mt == first_category[i].id){
//取出二级分类
            second_category = first_category[i].children;
// console.log(second_category)
            break;
          }
        }
        return {
          courselist: course_data.queryResult.list,//课程列表
          first_category: first_category,
          second_category: second_category,
          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
        }
      }
    },




    data(){
      return {
        courselist: {},
        first_category:{},
        second_category:{},
        mt:'',
        st:'',
        grade:'',
        keyword:'',
        imgUrl:config.imgUrl,
        total:0,//总记录数
        page:1,//页码
        page_size:2//每页显示个数
      }
    },
    watch:{//路由发生变化立即搜索search表示search方法
      '$route':'search'
    },
    methods:{
      //分页触发
      handleCurrentChange(page) {
        this.page = page
        this.$route.query.page = page
        let querys = querystring.stringify(this.$route.query)
        window.location = '/course/search?'+querys;
      },
      search(){
        //刷新当前页面
        window.location.reload();
      }
    },
    mounted(){

    }
  }
</script>
<style>
  a {
    color: #000;
  }
  .el-icon-arrow-left:before {
    content: "<";
  }
  .el-icon-d-arrow-left:before {
    content: "...";
  }
  .el-icon-arrow-right:before {
    content: ">";
  }
  .el-icon-d-arrow-right:before {
    content: "...";
  }
  .el-icon-more:before {
    content: "...";
  }
  .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
    background-color: #fff;
  }
  .course_title{
    height: 20px;
    width: 160px;
    overflow:hidden;
  }
  .eslight{
    color: #990000;
  }
</style>