mxonline实战10，课程列表页，课程详情页1

2024-09-22 23:03:12

对应github地址：第10天

一. 课程列表页

1. 拷贝course-list.html到templates目录中

2. 编写url和view

在courses/views.py中新加

在mxonline/urls.py中加入

新建courses/urls.py

3. 修改course-list.html

然后访问http://127.0.0.1:8000/course/list即可访问相应页面，但是此时是没样式的，我们发现course-list.html和org-list.html样式其实是相似的，可以拷贝一下模板标签，然后修改一下内容

F12找到课程展示内容的代码，把代码块拷贝到{% block content %}中

4. 动态展示课程

网页基本结构如下，class="left"是课程的展示部分，class="right"是热门课程推荐部分

每一个课程展示都是class="box"的<div>，所以只须用一个for循环就好

5. 分页功能

5.1 课程分页

把organization/views.py的分页功能拷贝到courses/views.py中，稍微修改下

from pure_pagination import Paginator, EmptyPage, PageNotAnInteger

修改course-list.html中的for循环，此时的all_course已经不是queryset，而是purepage对象，所以有一个object_list函数用于分页

5.2 添加页码

把org-list.html中页码的代码拷贝过来，把all_orgs改成all_courses就好。因为两个页面的css和html很相似

6. 按要求进行搜索排序

6.1 拷贝机构OrgView中的排序代码到courses/views.py->CourseListView中，并在放在分页代码前面，修改下变量名

并且把sort放到return render中

6.2 修改course-list.html导航栏代码

修改课程默认按添加顺序排序排序，这样html中"最新"代码中sort为空即可

7. 页面右侧-热门课程推荐

CourseListView中定义新的变量hot_courses，并且放在return render中

在course-list.html中搜索热门课程，把热门课程的<dl>标签块放在for循环中

这里要注意的是{{ hot_course.get_degree_display }}

这里的难度是一个choice选项，如果直接写hot_course.degree，会取出在数据库保存的"cj","zj","gj"，如果想取到后面的文字，在django就必须写上面的固定写法

二. 课程详情页1

1. 拷贝course-detail.html到templates目录

2. 模板继承

把course-list.html中的内容拷贝过来，替换面包屑和content的模板内容，在course-detail.html中面包屑代码后面有两个section代码块，放在content模板标签内

3. 配置view和url

courses/views.py中新写

courses/urls.py中添加

4. 为了能够在course-list.html中点击课程可以跳转到相应课程详情页，需要修改href标签内容，原先所有的href="course-detail.html"都替换为如下的url模板标签

因为我们传了一个course.id到'course:course_detail'，所以需要修改CourseDetailView的get函数里的参数，在其中加上参数course_id（从courses/urls.py中获取的url部分内容）

5. 课程详情页中动态获取课程信息

5.1 继续修改课程view，从数据库中找到指定id的课程信息并传到前端页面

5.2 修改course-detail.html中的静态地址为标签变量

1）需要注意的是课程章节数的信息之前在model中并没有定义，但是在Lesson类中有一个外键关联到Course，而在Lesson中有相应的章节信息，那么可以在courses/models.py-> class Course中定义一个函数

之后可在course-detail.html中直接调用

2）课程类别原先在定义model时也没定义，所以加一个字段，然后进行数据迁移

3）学习用户和章节数相似，也需要在courses/models.py中定义一个函数，原因是在operation/models.py中的UserCourse有一个外键关联到Course

4）course-detail.html相关代码修改如下

注意：

{{ user_course.user.image }}是因为在UserCourse中有一个外键user关联到UserProfile，而在UserProfile中有一个image字段

6. 在后台用户管理/用户课程中添加数据，以及更改用户头像，

7. 点击课程后，后台课程属性click_time加1

course/views.py-> class CourseDetailView

最新文章

热门文章