用户关注列表

需求分析

• 在个人页面点击 我的关注 需要以分页的形式展示当前用户关注的其他用户
• 可以进行取消关注
• 点击进行到作者详情页面

模版渲染

在 forum/api/account.py 中添加视图函数，返回静态页面

@index_bp.get('/account/my_followed.html')
def my_followed_view():
    return render_template('account/my_followed.html')

新建 my_followed.html

{% extends 'account/index.html' %} {% block right_container %}
<h3>我的关注</h3>
<div class="my_followed">
  {% for foo in range(3) %}
  <div class="author_card">
    <div>
      <a href="#" target="_blank" class="author_pic">
        <img src="/static/images/cat.jpg" alt="author_pic" />
      </a>
      <a href="#" target="_blank" class="author_name">张大山</a>
    </div>
    <div class="author_resume">张大山的简介,张大山</div>
    <div>
      <div class="writings"><span>总篇数</span><b>23</b></div>
      <div class="follows"><span>粉丝</span><b>36</b></div>
      {# <a href="javascript:;" class="focus">关注</a>#}
      <a href="javascript:;" class="focused">
        <span class="out">已关注</span>
        <span class="over">取消关注</span>
      </a>
    </div>
  </div>
  {% endfor %}
</div>
<div style="margin: 400px auto 0;text-align: center">
  <div id="pag-followed"></div>
</div>

{% endblock %}

动态加载

前端加载用户数据

{% block footer_script %}
    <script>

        layui.use(function () {
            let $ = layui.$
            let laypage = layui.laypage;

            function data_2_html(data) {
                let html = ``

                data.forEach(item => {
                    html += `<div class="author_card">
                <div>
                    <a href="#" target="_blank" class="author_pic">
                        <img src="${item.avatar_url || '/static/images/cat.jpg'}" alt="author_pic">
                    </a>
                    <a href="#" target="_blank" class="author_name">${item.nickname}</a>
                </div>
                <div class="author_resume">${item.signature}</div>
                <div>
                    <div class="writings"><span>总篇数</span><b>${item.article_count}</b></div>
                    <div class="follows"><span>粉丝</span><b>${item.followers_count}</b></div>
                    {# <a href="javascript:;" class="focus">关注</a>#}
                    <a href="javascript:;" class="focused">
                        <span class="out">已关注</span>
                        <span class="over">取消关注</span>
                    </a>
                </div>
            </div>`
                })

                return html
            }

            $.ajax({
                url: '/api/v1/my_followed',
                type: 'get',
                success: function (res) {
                    let html = data_2_html(res.data)
                    $('.my_followed').html(html)
                }
            })
        })
    </script>
{% endblock %}

后端返回数据

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

    data = []
    for item in paginate.items:
        author_info = item.as_json()
        author_info['followers_count'] = item.followers.count()
        author_info['article_count'] = item.article_list.count()
        data.append(author_info)

    return {
        'code': 0,
        'msg': '获取关注数据成功',
        'count': paginate.total,
        'data': data
    }

渲染分页数据

$.ajax({
    url: '/api/v1/my_followed',
    type: 'get',
    success: function (res) {

        let html = data_2_html(res.data)
        $('.my_followed').html(html)


        // 渲染分页数据
        laypage.render({
            elem: 'pag-followed',
            limit: 4,
            count: res.count // 数据总数
            , jump: function (obj, first) {
                console.log(obj.curr);
                console.log(obj.limit);

                if (!first) {
                    $.ajax({
                        url: `/api/v1/my_followed?page=${obj.curr}`,
                        type: 'get',
                        success: function (res) {
                            let html = data_2_html(res.data)
                            $('.my_followed').html(html)
                        }
                    })
                }
            }
        });
    }
})