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

九、机构首页功能

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：

class Course(models.Model):
    """课程"""
    DEGREE_CHOICES = (
        ('cj', '初级'),
        ('zj', '中级'),
        ('gj', '高级')
    )

    name = models.CharField('课程名', max_length=50)
    desc = models.CharField('课程描述', max_length=300)
    detail = models.TextField('课程详情')
    degree = models.CharField('课程难度', choices=DEGREE_CHOICES, max_length=2)
    learn_times = models.IntegerField('学习时长（分钟数）', default=0)
    students = models.IntegerField('学习人数', default=0)
    fav_nums = models.IntegerField('收藏人数', default=0)
    click_nums = models.IntegerField('点击数', default=0)
    image = models.ImageField('封面图', upload_to='courses/%Y/%m', max_length=100)
    course_org = models.ForeignKey(CourseOrg, verbose_name='所属机构', on_delete=models.CASCADE, null=True, blank=True)
    add_time = models.DateTimeField('添加时间', default=datetime.now)

    class Meta:
        verbose_name = '课程'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.name

　　必须迁移数据库。

　　然后开始编写机构首页的接口：

class OrgHomeView(View):
    """机构主页"""
    def get(self, request, org_id):
        # 根据前端的id找机构
        org = CourseOrg.objects.get(id=int(org_id))

        # 反向查询机构所有的课程和教师
        all_courses = org.course_set.all()
        all_teachers =org.teacher_set.all()

        return render(request, 'org-detail-homepage.html', {
            'org': org,
            'all_courses': all_courses,
            'all_teachers': all_teachers
        })

　　在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字段：

class Teacher(models.Model):
    """机构老师"""
    org = models.ForeignKey(CourseOrg, verbose_name='所属机构', on_delete=models.CASCADE)
    name = models.CharField('老师名', max_length=50)
    work_years =models.IntegerField('工作年限', default=0)
    work_company = models.CharField('就职公司', max_length=50)
    work_position = models.CharField('工作职位', max_length=50)
    points = models.CharField('教学特点', max_length=50)
    click_nums = models.IntegerField('点击数', default=0)
    fav_nums = models.IntegerField('收藏数', default=0)
    image = models.ImageField('头像', upload_to='teacher/%Y/%m', max_length=100, default='')
    add_time = models.DateTimeField('添加时间', default=datetime.now)

    class Meta:
        verbose_name = '教师'
        verbose_name_plural = verbose_name

    def __str__(self):
        return '[{}]机构的教师:{}'.format(self.org.name, self.name)

　　迁移数据库。

　　然后修改前端代码：

　　最后修改就够首页显示机构描述的代码：

　　然后在后台添加课程和教师数据。刷新机构首页即可看到数据。

2、机构课程页面

2.1 前端页面配置

　　将机构课程的页面org-detail-course.html拷贝到templates下。

　　该页面继承org_base.html页面，重写需要block的地方：

2.2 机构课程接口

class OrgCourseView(View):
    """机构课程页面"""
    def get(self, request, org_id):
        # 根据前端的id找机构
        org = CourseOrg.objects.get(id=int(org_id))

        # 在该机构中反向查询到该机构的所有课程
        all_courses = org.course_set.all()

        return render(request, 'org-detail-course.html', {
            'org': org,
            'all_courses': all_courses
        })

　　然后配置url：

from .views import OrgCourseView

urlpatterns = [
    re_path('course/(?P<org_id>d+)/', OrgCourseView.as_view(), name='org_course'),  # 机构课程
]

　　修改org_base.html中跳转机构首页和机构课程的url：

　　然后修改机构课程页面显示的代码：

　　现在刷新之后就可以看到全部课程，但是有一个问题是左侧的导航栏没有选中状态，需要在各自的接口中向前端传递一个参数来记录当前是那个页面，让前端判断：

　　机构首页接口添加标记：

class OrgHomeView(View):
    """机构首页页面"""
    def get(self, request, org_id):
        # 根据前端的id找机构
        org = CourseOrg.objects.get(id=int(org_id))

        # 反向查询机构所有的课程和教师
        all_courses = org.course_set.all()
        all_teachers =org.teacher_set.all()

        # 标记
        current_page = 'home'

        return render(request, 'org-detail-homepage.html', {
            'org': org,
            'all_courses': all_courses,
            'all_teachers': all_teachers,
            'current_page': current_page
        })

　　机构课程结构添加标记：

　　

class OrgCourseView(View):
    """机构课程页面"""
    def get(self, request, org_id):
        # 根据前端的id找机构
        org = CourseOrg.objects.get(id=int(org_id))

        # 在该机构中反向查询到该机构的所有课程
        all_courses = org.course_set.all()

        # 标记
        current_page = 'course'

        return render(request, 'org-detail-course.html', {
            'org': org,
            'all_courses': all_courses,
            'current_page': current_page
        })

　　然后在前端org_base.html的页面进行状态判断选定：

3、机构介绍页面

3.1 前端页面配置

　　将机构介绍的页面org-detail-desc.html拷贝到templates下。

　　该页面继承org_base.html页面，重写需要block的地方：

3.2 机构介绍接口

class OrgDescView(View):
    """机构介绍页面"""
    def get(self, request, org_id):
        # 根据前端的id找到机构
        org = CourseOrg.objects.get(id=int(org_id))

        # 标记
        current_page = 'desc'

        return render(request, 'org-detail-desc.html', {
            'org': org,
            'current_page': current_page
        })

　　配置url：

from .views import OrgDescView


urlpatterns = [
    re_path('desc/(?P<org_id>d+)/', OrgDescView.as_view(), name='org_desc'),  # 机构介绍
]

　　然后修改机构介绍前端的显示代码：

　　最后修改org_base.html中跳转机构介绍页面的url：

　　刷新页面即可看到机构介绍的内容。

4、机构讲师页面

4.1 前端页面配置

　　将机构讲师的页面org-detail-teachers.html拷贝到templates下。

　　该页面继承org_base.html页面，重写需要block的地方：

4.2 机构讲师接口

class OrgTeacherView(View):
    """机构讲师页面"""
    def get(self, request, org_id):
        # 根据前端id找对机构
        org = CourseOrg.objects.get(id=int(org_id))

        # 在机构表中反向查询所有的讲师
        all_teachers = org.teacher_set.all()

        # 标记
        current_page = 'teacher'

        return render(request, 'org-detail-teachers.html', {
            'org': org,
            'all_teachers': all_teachers,
            'current_page': current_page
        })

　　配置url：

from .views import OrgTeacherView

urlpatterns = [
    re_path('teacher/(?P<org_id>d+)/', OrgTeacherView.as_view(), name='org_teacher'),  # 机构讲师
]

　　然后修改机构讲师页面前端的代码：

　　最后修改org_base.html中跳转到机构讲师的url：

5、机构收藏功能

5.1 收藏接口

class OrgFavView(View):
    """机构收藏"""
    def post(self, request):
        # 从request中获取收藏的机构id和类型
        id = request.POST.get('fav_id', 0)
        type = request.POST.get('fav_type', 0)

        # 未登录返回json数据到前端，由前端进行登录页面的跳转
        if not request.user.is_authenticated:
            return HttpResponse('{"status": "fail", "msg": "用户未登录"}', content_type='application/json')

        # 在数据库中查找是否有过收藏记录:
        exist_record = UserFavorite.objects.filter(user=request.user, fav_id=int(id), fav_type=int(type))
        if exist_record:
            # 记录存在，取消收藏
            exist_record.delete()
            return HttpResponse('{"status": "success", "msg": "收藏"}', content_type='application/json')
        else:
            # 记录不存在，收藏
            user_fav = UserFavorite()
            if int(id)>0 and int(type)>0:
                user_fav.user = request.user
                user_fav.fav_id = int(id)
                user_fav.fav_type = int(type)
                user_fav.save()
                return HttpResponse('{"status": "success", "msg": "已收藏"}', content_type='application/json')
            else:
                return HttpResponse('{"status": "fail", "msg": "收藏出错"}', content_type='application/json')

　　配置url：

from .views import OrgFavView

urlpatterns = [
    path('add_fav/', OrgFavView.as_view(), name='add_fav'),  # 收藏
]

　　收藏是通过ajax异步操作的，用户点击收藏，通过post方法后端进行添加收藏，取消收藏的操作，然后返回相应的json数据到前端，由前端进行显示，前端的script代码在org_base。html中，修改如下地方：

　　现在点击收藏（取消收藏），查看数据库中状态已经改变了，但是还有个问题就是刷新页面之后，即使是已收藏还是显示收藏，这是因为在显示的时候没有添加判断，需要在四个页面的接口中都要添加判断条件：

class OrgHomeView(View):
    """机构首页页面"""
    def get(self, request, org_id):
        # 根据前端的id找机构
        org = CourseOrg.objects.get(id=int(org_id))

        # 反向查询机构所有的课程和教师
        all_courses = org.course_set.all()
        all_teachers =org.teacher_set.all()

        # 标记
        current_page = 'home'

        # 判断收藏状态
        has_fav = False
        if request.user.is_authenticated:
            if UserFavorite.objects.filter(user=request.user, fav_id=org.id, fav_type=2):
                has_fav = True

        return render(request, 'org-detail-homepage.html', {
            'org': org,
            'all_courses': all_courses,
            'all_teachers': all_teachers,
            'current_page': current_page,
            'has_fav': has_fav
        })


class OrgCourseView(View):
    """机构课程页面"""
    def get(self, request, org_id):
        # 根据前端的id找机构
        org = CourseOrg.objects.get(id=int(org_id))

        # 在该机构中反向查询到该机构的所有课程
        all_courses = org.course_set.all()

        # 标记
        current_page = 'course'

        # 判断收藏状态
        has_fav = False
        if request.user.is_authenticated:
            if UserFavorite.objects.filter(user=request.user, fav_id=org.id, fav_type=2):
                has_fav = True

        return render(request, 'org-detail-course.html', {
            'org': org,
            'all_courses': all_courses,
            'current_page': current_page,
            'has_fav': has_fav
        })


class OrgDescView(View):
    """机构介绍页面"""
    def get(self, request, org_id):
        # 根据前端的id找到机构
        org = CourseOrg.objects.get(id=int(org_id))

        # 标记
        current_page = 'desc'

        # 判断收藏状态
        has_fav = False
        if request.user.is_authenticated:
            if UserFavorite.objects.filter(user=request.user, fav_id=org.id, fav_type=2):
                has_fav = True

        return render(request, 'org-detail-desc.html', {
            'org': org,
            'current_page': current_page,
            'has_fav': has_fav
        })


class OrgTeacherView(View):
    """机构讲师页面"""
    def get(self, request, org_id):
        # 根据前端id找对机构
        org = CourseOrg.objects.get(id=int(org_id))

        # 在机构表中反向查询所有的讲师
        all_teachers = org.teacher_set.all()

        # 标记
        current_page = 'teacher'

        # 判断收藏状态
        has_fav = False
        if request.user.is_authenticated:
            if UserFavorite.objects.filter(user=request.user, fav_id=org.id, fav_type=2):
                has_fav = True

        return render(request, 'org-detail-teachers.html', {
            'org': org,
            'all_teachers': all_teachers,
            'current_page': current_page,
            'has_fav': has_fav
        })

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