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.totalif( 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-paginationbackgroundlayout="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.totalif( 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 = pagethis.$route.query.page = pagelet 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>

12-搜索前端开发-按分类搜索相关推荐

html5搜索框在最右侧,html5搜索框特效点击搜索框弹出分类搜索框代码
特效描述:html5搜索框特效点击搜索框弹出分类搜索框.点击搜索框弹出分类搜索框代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Search People Sara Soue ...
前端开发：自定义搜索框（含联想搜索）
在前端开发过程中,搜索功能是比较常见的功能,也是在项目开发过程中比较常见的需求.搜索框功能常用的几种需求也都是大同小异,但是实用的搜索框可以作为一个例子来写是很有必要的,那么本篇博文就来分享一下前端开 ...
广州地区12月份前端开发真实面试题---部分附带照片
前言最近在找工作,所以进了一些同样找工作的群,发现群友发的面试题都相对大同小异,如果只考理论或笔试,把这篇理解透都没有太大问题.这里并不打算展开介绍,主要是方便自己记忆写的,如果看不懂可以把题目拿去 ...
html开发列表搜索,前端实例练习 - 可搜索列表
可搜索列表初衷:很多人在初学前端的时候都会问,"如何入门前端?" 同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 "入门级" 的教材并不太 ...
android开发访问百度搜索,Android开发如何添加搜索功能———大神求救啊
该楼层疑似违规已被系统折叠隐藏此楼查看此楼网上的添加搜索功能没有给全代码,反正这些代码在我的程序里就出错下面上代码- - searchable.xml 放在res/xml里的 android=& ...
09-搜索前端开发-搜索页面
3 搜索前端开发 3.1 搜索页面 3.1.1 需求分析上图是课程搜索前端的界面,用户通过前端向服务端发起搜索请求,搜索功能包括: 1.界面默认查询所有课程,并分页显示 2.通过一级分类和二分类搜索 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·009【搜索页开发】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [035]搜索页开发(上) 开发内容具体方法核心 ...
web前端是什么？如何能成为一名合格的前端开发工程师？
对于刚刚接触前端,并且以后想从事前端开发行业的小伙伴们,肯定都有过这样的疑问,如何才能成为一名合格的前端开发工程师呢? 相信这个问题是所有刚刚准备入行的小伙伴们都比较关心的. 如果大家在一些搜索引擎上 ...
如何能成为一名合格的前端开发工程师？
对于刚刚接触前端,并且以后想从事前端开发行业的小伙伴们,肯定都有过这样的疑问,如何才能成为一名合格的前端开发工程师呢? 相信这个问题是所有刚刚准备入行的小伙伴们都比较关心的. 如果大家在一些搜索引擎上 ...
前端修炼の道 | 如何成为一名合格前端开发工程师？
上期回顾在上一节我们已了解前端开发是做什么的,现在的问题是,如何才能成为一名合格的前端开发工程师? 相信这个问题是大家比较关心的. 前端开发工程师如果大家在一些搜索引擎上搜索"前端开发工 ...

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

3.4 按分类搜索

3.4.1 需求分析

3.4.2 API方法

12-搜索前端开发-按分类搜索相关推荐

最新文章

热门文章