• (项目)在线教育平台(七)


    九、机构首页功能

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

      然后修改org_base.html中收藏状态显示的问题:

  • 相关阅读:
    快速排序算法
    冒泡排序
    正则表达式
    博客园 自定义 个性主题优化 这是我迄今为止用过的最好的模板 silence
    Python 中 如何复制图片?如何更改图片存储路径? 在遇无数坑后的最全解答 百试百灵
    作业test
    day69
    day68
    day67
    day67test
  • 原文地址:https://www.cnblogs.com/Sweltering/p/9974833.html
Copyright © 2020-2023  润新知