（项目）在线教育平台（十一）

十五、首页全局配置

1、首页前端页面配置

　　将index.html继承base.html页面，修改继承的block地方：

　　修改base.html页面中导航栏选中状态的代码：

2、全局搜索功能

　　首页的全局搜索功能可以对课程，机构，教师进行全局搜索，搜索的代码放在deco-common.js文件中：

 1 //顶部搜索栏搜索方法
 2 function search_click(){
 3     var type = $('#jsSelectOption').attr('data-value'),
 4         keywords = $('#search_keywords').val(),
 5         request_url = '';
 6     if(keywords == ""){
 7         return
 8     }
 9     if(type == "course"){
10         request_url = "/course/list?keywords="+keywords
11     }else if(type == "teacher"){
12         request_url = "/org/teacher/list?keywords="+keywords
13     }else if(type == "org"){
14         request_url = "/org/list?keywords="+keywords
15     }
16     window.location.href = request_url
17 }

　　只需要在课程列表接口、机构列表接口、讲师列表接口中加入搜索的逻辑即可：

 1 class CourseListView(View):
 2     """课程列表页"""
 3     def get(self, request):
 4         # 获取所有的课程
 5         all_courses = Course.objects.all()
 6 
 7         # 排序（学习人数，点击数）
 8         sort = request.GET.get('sort', '')
 9         if sort:
10             if sort == 'students':
11                 all_courses = all_courses.order_by('-students')
12             elif sort == 'hot':
13                 all_courses = all_courses.order_by('-click_nums')
14 
15         # 热门课程
16         hot_courses = all_courses.order_by('-click_nums')[:2]
17 
18         # 搜索
19         search_keywords = request.GET.get('keywords', '')
20         if search_keywords:
21             all_courses = all_courses.filter(Q(name__icontains=search_keywords)|
22                                              Q(desc__icontains=search_keywords)|
23                                              Q(detail__icontains=search_keywords))
24 
25         # 分页
26         try:
27             page = request.GET.get('page', 1)
28         except PageNotAnInteger:
29             page = 1
30         p = Paginator(all_courses, 3, request=request)
31         courses = p.page(page)
32 
33         return render(request, 'course-list.html', {
34             'all_courses': courses,
35             'sort': sort,
36             'hot_courses': hot_courses
37         })

课程列表接口

 1 class OrgView(View):
 2     """机构列表"""
 3     def get(self, request):
 4         # 取出所有的机构
 5         all_orgs = CourseOrg.objects.all()
 6 
 7         # 取出所有的城市
 8         all_citys = CityDict.objects.all()
 9 
10         # 搜索
11         search_keywords = request.GET.get('keywords', '')
12         if search_keywords:
13             all_orgs = all_orgs.filter(Q(name__icontains=search_keywords)|
14                                        Q(desc__icontains=search_keywords))
15 
16         # 排名筛选(根据点击量排名)
17         hot_orgs = all_orgs.order_by('-click_nums')[:3]
18 
19         # 学习人数和课程数排名筛选
20         sort = request.GET.get('sort', '')
21         if sort:
22             if sort == 'students':
23                 all_orgs = all_orgs.order_by('-students')
24             elif sort == 'courses':
25                 all_orgs = all_orgs.order_by('-course_nums')
26 
27         # 城市筛选(从request中获取城市的id)
28         city_id = request.GET.get('city', '')
29         if city_id:
30             all_orgs = all_orgs.filter(city_id=int(city_id))
31 
32         # 类别筛选(从request中获取机构类别ct)
33         category = request.GET.get('ct', '')
34         if category:
35             all_orgs = all_orgs.filter(category=category)
36 
37         # 筛选完再统计数量
38         org_nums = all_orgs.count()
39 
40         # 分页
41         try:
42             page = request.GET.get('page', 1)
43         except PageNotAnInteger:
44             page = 1
45         p = Paginator(all_orgs, 5, request=request)
46         orgs = p.page(page)
47 
48         return render(request, 'org-list.html', {
49             'all_orgs': orgs,
50             'all_citys': all_citys,
51             'org_nums': org_nums,
52             'city_id': city_id,
53             'category': category,
54             'hot_orgs': hot_orgs,
55             'sort': sort
56         })

机构列表接口

 1 class TeacherListView(View):
 2     """讲师列表页面"""
 3     def get(self, request):
 4         # 获取所有的讲师
 5         all_teachers = Teacher.objects.all()
 6 
 7         # 搜索
 8         search_keywords = request.GET.get('keywords', '')
 9         if search_keywords:
10             all_teachers = all_teachers.filter(name__icontains=search_keywords)
11 
12         # 统计讲师的总数
13         teacher_nums = all_teachers.count()
14 
15         # 排序,按点击数排序
16         sort = request.GET.get('sort', '')
17         if sort:
18             if sort == 'hot':
19                 all_teachers = all_teachers.order_by('-click_nums')
20 
21         # 讲师排行版
22         teacher_sorted = all_teachers.order_by('-click_nums')[:3]
23 
24         # 分页
25         try:
26             page = request.GET.get('page', 1)
27         except PageNotAnInteger:
28             page = 1
29         p = Paginator(all_teachers, 5, request=request)
30         teachers = p.page(page)
31 
32         return render(request, 'teachers-list.html', {
33             'all_teachers': teachers,
34             'teacher_nums': teacher_nums,
35             'sort': sort,
36             'teacher_sorted': teacher_sorted
37         })

讲师列表接口

十六、个人中心

1、个人中心页面

1.1 个人中心前端页面配置

　　在templates目录下新建usercenter-base.html文件，作为个人中心页面的母版，然后将usercenter-info.html页面拷贝到该目录下，并把其中的内容拷贝到母版中，修改其中需要block的地方：

  1 {% load staticfiles %}
  2 
  3 <!DOCTYPE html>
  4 <html>
  5 
  6 <head>
  7     <meta charset="UTF-8">
  8     <meta name="renderer" content="webkit">
  9     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
 10     <title>{% block title %}个人信息- 知能网{% endblock %}</title>
 11     <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
 12     <link rel="stylesheet" type="text/css" href="{% static 'css/animate.css' %}">
 13     <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
 14     <link rel="stylesheet" type="text/css" href="{% static 'js/plugins/queryCity/css/cityLayout.css' %}">
 15 
 16     <link rel="stylesheet" type="text/css" href="{% static 'css/lq.datetimepick.css' %}"/>
 17     {% block custom_css %}{% endblock %}
 18 
 19 
 20     <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
 21     <script src="{% static 'js/jquery-migrate-1.2.1.min.js' %}" type="text/javascript"></script>
 22 
 23 </head>
 24 <body>
 25 <section class="headerwrap headerwrap2">
 26     <header>
 27         <div  class="header2 header">
 28              <div class="top">
 29                 <div class="wp">
 30                     <div class="fl"><p>服务电话：<b>13993601652</b></p></div>
 31                     <!--登录后跳转-->
 32 
 33 
 34                         <div class="personal">
 35                             <dl class="user fr">
 36                                 <dd>bobby<img class="down fr" src="{% static 'images/top_down.png' %}"/></dd>
 37                                 <dt><img width="20" height="20" src="{% static 'media/image/2016/12/default_big_14.png' %}"/></dt>
 38                             </dl>
 39                             <div class="userdetail">
 40                                 <dl>
 41                                     <dt><img width="80" height="80" src="{% static 'media/image/2016/12/default_big_14.png' %}"/></dt>
 42                                     <dd>
 43                                         <h2>django</h2>
 44                                         <p>bobby</p>
 45                                     </dd>
 46                                 </dl>
 47                                 <div class="btn">
 48                                     <a class="personcenter fl" href="usercenter-info.html">进入个人中心</a>
 49                                     <a class="fr" href="/logout/">退出</a>
 50                                 </div>
 51                             </div>
 52                         </div>
 53                         <a href="usercenter-message.html">
 54                             <div class="msg-num"><span id="MsgNum">0</span></div>
 55                         </a>
 56 
 57 
 58                 </div>