全部课程分页页面实现

routes.py新增代码

# routes
from flask import render_template, request


@app.route('/courses/')
def course_list():
    page = request.args.get('page', 1, type=int)
    courses = Course.query.paginate(page=page, per_page=20)
    return render_template('courses.html',courses=courses)

courses.html代码如下：

{% extends 'base.html' %}
{% block content %}

<div class="container">
<div class="m-filter">
    <div class="mc">
        <dl class="item fore1">
            <dt>分类：</dt>
            <dd>
                <a href="javascript:;" class="tag" data-tag="common" class="curr" >综合</a>
                <a href="javascript:;" class="tag" data-tag="free">免费</a>
                <a href="javascript:;" class="tag" data-tag="1-100">100元以内</a>
                <a href="javascript:;" class="tag" data-tag="100-200">100-200元</a>
                <a href="javascript:;" class="tag" data-tag="200-300">200-300元</a>
                <a href="javascript:;" class="tag" data-tag="300-400">300-400元</a>
                <a href="javascript:;" class="tag" data-tag="400-500">400-500元</a>
                <a href="javascript:;" class="tag" data-tag="500-gt">500元以上</a>
            </dd>
        </dl>
        <dl class="item fore2">
            <dt>排序：</dt>
            <dd>
                <a href="javascript:;" id="score" class="order" data-order="score">评分
                    <img src="{{url_for('static',filename='images/arrow_desc.png')}}"
                         height="12px" width="12px" >
                </a>
                <a href="javascript:;" id="learner_count" class="order" data-order="learner_count">学习人数
                    <img src="{{url_for('static',filename='images/arrow_desc.png')}}"
                         height="12px" width="12px" >
                </a>
                <a href="javascript:;" id="price" class="order" data-order="price-desc">价格
                    <img src="{{url_for('static',filename='images/arrow_order.png')}}"
                         height="15px" width="15px" >
                </a>
            </dd>
        </dl>
    </div>
</div>

<!-- 显示课程开始 -->
<div class="row" style="text-align:center;">
    {% for course in courses.items %}
    <div class="col-sm-3" style="padding: 20px">
        <a href="/course/{{course.course_id}}" style="text-decoration: none;color:inherit;">
        <div class="card" style="height:280px">
            <img src="{{course.big_img_url}}" class="card-img-top"
                 alt="..." height="170px">
            <div class="card-body">
                <p class="card-title" style="font-weight: bold;">{{course.product_name[0:20]}}</p>
                <p class="card-text">
                    {% if not course.original_price %}
                        免费
                    {% elif course.discount_rate %}
                        ￥{{course.discount_price}}元
                    {% else %}
                        ￥{{course.original_price}}元
                    {% endif %}
                </p>
            </div>
        </div>
        </a>
    </div>
    {% endfor %}
</div>
<!-- 显示课程结束 -->
<!-- 分页开始 -->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item">
      <a class="page-link" href="javascript:;" data-page="1">首页</a>
    </li>

        <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                <li class="page-item active">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="javascript:;" data-page="2">2</a>
                </li>
        <li class="page-item">
            <a class="page-link" href="javascript:;" data-page="2">下一页</a>
        </li>

    <li class="page-item">
        <a class="page-link" href="javascript:;" data-page="2">尾页</a>
    </li>
  </ul>
</nav>
<!-- 分页结束 -->
</div>

{% endblock %}

全部课程分页页面实现

courses.html页面代码。

{% extends 'base.html' %}
{% block content %}

<div class="container">
<div class="m-filter">
    <div class="mc">
        <dl class="item fore1">
            <dt>分类：</dt>
            <dd>
                <a href="javascript:;" class="tag" data-tag="common" class="curr" >综合</a>
                <a href="javascript:;" class="tag" data-tag="free">免费</a>
                <a href="javascript:;" class="tag" data-tag="1-100">100元以内</a>
                <a href="javascript:;" class="tag" data-tag="100-200">100-200元</a>
                <a href="javascript:;" class="tag" data-tag="200-300">200-300元</a>
                <a href="javascript:;" class="tag" data-tag="300-400">300-400元</a>
                <a href="javascript:;" class="tag" data-tag="400-500">400-500元</a>
                <a href="javascript:;" class="tag" data-tag="500-gt">500元以上</a>
            </dd>
        </dl>
        <dl class="item fore2">
            <dt>排序：</dt>
            <dd>
                <a href="javascript:;" id="score" class="order" data-order="score">评分
                    <img src="{{url_for('static',filename='images/arrow_desc.png')}}"
                         height="12px" width="12px" >
                </a>
                <a href="javascript:;" id="learner_count" class="order" data-order="learner_count">学习人数
                    <img src="{{url_for('static',filename='images/arrow_desc.png')}}"
                         height="12px" width="12px" >
                </a>
                <a href="javascript:;" id="price" class="order" data-order="price-desc">价格
                    <img src="{{url_for('static',filename='images/arrow_order.png')}}"
                         height="15px" width="15px" >
                </a>
            </dd>
        </dl>
    </div>
</div>

<!-- 显示课程开始 -->
<div class="row" style="text-align:center;">
    {% for course in courses.items %}
    <div class="col-sm-3" style="padding: 20px">
        <a href="/course/{{course.course_id}}" style="text-decoration: none;color:inherit;">
        <div class="card" style="height:280px">
            <img src="{{course.big_img_url}}" class="card-img-top"
                 alt="..." height="170px">
            <div class="card-body">
                <p class="card-title" style="font-weight: bold;">{{course.product_name[0:20]}}</p>
                <p class="card-text">
                    {% if not course.original_price %}
                        免费
                    {% elif course.discount_rate %}
                        ￥{{course.discount_price}}元
                    {% else %}
                        ￥{{course.original_price}}元
                    {% endif %}
                </p>
            </div>
        </div>
        </a>
    </div>
    {% endfor %}
</div>
<!-- 显示课程结束 -->
<!-- 分页开始 -->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item">
      <a class="page-link" href="/courses/?page=1" data-page="1">首页</a>
    </li>
    {% if courses.has_prev %}
        <li class="page-item">
            <a class="page-link" href="/courses/?page={{courses.prev_num}}" data-page="{{courses.prev_num}}">上一页</a>
        </li>
    {% else %}
        <li class="page-item disabled">
            <a class="page-link" href="#">上一页</a>
        </li>
    {% endif %}
    <!--    迭代每一页  -->
      {% for v in courses.iter_pages() %}
          {% if v %}
            {% if courses.page == v  %}
            <li class="page-item active">
                <a class="page-link" href="#">{{ v }}</a>
            </li>
            {% else %}
            <li class="page-item">
                <a class="page-link" href="/courses/?page={{v}}" data-page="{{ v }}">{{ v }}</a>
            </li>
            {% endif %}
          {% else %}
            <li class="page-item">
                <a class="page-link" href="javascript:;">...</a>
            </li>
          {%  endif %}
      {% endfor %}

    {% if courses.has_next %}
        <li class="page-item">
            <a class="page-link" href="/courses/?page={{courses.next_num}}" data-page="{{courses.next_num}}">下一页</a>
        </li>
    {% else %}
        <li class="page-item disabled">
            <a class="page-link" href="#">下一页</a>
        </li>
    {% endif %}

    <li class="page-item">
        <a class="page-link" href="/courses/?page={{courses.pages}}" data-page="{{courses.pages}}">尾页</a>
    </li>
  </ul>
</nav>
<!-- 分页结束 -->
</div>

{% endblock %}

全部课程筛选URL的实现

courses.html添加js代码

{% extends 'base.html' %}
{% block content %}

<div class="container">
<div class="m-filter">
    <div class="mc">
        <dl class="item fore1">
            <dt>分类：</dt>
            <dd>
                <a href="javascript:;" class="tag" data-tag="common" class="curr" >综合</a>
                <a href="javascript:;" class="tag" data-tag="free">免费</a>
                <a href="javascript:;" class="tag" data-tag="1-100">100元以内</a>
                <a href="javascript:;" class="tag" data-tag="100-200">100-200元</a>
                <a href="javascript:;" class="tag" data-tag="200-300">200-300元</a>
                <a href="javascript:;" class="tag" data-tag="300-400">300-400元</a>
                <a href="javascript:;" class="tag" data-tag="400-500">400-500元</a>
                <a href="javascript:;" class="tag" data-tag="500-gt">500元以上</a>
            </dd>
        </dl>
        <dl class="item fore2">
            <dt>排序：</dt>
            <dd>
                <a href="javascript:;" id="score" class="order" data-order="score">评分
                    <img src="{{url_for('static',filename='images/arrow_desc.png')}}"
                         height="12px" width="12px" >
                </a>
                <a href="javascript:;" id="learner_count" class="order" data-order="learner_count">学习人数
                    <img src="{{url_for('static',filename='images/arrow_desc.png')}}"
                         height="12px" width="12px" >
                </a>
                <a href="javascript:;" id="price" class="order" data-order="price-desc">价格
                    <img src="{{url_for('static',filename='images/arrow_order.png')}}"
                         height="15px" width="15px" >
                </a>
            </dd>
        </dl>
    </div>
</div>

<!-- 显示课程开始 -->
<div class="row" style="text-align:center;">
    {% for course in courses.items %}
    <div class="col-sm-3" style="padding: 20px">
        <a href="/course/{{course.course_id}}" style="text-decoration: none;color:inherit;">
        <div class="card" style="height:280px">
            <img src="{{course.big_img_url}}" class="card-img-top"
                 alt="..." height="170px">
            <div class="card-body">
                <p class="card-title" style="font-weight: bold;">{{course.product_name[0:20]}}</p>
                <p class="card-text">
                    {% if not course.original_price %}
                        免费
                    {% elif course.discount_rate %}
                        ￥{{course.discount_price}}元
                    {% else %}
                        ￥{{course.original_price}}元
                    {% endif %}
                </p>
            </div>
        </div>
        </a>
    </div>
    {% endfor %}
</div>
<!-- 显示课程结束 -->
<!-- 分页开始 -->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item">
      <a class="page-link" href="javascript:;" data-page="1">首页</a>
    </li>
    {% if courses.has_prev %}
        <li class="page-item">
            <a class="page-link" href="javascript:;" data-page="{{courses.prev_num}}">上一页</a>
        </li>
    {% else %}
        <li class="page-item disabled">
            <a class="page-link" href="#">上一页</a>
        </li>
    {% endif %}
    <!--    迭代每一页  -->
      {% for v in courses.iter_pages() %}
          {% if v %}
            {% if courses.page == v  %}
            <li class="page-item active">
                <a class="page-link" href="#">{{ v }}</a>
            </li>
            {% else %}
            <li class="page-item">
                <a class="page-link" href="javascript:;" data-page="{{ v }}">{{ v }}</a>
            </li>
            {% endif %}
          {% else %}
            <li class="page-item">
                <a class="page-link" href="javascript:;">...</a>
            </li>
          {%  endif %}
      {% endfor %}

    {% if courses.has_next %}
        <li class="page-item">
            <a class="page-link" href="javascript:;" data-page="{{courses.next_num}}">下一页</a>
        </li>
    {% else %}
        <li class="page-item disabled">
            <a class="page-link" href="#">下一页</a>
        </li>
    {% endif %}

    <li class="page-item">
        <a class="page-link" href="javascript:;" data-page="{{courses.pages}}">尾页</a>
    </li>
  </ul>
</nav>
<!-- 分页结束 -->
</div>

<script>

// 获取tag
$(".tag").click(function(){
   var data_tag = $(this).data("tag");
   matchUrl('tag',data_tag);
});
// 获取order
$(".order").click(function(){
   var data_order = $(this).data('order') // 获取order 参数值
   // 点击价格时，更给价格排序方式
   if(data_order.indexOf("price") != -1){
       if(data_order == "price-desc"){         // 如果降序，改为升序
           data_order = "price-asc";
       }else if(data_order == "price-asc"){    // 如果升序，改为降序
           data_order = "price-desc";
       }
       $(this).attr('data-order',data_order)   // 修改data-order属性值
   }
   matchUrl('order',data_order);  // 生成URL
});

// 添加选中样式
$(document).ready(function(){
    // 清除原来选中的选项
    $(".curr").removeClass("curr");
    // 获取tag值，默认为"common"
    var tag =  getUrlParam('tag') ? getUrlParam('tag') : "common" ;
    // 为tag添加选中样式
    $(".tag").each(function(){
        if($(this).data("tag") == tag){
            $(this).addClass("curr");
        }
    });
    // 为order添加选中样式
    var order = getUrlParam("order");
    if (order.indexOf("price") != -1){
        $("#price").attr("data-order",order);
        $("#price").addClass("curr");
    }
    $("#"+order).addClass("curr");
});

$(".page-link").click(function(){
    var page = $(this).data('page')
    matchUrl('page',page);  // 生成URL
})

</script>


{% endblock %}

全部课程筛选功能实现

修改course_list, 代码如下：

from sqlalchemy import desc, text, asc,and_,or_

@app.route('/courses/')
def course_list():
    page = request.args.get('page',1,type=int)
    tag = request.args.get('tag','common')
    # 处理tag
    # common: 综合, free: 免费 , 价格区间 min-max
    if tag == 'common':
        condition = and_(Course.original_price > 0,Course.score==5)
    elif tag == 'free':
        condition = (Course.original_price==0)
    else:
        price = tag.split('-')
        if 'gt' in price:
            if Course.discount_price:
                condition = (Course.discount_price>price[0]) # 500-gt
            else:
                condition = (Course.original_price > price[0])  # 500-gt
        else:
            if Course.discount_price:
                condition = Course.discount_price.between(price[0], price[1])
            else:
                condition = Course.original_price.between(price[0],price[1])
    courses = Course.query.filter(condition).paginate(page=page,per_page=20)
    return render_template('courses.html',courses=courses)

全部课程排序功能实现

routes.py中course_list() 新增排序功能，代码如下：

@app.route('/courses/')
def course_list():
    page = request.args.get('page',1,type=int)
    tag = request.args.get('tag','common')
    # 处理tag
    # common: 综合, free: 免费 , 价格区间 min-max
    if tag == 'common':
        condition = and_(Course.original_price > 0,Course.score==5)
    elif tag == 'free':
        condition = (Course.original_price==0)
    else:
        price = tag.split('-')
        if 'gt' in price:
            if Course.discount_price:
                condition = (Course.discount_price>price[0]) # 500-gt
            else:
                condition = (Course.original_price > price[0])  # 500-gt
        else:
            if Course.discount_price:
                condition = Course.discount_price.between(price[0], price[1])
            else:
                condition = Course.original_price.between(price[0],price[1])
    # 接受order参数，默认为score
    order = request.args.get('order','score')
    # 处理价格
    if order == 'price-asc':      # 根据价格升序
        order_condition = asc(Course.original_price)
    elif order == 'price-desc':   # 根据价格降序
        order_condition = desc(Course.original_price)
    else:                         # score 或 learner_count 降序
        order_condition = desc(order)
    courses = Course.query.filter(condition).order_by(order_condition).paginate(page=page,per_page=20)
    return render_template('courses.html',courses=courses)