关注与取消关注

渲染作者信息

动态渲染作者信息

1、请求后端获取数据

$.ajax({
  url: `/api/v1/article_author?article_id=${article_id}`,
  type: "get",
  success: function (res) {
    console.log(res);
  },
});

2、后端返回作者信息

@index_api.get('/article_author')
@jwt_required(optional=True)
def article_author_api():
    article_id = request.args.get('article_id', type=int)
    article = ArticleORM.query.get(article_id)
    author_info = article.user.as_json()
    del author_info['password_hash']

    author_info['followers_count'] = article.user.followers.count()
    author_info['article_count'] = article.user.article_list.count()

    if current_user:
        author_info['is_followed'] = True if current_user in article.user.followers else False
    else:
        author_info['is_followed'] = False

    return {'code': 0, 'msg': '获取作者信息成功', 'data': author_info}

3、前端渲染作者信息

$.ajax({
  url: `/api/v1/article_author?article_id=${article_id}`,
  type: "get",
  success: function (res) {
    console.log(res);
    let author_info = res.data;
    let html = `
            <a href="user.html" class="author_pic">
                <img src="/static/images/user_pic.png" alt="author_pic">
            </a>
            <a href="/user/${author_info.id}" class="author_name">${
              author_info.nickname
            }</a>
            <div class="author_resume">
                ${author_info.signature || "这个人什么都没有留下"}
            </div>
           <div style="margin-bottom: 10px;">
                <span class="writings"><span>总篇数：</span><b>${
                  author_info.article_count
                }</b></span>
                <span class="follows"><span>粉丝：</span><b>${
                  author_info.followers_count
                }</b></span>
            </div>
            <div>
                <a href="javascript:;" class="focus" style="display: inline-block">关注</a>
                <a href="javascript:;" class="focused" style="display: inline-block">
                    <span class="out">已关注</span>
                    <span class="over">取消关注</span>
                </a>
            </div>
`;
    $(".article_author_card").html(html);
    // 将另一个按钮影藏
    if (author_info.is_followed) {
      $(".focus").hide();
    } else {
      $(".focused").hide();
    }
  },
});

关注作者

$(".article_author_card").on("click", ".focus", function () {
  let params = {
    article_id,
  };
  $.ajax({
    url: "/api/v1/followed_user",
    type: "post",
    contentType: "application/json",
    data: JSON.stringify(params),
    success: function (res) {
      $(".focused").show();
      $(".focus").hide();
    },
  });
});

@index_api.post('/followed_user')
@jwt_required()
def followed_user_api():
    article_id = request.get_json().get('article_id')
    article = ArticleORM.query.get(article_id)
    author = article.user
    author.followers.append(current_user)
    author.save()
    return {'code': 0, 'msg': '关注作者成功'}

取消关注

$(".article_author_card").on("click", ".focused", function () {
  let params = {
    article_id,
  };
  $.ajax({
    url: "/api/v1/followed_user",
    type: "put",
    contentType: "application/json",
    data: JSON.stringify(params),
    success: function (res) {
      $(".focused").hide();
      $(".focus").show();
    },
  });
});

@index_api.put('/followed_user')
@jwt_required()
def followed_user_api2():
    article_id = request.get_json().get('article_id')
    article = ArticleORM.query.get(article_id)
    author = article.user
    author.followers.remove(current_user)
    author.save()
    return {'code': 0, 'msg': '取消关注作者成功'}