九、机构首页功能
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中收藏状态显示的问题：
