美文网首页
32.课程列表页面

32.课程列表页面

作者: hs_a2d1 | 来源:发表于2018-02-18 09:30 被阅读0次

    和之前的机构列表差不多,继承自base.html,{% extends 'base.html' %}。改一下面包屑,左侧部分改成循环。配置url,在根url文件里include,namespace="course",响应函数里,from pure_pagination import Paginator, EmptyPage, PageNotAnInteger用于分页。

    class CourseListView(View):
        def get(self,request):
            all_course = Course.objects.all()
            # 对课程机构分页
            try:
                page = request.GET.get('page', 1)
            except PageNotAnInteger:
                page = 1
    
            p = Paginator(all_course, 3, request=request, )
    
            courses = p.page(page)
            return render(request,'course-list.html',{
                "all_course":courses,})
    

    直接把all_course传进去不能分页,把p传进去就是分了页的。但前端用需要{% for course in all_course.object_list %}
    对于前端分页功能都可以这样:

                         <div class="pageturn">
                         <ul class="pagelist">
                            {% if all_course.has_previous %}
                                <li class="long"><a href="?{{ all_course.previous_page_number.querystring }}">上一页</a></li>
                            {% endif %}
    
                            {% for page in all_course.pages %}
                                {% if page %}
                                    {% ifequal page all_course.number %}
                                        <li class="active"><a href="?page=1">{{ page }}</a></li>
                                    {% else %}
                                        <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                                    {% endifequal %}
                                {% else %}
                                     <li class="none"><a href="">...</a></li>
                                {% endif %}
                            {% endfor %}
    
                            {% if all_course.has_next %}
                                <li class="long"><a href="?{{ all_course.next_page_number.querystring }}">下一页</a></li>
                            {% endif %}
    
                          </ul>
                          </div>
    

    然后是按不同字段排序,在页面右边显示热门课程,注意先排序后分页。

    from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
    
    from .models import Course
    
    class CourseListView(View):
        def get(self,request):
            all_course = Course.objects.all().order_by("-add_time")
            # 对课程排序,带-为倒序排列
            hot_courses = Course.objects.all().order_by('-click_nums')[0:3]
            sort = request.GET.get('sort', "")
            if sort:
                if sort == "students":
                    all_course= all_course.order_by("-students")
                elif sort == "hot":
                    all_course= all_course.order_by("click_nums")
            # 对课程机构分页
            try:
                page = request.GET.get('page', 1)
            except PageNotAnInteger:
                page = 1
    
            p = Paginator(all_course, 3, request=request, )
    
            courses = p.page(page)
            return render(request,'course-list.html',{
                "all_course":courses,
                "sort":sort,
                'hot_courses':hot_courses
                                                      })
    

    sort 来自前端,用户点击一个排序标准后传递给后台,后台按此标准把课程排序传给前端。排序标准也传给前端用于凸显选中状态。前端

                    <div class="head">
                        <ul class="tab_header">
                            <li {% if sort == '' %} class="active" {% endif %} ><a href="?sort=">最新 </a></li>
                            <li {% if sort == 'hot' %} class="active" {% endif %} ><a href="?sort=hot">最热门</a></li>
                            <li {% if sort == 'students' %} class="active" {% endif %} ><a href="?sort=students">参与人数</a></li>
                        </ul>
                    </div>
    

    .

                <div class="right layout">
                    <div class="head">热门课程推荐</div>
                    <div class="group_recommend">
                        {% for hot_course in hot_courses %}
                        <dl>
                            <dt>
                                <a target="_blank" href="">
                                    <img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ hot_course.image }}"/>
                                </a>
                            </dt>
                            <dd>
                                <a target="_blank" href=""><h2> {{ hot_course.name }}</h2></a>
                                <span class="fl">难度:<i class="key">{{ hot_course.get_degree_display }}</i></span>
                            </dd>
                        </dl>
                        {% endfor %}
    
                    </div>
                </div>
    

    课程难度字段“degree”是choice,如果直接调用会显示cj、zj、gj不是初级中级高级。hot_course.get_degree_display这样就可以显示初级中级高级了。这种用法choice字段经常用

    相关文章

      网友评论

          本文标题:32.课程列表页面

          本文链接:https://www.haomeiwen.com/subject/vuovtftx.html