用户文章收藏

需求分析

• 使用分页的形式展示用户所收藏的文章
• 可以使用 url 的查询字符串传入不同的页数进行模板渲染不同的数据
• 可以支付使用模板显示，也可以使用 ajax 进行请求

模板渲染

添加视图函数，返回静态页面

@index_bp.get('/account/my_collected.html')
def my_collected_view():
    return render_template('account/my_collected.html')

然后编写前端页面

{% extends 'account/index.html' %}

{% block right_container %}
    <h3>我的收藏</h3>
    <table class="layui-hide" id="my-collected-table" lay-filter="my-collection-table"></table>

{% endblock %}

动态加载数据

{% block footer_script %}
    <script>
        layui.use(function () {
            let table = layui.table;

            // 创建渲染实例
            table.render({
                elem: '#my-collected-table',
                url: '/api/v1/my_collected',
                page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
                    //curr: 5, // 设定初始在第 5 页
                    groups: 1,
                    first: false,
                    last: false
                },
                cols: [[
                    {field: 'id', width: 80, title: 'ID'},
                    {field: 'title', title: '文章名', templet: (d) => `<a href='/article/${d.id}'>${d.title}<a/>`},
                ]]
            });
        });
    </script>
{% endblock %}

后端接口返回数据

@index_api.get('/my_collected')
@jwt_required()
def my_collected_api():
    # 获取页数
    page = request.args.get('page', type=int, default=1)
    per_page = request.args.get('limit', type=int, default=10)
    # 进行分页数据查询
    paginate = db.paginate(current_user.collection_articles, page=page, per_page=per_page, error_out=False)

    return {
        'code': 0,
        'msg': '获取收藏文章数据成功',
        'count': paginate.total,
        'data': [item.as_json() for item in paginate.items]
    }