九、机构首页功能
1、机构首页页面
1.1 前端页面配置
将机构首页页面org-detail-homepage.html拷贝到templates下。
机构首页、机构描述、机构教师、机构课程四个页面的结构大体相同，可以创建一个母版，这个个页面继承这个母版即可，在templates下新建org_base.html，将org-detail-homepage.html的内容拷贝到org_base.html，找出需要block的地方和修改静态文件路径：
然后将需要继承的部分拷贝到org-detail-homepage.html下：
1.2 机构首页接口
我们需要获取机构有哪些课程，需要在课程的model中添加一个机构的外键，course/models.py：
1 class Course(models.Model): 2 """课程""" 3 DEGREE_CHOICES = ( 4 (\'cj\', \'初级\'), 5 (\'zj\', \'中级\'), 6 (\'gj\', \'高级\') 7 ) 8 9 name = models.CharField(\'课程名\', max_length=50) 10 desc = models.CharField(\'课程描述\', max_length=300) 11 detail = models.TextField(\'课程详情\') 12 degree = models.CharField(\'课程难度\', choices=DEGREE_CHOICES, max_length=2) 13 learn_times = models.IntegerField(\'学习时长（分钟数）\', default=0) 14 students = models.IntegerField(\'学习人数\', default=0) 15 fav_nums = models.IntegerField(\'收藏人数\', default=0) 16 click_nums = models.IntegerField(\'点击数\', default=0) 17 image = models.ImageField(\'封面图\', upload_to=\'courses/%Y/%m\', max_length=100) 18 course_org = models.ForeignKey(CourseOrg, verbose_name=\'所属机构\', on_delete=models.CASCADE, null=True, blank=True) 19 add_time = models.DateTimeField(\'添加时间\', default=datetime.now) 20 21 class Meta: 22 verbose_name = \'课程\' 23 verbose_name_plural = verbose_name 24 25 def __str__(self): 26 return self.name
必须迁移数据库。
然后开始编写机构首页的接口：
1 class OrgHomeView(View): 2 """机构主页""" 3 def get(self, request, org_id): 4 # 根据前端的id找机构 5 org = CourseOrg.objects.get(id=int(org_id)) 6 7 # 反向查询机构所有的课程和教师 8 all_courses = org.course_set.all() 9 all_teachers =org.teacher_set.all() 10 11 return render(request, \'org-detail-homepage.html\', { 12 \'org\': org, 13 \'all_courses\': all_courses, 14 \'all_teachers\': all_teachers 15 })
在organization/urls.py中添加机构首页的url：
from .views import OrgHomeView urlpatterns = [ re_path(\'home/(?P<org_id>\d+)/\', OrgHomeView.as_view(), name="org_home"), # 机构主页 ]
修改前端机构首页页面显示机构课程的代码：
然后修改机构列表页点击机构之后进入机构首页的url，修改org-list.html：
然后修改org-base.html中的几个图片显示的问题：
现在修改机构首页显示教师的前端页面的代码，不过在这之前需要在机构的model中的Teacher中加入image字段：
1 class Teacher(models.Model): 2 """机构老师""" 3 org = models.ForeignKey(CourseOrg, verbose_name=\'所属机构\', on_delete=models.CASCADE) 4 name = models.CharField(\'老师名\', max_length=50) 5 work_years =models.IntegerField(\'工作年限\', default=0) 6 work_company = models.CharField(\'就职公司\', max_length=50) 7 work_position = models.CharField(\'工作职位\', max_length=50) 8 points = models.CharField(\'教学特点\', max_length=50) 9 click_nums = models.IntegerField(\'点击数\', default=0) 10 fav_nums = models.IntegerField(\'收藏数\', default=0) 11 image = models.ImageField(\'头像\', upload_to=\'teacher/%Y/%m\', max_length=100, default=\'\') 12 add_time = models.DateTimeField(\'添加时间\', default=datetime.now) 13 14 class Meta: 15 verbose_name = \'教师\' 16 verbose_name_plural = verbose_name 17 18 def __str__(self): 19 return \'[{}]机构的教师:{}\'.format(self.org.name, self.name)
迁移数据库。
然后修改前端代码：
最后修改就够首页显示机构描述的代码：
然后在后台添加课程和教师数据。刷新机构首页即可看到数据。
2、机构课程页面
2.1 前端页面配置
将机构课程的页面org-detail-course.html拷贝到templates下。
该页面继承org_base.html页面，重写需要block的地方：
2.2 机构课程接口
1 class OrgCourseView(View): 2 """机构课程页面""" 3 def get(self, request, org_id): 4 # 根据前端的id找机构 5 org = CourseOrg.objects.get(id=int(org_id)) 6 7 # 在该机构中反向查询到该机构的所有课程 8 all_courses = org.course_set.all() 9 10 return render(request, \'org-detail-course.html\', { 11 \'org\': org, 12 \'all_courses\': all_courses 13 })
然后配置url：
1 from .views import OrgCourseView 2 3 urlpatterns = [ 4 re_path(\'course/(?P<org_id>\d+)/\', OrgCourseView.as_view(), name=\'org_course\'), # 机构课程 5 ]
修改org_base.html中跳转机构首页和机构课程的url：
然后修改机构课程页面显示的代码：
现在刷新之后就可以看到全部课程，但是有一个问题是左侧的导航栏没有选中状态，需要在各自的接口中向前端传递一个参数来记录当前是那个页面，让前端判断：
机构首页接口添加标记：
1 class OrgHomeView(View): 2 """机构首页页面""" 3 def get(self, request, org_id): 4 # 根据前端的id找机构 5 org = CourseOrg.objects.get(id=int(org_id)) 6 7 # 反向查询机构所有的课程和教师 8 all_courses = org.course_set.all() 9 all_teachers =org.teacher_set.all() 10 11 # 标记 12 current_page = \'home\' 13 14 return render(request, \'org-detail-homepage.html\', { 15 \'org\': org, 16 \'all_courses\': all_courses, 17 \'all_teachers\': all_teachers, 18 \'current_page\': current_page 19 })
机构课程结构添加标记：
1 class OrgCourseView(View): 2 """机构课程页面""" 3 def get(self, request, org_id): 4 # 根据前端的id找机构 5 org = CourseOrg.objects.get(id=int(org_id)) 6 7 # 在该机构中反向查询到该机构的所有课程 8 all_courses = org.course_set.all() 9 10 # 标记 11 current_page = \'course\' 12 13 return render(request, \'org-detail-course.html\', { 14 \'org\': org, 15 \'all_courses\': all_courses, 16 \'current_page\': current_page 17 })
然后在前端org_base.html的页面进行状态判断选定：
3、机构介绍页面
3.1 前端页面配置
将机构介绍的页面org-detail-desc.html拷贝到templates下。
该页面继承org_base.html页面，重写需要block的地方：
3.2 机构介绍接口
1 class OrgDescView(View): 2 """机构介绍页面""" 3 def get(self, request, org_id): 4 # 根据前端的id找到机构 5 org = CourseOrg.objects.get(id=int(org_id)) 6 7 # 标记 8 current_page = \'desc\' 9 10 return render(request, \'org-detail-desc.html\', { 11 \'org\': org, 12 \'current_page\': current_page 13 })
配置url：
1 from .views import OrgDescView 2 3 4 urlpatterns = [ 5 re_path(\'desc/(?P<org_id>\d+)/\', OrgDescView.as_view(), name=\'org_desc\'), # 机构介绍 6 ]
然后修改机构介绍前端的显示代码：
最后修改org_base.html中跳转机构介绍页面的url：
刷新页面即可看到机构介绍的内容。
4、机构讲师页面
4.1 前端页面配置
将机构讲师的页面org-detail-teachers.html拷贝到templates下。
该页面继承org_base.html页面，重写需要block的地方：
4.2 机构讲师接口
1 class OrgTeacherView(View): 2 """机构讲师页面""" 3 def get(self, request, org_id): 4 # 根据前端id找对机构 5 org = CourseOrg.objects.get(id=int(org_id)) 6 7 # 在机构表中反向查询所有的讲师 8 all_teachers = org.teacher_set.all() 9 10 # 标记 11 current_page = \'teacher\' 12 13 return render(request, \'org-detail-teachers.html\', { 14 \'org\': org, 15 \'all_teachers\': all_teachers, 16 \'current_page\': current_page 17 })
配置url：
1 from .views import OrgTeacherView 2 3 urlpatterns = [ 4 re_path(\'teacher/(?P<org_id>\d+)/\', OrgTeacherView.as_view(), name=\'org_teacher\'), # 机构讲师 5 ]
然后修改机构讲师页面前端的代码：
最后修改org_base.html中跳转到机构讲师的url：
5、机构收藏功能
5.1 收藏接口
1 class OrgFavView(View): 2 """机构收藏""" 3 def post(self, request): 4 # 从request中获取收藏的机构id和类型 5 id = request.POST.get(\'fav_id\', 0) 6 type = request.POST.get(\'fav_type\', 0) 7 8 # 未登录返回json数据到前端，由前端进行登录页面的跳转 9 if not request.user.is_authenticated: 10 return HttpResponse(\'{"status": "fail", "msg": "用户未登录"}\', content_type=\'application/json\') 11 12 # 在数据库中查找是否有过收藏记录: 13 exist_record = UserFavorite.objects.filter(user=request.user, fav_id=int(id), fav_type=int(type)) 14 if exist_record: 15 # 记录存在，取消收藏 16 exist_record.delete() 17 return HttpResponse(\'{"status": "success", "msg": "收藏"}\', content_type=\'application/json\') 18 else: 19 # 记录不存在，收藏 20 user_fav = UserFavorite() 21 if int(id)>0 and int(type)>0: 22 user_fav.user = request.user 23 user_fav.fav_id = int(id) 24 user_fav.fav_type = int(type) 25 user_fav.save() 26 return HttpResponse(\'{"status": "success", "msg": "已收藏"}\', content_type=\'application/json\') 27 else: 28 return HttpResponse(\'{"status": "fail", "msg": "收藏出错"}\', content_type=\'application/json\')
配置url：
1 from .views import OrgFavView 2 3 urlpatterns = [ 4 path(\'add_fav/\', OrgFavView.as_view(), name=\'add_fav\'), # 收藏 5 ]
收藏是通过ajax异步操作的，用户点击收藏，通过post方法后端进行添加收藏，取消收藏的操作，然后返回相应的json数据到前端，由前端进行显示，前端的script代码在org_base。html中，修改如下地方：
现在点击收藏（取消收藏），查看数据库中状态已经改变了，但是还有个问题就是刷新页面之后，即使是已收藏还是显示收藏，这是因为在显示的时候没有添加判断，需要在四个页面的接口中都要添加判断条件：
1 class OrgHomeView(View): 2 """机构首页页面""" 3 def get(self, request, org_id): 4 # 根据前端的id找机构 5 org = CourseOrg.objects.get(id=int(org_id)) 6 7 # 反向查询机构所有的课程和教师 8 all_courses = org.course_set.all() 9 all_teachers =org.teacher_set.all() 10 11 # 标记 12 current_page = \'home\' 13 14 # 判断收藏状态 15 has_fav = False 16 if request.user.is_authenticated: 17 if UserFavorite.objects.filter(user=request.user, fav_id=org.id, fav_type=2): 18 has_fav = True 19 20 return render(request, \'org-detail-homepage.html\', { 21 \'org\': org, 22 \'all_courses\': all_courses, 23 \'all_teachers\': all_teachers, 24 \'current_page\': current_page, 25 \'has_fav\': has_fav 26 }) 27 28 29 class OrgCourseView(View): 30 """机构课程页面""" 31 def get(self, request, org_id): 32 # 根据前端的id找机构 33 org = CourseOrg.objects.get(id=int(org_id)) 34 35 # 在该机构中反向查询到该机构的所有课程 36 all_courses = org.course_set.all() 37 38 # 标记 39 current_page = \'course\' 40 41 # 判断收藏状态 42 has_fav = False 43 if request.user.is_authenticated: 44 if UserFavorite.objects.filter(user=request.user, fav_id=org.id, fav_type=2): 45 has_fav = True 46 47 return render(request, \'org-detail-course.html\', { 48 \'org\': org, 49 \'all_courses\': all_courses, 50 \'current_page\': current_page, 51 \'has_fav\': has_fav 52 }) 53 54 55 class OrgDescView(View): 56 """机构介绍页面""" 57 def get(self, request, org_id): 58 # 根据前端的id找到机构 59 org = CourseOrg.objects.get(id=int(org_id)) 60 61 # 标记 62 current_page = \'desc\' 63 64 # 判断收藏状态 65 has_fav = False 66 if request.user.is_authenticated: 67 if UserFavorite.objects.filter(user=request.user, fav_id=org.id, fav_type=2): 68 has_fav = True 69 70 return render(request, \'org-detail-desc.html\', { 71 \'org\': org, 72 \'current_page\': current_page, 73 \'has_fav\': has_fav 74 }) 75 76 77 class OrgTeacherView(View): 78 """机构讲师页面""" 79 def get(self, request, org_id): 80 # 根据前端id找对机构 81 org = CourseOrg.objects.get(id=int(org_id)) 82 83 # 在机构表中反向查询所有的讲师 84 all_teachers = org.teacher_set.all() 85 86 # 标记 87 current_page = \'teacher\' 88 89 # 判断收藏状态 90 has_fav = False 91 if request.user.is_authenticated: 92 if UserFavorite.objects.filter(user=request.user, fav_id=org.id, fav_type=2): 93 has_fav = True 94 95 return render(request, \'org-detail-teachers.html\', { 96 \'org\': org, 97 \'all_teachers\': all_teachers, 98 \'current_page\': current_page, 99 \'has_fav\': has_fav 100 })
然后修改org_base.html中收藏状态显示的问题：