首页 > > 网络编程 > 其它 >

（项目）在线教育平台（七）

2018-11-20 03:25:18来源：博客园阅读 ()

九、机构首页功能

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         })