【Django在线教育平台】16.导航选中状态，全局搜索功能实现

# 导航选中状态 ## 视图中添加参数判断 ```html <ul class="nav"> <li><a href="">首页 </a></li> <li {% ifequal current_access_url 'course' %} class="active" {% endifequal %}><a href="{% url 'course:course_list' %}">公开课 </a></li> <li {% ifequal current_access_url 'teacher' %} class="active" {% endifequal %}><a href="{% url 'teacher:teacher_list' %}">授课教师 </a></li> <li {% ifequal current_access_url 'org' %} class="active" {% endifequal %}><a href="{% url 'org:org_list' %}">授课机构</a></li> </ul> ``` ## 模板中截取url判断 如果view很多，在每个view中都需要添加参数，比较麻烦，如果使用截取url的方法，更为简单。 ```html <li {% ifequal request.path '/' %} class="active" {% endifequal %}><a href="{% url 'index' %}">首页 </a></li> <li {% ifequal request.path|slice:'7' '/course' %} class="active" {% endifequal %}><a href="{% url 'course:course_list' %}">公开课 </a></li> <li {% ifequal request.path|slice:'8' '/teacher' %} class="active" {% endifequal %}><a href="{% url 'teacher:teacher_list' %}">授课教师 </a></li> <li {% ifequal request.path|slice:'4' '/org' %} class="active" {% endifequal %}><a href="{% url 'org:org_list' %}">授课机构</a></li> ``` # 全局搜索功能 ## 搜索课程列表 名称、描述、详情都可以被搜索，且不区分大小写 courses/views/py ```python from django.db.models import Q class CourseListView(View): def get(self, request): all_degree = list(map(lambda x: {'code': x[0], 'explain': x[1]}, Course.DEGREE_CHOICES)) # 显示难度等级 all_course = Course.objects.all().order_by('-add_time') # 默认按照时间排序 # 全局搜索---课程列表 search_keywords = request.GET.get('keywords', '') if search_keywords: # 在name字段进行操作, 做like语句的操作。i代表不区分大小写，or操作使用Q all_course = all_course.filter(Q(name__icontains=search_keywords) | Q(desc__icontains=search_keywords) | Q(detail__icontains=search_keywords)) degree_code = request.GET.get('degree', '') if degree_code: all_course = all_course.filter(degree=degree_code) sort = request.GET.get('sort', '') if sort: if sort == 'fav': all_course = all_course.order_by('-fav_nums') # 收藏人数排序 elif sort == 'click': all_course = all_course.order_by('-click_nums') # 点击数排序 elif sort == 'students': all_course = all_course.order_by('-students') # 按学习人数排序 course_nums = all_course.count() # 课程筛选后的数量 # 分页 try: page = request.GET.get('page', 1) except PageNotAnInteger: page = 1 # 这里指从all_course中取8个出来，每页显示8个 p = Paginator(all_course, 8, request=request) all_course_page = p.page(page) hot_course = Course.objects.all().order_by('-students')[:3] # 热门课程选择3个显示 # 标记当前页，用于页面选中active current_access_url = 'course' # 当前时间 time_now = timezone.now() return render(request, 'course-list.html', locals()) ``` ## 搜索课程机构 organization/views.py ```python class OrgListView(View): def get(self, request): # 查找所有的机构 all_org = CourseOrg.objects.all() # 取出所有城市 all_city = CityDict.objects.all() # 机构类别 all_category = list(map(lambda x: {'code': x[0], 'explain': x[1]}, CourseOrg.ORG_CHOICES)) # 热门机构，选择点击数最多的3个机构显示到右边 hot_org = all_org.order_by('-click_nums')[:3] # 全局搜索---课程列表 search_keywords = request.GET.get('keywords', '') if search_keywords: # 在name字段进行操作, 做like语句的操作。i代表不区分大小写，or操作使用Q all_org = all_org.filter(Q(name__icontains=search_keywords) | Q(desc__icontains=search_keywords)) # 处理类别筛选，取回的是字符串 category_code = request.GET.get('category', '') if category_code: all_org = all_org.filter(category=category_code) # 处理城市筛选，取回的是city的ID city_id = request.GET.get('city', '') if city_id: all_org = all_org.filter(city=city_id) # 排序，按照学习人数或者课程数排序 sort = request.GET.get('sort', '') if sort: if sort == 'students': all_org = all_org.order_by('-students') elif sort == 'courses': all_org = all_org.order_by('-course_nums') elif sort == 'fav': all_org = all_org.order_by('-fav_nums') # 机构数量 org_nums = all_org.count() # 对课程机构进行分页 # 尝试获取前台get请求传递过来的page参数 # 如果是不合法的配置参数默认返回第一页 try: page = request.GET.get('page', 1) except PageNotAnInteger: page = 1 # 从列表中取5个出来，也就是每页显示5个 p = Paginator(all_org, 5, request=request) all_org = p.page(page) # 标记当前页，用于页面选中active current_access_url = 'org' return render(request, 'org-list.html', locals()) ``` ## 搜索讲师列表 ```python # 讲师列表 class TeacherListView(View): def get(self, request): all_teacher = Teacher.objects.all().order_by('-click_nums') teacher_nums = all_teacher.count() # 全局搜索---讲师列表 search_keywords = request.GET.get('keywords', '') if search_keywords: # 在name字段进行操作, 做like语句的操作。i代表不区分大小写，or操作使用Q all_teacher = all_teacher.filter(Q(name__icontains=search_keywords) | Q(points__icontains=search_keywords) | Q(org__name__icontains=search_keywords) | Q(work_company__icontains=search_keywords) | Q(work_position__icontains=search_keywords)) sort = request.GET.get('sort', '') if sort: if sort == 'fav': all_teacher = all_teacher.order_by('-fav_nums') try: page = request.GET.get('page', 1) except PageNotAnInteger: page = 1 # 这里每页显示5个 p = Paginator(all_teacher, 5, request=request) all_teacher_page = p.page(page) # 排行榜讲师 rank_teacher = Teacher.objects.all().order_by("-fav_nums", "click_nums")[:5] # 标记当前页，用于页面选中active current_access_url = 'teacher' return render(request, 'teacher-list.html', locals()) ``` ## 全局搜索框及js实现 ```html <div class="search-cate"> <select class="selectpicker" id="search_type"> <option value="course"> 公开课</option> <option value="org"> 课程机构</option> <option value="teacher"> 授课教师</option> </select> <input type="search" id="search_keywords" placeholder="选择搜索..."> <button class="submit" type="button" onclick="search_click()"><i class="icon-magnifier"></i></button> </div> <script type="text/javascript"> // 顶部搜索栏 function search_click() { let search_type = $('#search_type option:selected'), search_keywords = $('#search_keywords').val(); if (search_keywords.replace(/(^\s*)|(\s*$)/g, "") === '') { // 搜索字符串取出两端空格 return; } //alert(search_type.text()); //可以获取选择项的文本 search_type = search_type.val(); let redirect_url = ''; if (search_type === 'course') { redirect_url = "{% url 'course:course_list' %}?keywords=" + search_keywords; } else if (search_type === 'org'){ redirect_url = "{% url 'org:org_list' %}?keywords=" + search_keywords; } else if (search_type === 'teacher') { redirect_url = "{% url 'teacher:teacher_list' %}?keywords=" + search_keywords; } window.location.href = redirect_url; } </script> ``` 

明人不说暗话 领红包就是支持！！！ 来都来了，再到页面底部看下呗~ ↓ ↓ ↓

本文地址： http://blog.starmeow.cn/detail/b1d10e7bafa4421218a51b1e1f1b0ba2/

很赞哦！ (0)