As an experienced website operations expert, I know that user interaction is the lifeblood of a website.In AnQiCMS, the comment function is not only a platform for content exchange, but also a direct manifestation of users' emotional expression and recognition of content value.Today, let's delve into how AnQiCMS cleverly implements the like feature of comments, as well as how the front-end page interacts with it to update the number of likes in real-time.

Understand the voice of users: The implementation analysis of AnQiCMS comment like function

In the era where content is king, user engagement is an important indicator of whether a website is active.AnQiCMS as an efficient and flexible content management system, deeply understands this, its built-in comment function not only supports users to express their opinions, but also through the introduction of a like mechanism, allows users to quickly respond and recognize high-quality comments, thereby effectively improving the interaction of the community and the efficiency of content selection.This function seems simple, but it embodies careful technological considerations and operational wisdom.

In the AnQiCMS v1.0.0-alpha version, the system had already added article comment and comment management functions, laying the foundation for subsequent likes, replies, and other in-depth interactions.This indicates that AnQiCMS has always regarded user-generated content (UGC) and user interaction as core elements in its initial design.

1. The technical implementation principle of the like function: Backend service support

The AnQiCMS like feature adopted a concise and efficient API interface design on the backend.When the user clicks the like button on a comment, the front-end will send a specific request to the server./comment/praise.

This interface design follows the RESTful principle, and it usually receives an HTTP POST request.Why is it a POST request?Because liking an operation is a modification of data on the server (i.e., increasing the number of likes on a comment), the POST method is exactly in line with this semantics of “creating or updating resources”.

When sending a POST request, the front-end needs to pass a key parameter to the back-end:idIt is also the unique identifier for the liked comment. The backend service will perform a series of operations after receiving this comment ID:

  1. Authentication and permission check:First, the system will verify the current user's login status and operational permissions to ensure that a legitimate user is liking.
  2. Prevent repeated likes:The backend records each user's like behavior for each comment.It usually checks if the current user has liked this comment.If already liked, it may cancel the like or return a failure prompt; if not liked, proceed to the next step.
  3. Update like count:After confirming that the operation is legal and valid, the backend will find the corresponding comment record in the database andVoteCountincrease the value of the field by 1.
  4. return the latest data:After the operation is successful, the backend will return the updated number of likes (or other relevant information) in JSON format, for the front-end to display in real time. For example, the response may containcode(Operation Result Code),msg(Prompt Information) as well asdata(Includingvote_countthe latest data).

The entire process is efficiently handled by the AnQiCMS backend written in Go language, utilizing its high concurrency features to ensure that the like operation can respond quickly even under high traffic conditions without causing any lag in user experience.

How to trigger liking and update the number of likes on the front-end: the magic of the user interface

The front-end is the first touchpoint for users to perceive the like function.AnQiCMS uses its flexible template engine and modern JavaScript technology to achieve a seamless like experience.

1. Template layer: the cornerstone of building the liking button

In AnQiCMS template files, especially for displaying article comments,comment/list.htmlor for customizing document detail pages, it will usecommentListTags to loop through each comment and its related information. For example, using the following template code, we can generate a button for each comment that includes the number of likes and the comment ID:

{# 示例：部分评论列表模板代码 #}
{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div>
        {# ... 其他评论内容 ... #}
        <div class="comment-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
            <a class="item" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
            <a class="item" data-id="reply">回复</a>
        </div>
    </div>
    {% endfor %}
{% endcommentList %}

In this template, we see several key elements:

  • data-id="{{item.Id}}":This custom attribute is very important, it binds the unique ID of the current comment to the HTML element.JavaScript is used to get the ID of the comment to be liked through this property.
  • <span class="vote-count">{{item.VoteCount}}</span>:This<span>Tags are used to display the number of likes on the current comment, andclass="vote-count"convenient for JavaScript to find and update.

Through AnQiCMS's{{item.VoteCount}}The expression, the template will automatically fill in the initial like count for each comment during rendering.

2. JavaScript layer: real-time response to like actions

When the user clicks the like button in the browser, JavaScript captures this click event and starts the like process. The AnQiCMS documentation provides a clear jQuery example demonstrating this process:

// 假设这是集成在前端JS文件中的点赞逻辑
$(".vote-comment").click(function (e) {
  let that = $(this);
  let commentId = that.closest(".comment-control").data("id"); // 从父元素获取评论ID

  // 发送点赞请求
  $.ajax({
    url: "/comment/praise", // 后端点赞接口
    method: "post",
    data: { id: commentId }, // 传递评论ID
    dataType: "json",
    success: function (res) {
      if (res.code === 0) { // 如果操作成功
        alert(res.msg); // 提示信息
        // 更新页面上的点赞数
        that.find(".vote-count").text(res.data.vote_count);
      } else {
        alert(res.msg); // 提示错误信息
      }
    },
    error: function (err) {
      alert("点赞失败，请稍后再试。"); // 网络错误或服务器异常
    },
  });
});

The core logic of this JavaScript code can be broken down into:

  • Event Listening: $(".vote-comment").click(...)Add a click event listener to all elements withvote-commentclass (i.e., the like button).
  • Get the comment ID:When the button is clicked, the code passes throughthat.closest(".comment-control").data("id")Get the nearest parentcomment-controlOn the elementdata-idAttribute value, thereby knowing which comment the user likes.
  • Initiate an AJAX request:Use$.ajax(Or in modern JavaScript,)fetchsend a POST request to)/comment/praiseand send the received data ascommentIda fieldidto the backend.
  • Handle response:
    • Success callback (success):If the backend returnsres.code === 0indicating that the like was successful. At this point, JavaScript will look for the current like button insidespan.vote-countAn element, and update its text content to the backend returnedres.data.vote_countReal-time dynamic update of likes, without having to