侧边栏开发

CSR 渲染 - 推荐文章展示

查询文章点击量数据，并返回

# filename: forum/apis/index.py
@index_api.get("/hot_article")
def get_hot_article():
    q = db.select(ArticleORM)
    q = q.order_by(ArticleORM.clicks.desc())
    q = q.limit(10)
    ret = db.session.execute(q).scalars()

    return {
        "code": 0,
        "msg": "获取热门文章成功",
        "results": [r.as_json() for r in ret]
    }

前端部分 部分

$.ajax({
  url: "/api/v1/hot_article",
  type: "get",
  success: function (res) {
    res.results.forEach((article, index) => {
      $(".rank_list a")
        .eq(index)
        .text(article.title)
        .attr("href", `/article/${article.id}`);
    });
  },
});

SSR 渲染 - 推荐文章展示

后端先查询热门文章数据，然后传递到 jinja2 模版，之后进行渲染。

html 模板渲染

<!--排行榜栏-->
<div class="rank">
    <div class="rank_title">
        <h3>热门文章</h3>
    </div>
    <div class="rank_list">
        {% for article in hot_article_list %}
            <a href="/article/{{ article.id }}">{{ article.title }}</a>
        {% endfor %}
    </div>
</div>