2020-05-12--Django项目10-courselis
courselist 所属机构的显示
设置Course类与CourseOrg类进行关联
机构类与课程类进行一对多的关联
外键添加到课程类中,所以在courses/models.py中的Course模型类中添加外键course_org。
course_org = models.ForeignKey(CourseOrg, null=True, blank=True, on_delete=models.CASCADE, verbose_name="课程机构")

要再次进行数据迁移:
makemigrations courses
migrate courses
刷新数据库:

进入xadmin对之前添加的课程设置其所属的课程机构:

再次刷新数据库:

发现机构的id已经存入数据库中了。
然后要在courselist页面进行展示:
多找一语法:
多对象.外键.一属性

运行:

成功显示。
筛选和排序的联动
首先进行筛选功能的完成
根据课程类别(category)进行筛选,所以我们要做的首先是把它们都取出来显示在页面上。
注意:这里要进行去重操作
在取出所有数据之后
还是从后端传过来所以在courses/views.py,写在取出所有数据之后:
#取出筛选选项,根据课程标签(category)进行筛选
cate_list = []
for course in all_courses:
if course.category not in cate_list:
cate_list.append(course.category)
.......
.......
return render(request,'courselist.html',{
'all_courses':courses,
'course_nums':course_nums,
'cate_list':cate_list
})
解析:取出所有数据之后,遍历所有的对象,如果这个对象没有在这个数组中,那么就添加到数组中。返回这个数组。
在前端html中进行遍历数组:
{% for cate in cate_list %}
<a href="?ct={{ cate }}"><span class="">{{ cate }}</span></a>
{% endfor %}
这里的高亮变换我还不会弄。
当用户点击某个选项后,把这个选项的的名称传到后台。
后端接受参数ct的值。
因为筛选选项涉及数量的变化,所以要写在获取课程数据个数之前。
view.py:
#根据筛选选项筛选课程数据
cate_name = request.GET.get('ct','') # 获取前台接口数据
if cate_name:
# 过滤类别为用户选择的数据
all_courses = all_courses.filter(category=cate_name)

解析:获取接口数据后,如果这个值存在,就根据课程类别(category)等于这个值进行过滤。记得用变量接着。
运行:

排序(并与筛选选项联动)
首先找到前端代码的位置:

要进行联动,就要对接口进行改写,把筛选选项在后台获取的cate_name
传到前台来。
在view.py中加上cate_name的传递:
return render(request,'courselist.html',{
'all_courses':courses,
'course_nums':course_nums,
'cate_list':cate_list,
'cate_name':cate_name
})
改写接口:

排序的sort值道传给view进行处理:
排序的话不影响数量的变化,所以无所谓,为了整洁,还是写在获取数量之前。
view.py:
#排序
sort = request.GET.get('sort','')
if sort == 'hot':
# 根据热门(点击数)进行排序,一定要拿变量接着。
all_courses = all_courses.order_by('-click_nums')
elif sort == 'students':
# 根据学生数进行排序
all_courses = all_courses.order_by('-students')
这块就不解析了
还有一个高亮变化的问题:
在前台有根据sort的值进行高亮的选择:
所以要把view获取的sort值再传给前台:

前端:
class="{% ifequal sort '接口值' %}active{% endifequal %}"

运行:
点击后端开发和最热门:

点击后端开发和参与人数:

热门课程推荐
首先找到相应的html代码:

只保留一项。

还是要在后端取到数据传到前端进行循环显示
获取按照点击数逆序排行的前三项课程,并返回
views.py:
#获取热门课程 前三个
hot_courses = Course.objects.order_by('-click_nums')[:3]
......
......
return render(request,'courselist.html',{
'hot_courses':hot_courses #热门课程前三个
})
在前端进行数据循环和数据绑定:
{% for hot_cours in hot_courses %}
<dl>
<dt>
<a target="_blank" href="">
<img width="240" height="220" class="scrollLoading"
src="{{ hot_cours.image.url }}"/>
</a>
</dt>
<dd>
<a target="_blank" href=""><h2>{{ hot_cours.name }}</h2></a>
<span class="fl">难度:<i class="key">{{ hot_cours.get_degree_display }}</i></span>
</dd>
</dl>
{% endfor %}

在之间显示图片的路径是再用字符串拼接:
{{ MEDIA_ROOT }}{{ hot_cours.image }}
而这里也可以使用:
{{ hot_cours.image.url }}
这两个方法都是可以的。
运行:
![]()
显示成功。