In website operation, enhancing user interaction is a key factor in maintaining website vitality and increasing user stickiness.The comment section is an important position for users to express opinions and interact, and adding a like feature would undoubtedly significantly enhance the interactivity and community atmosphere of the content.AnQi CMS is an efficient, customizable, and feature-rich enterprise-level content management system that provides flexible mechanisms, allowing users to easily add a popular interactive feature of liking comments in the comment section.This article will detail how to implement the like function for comments in AnQi CMS.

The core of implementing the like function in Anqi CMS: backend support and frontend interaction

The AnQi CMS is built with backend support for comment liking functionality, which means you don't have to start from scratch writing complex server-side logic.The principle of implementation is to send a specific HTTP request from the front-end page to notify the back-end of the user's intention to like a comment, after which the back-end will return the corresponding operation result.

In detail, this process usually involves the following points:

  • Request method and target address: The front-end will send to/comment/praisea request to this specific endpointPOST.
  • Required parameter: The request must include a parameter namedidThe value of this parameter is the unique identifier of the comment that the user wants to like.
  • response format: After successfully processing the request, the backend will return the response data in JSON format, which usually includes information on whether the operation was successful and the latest number of likes.

The like button in the front-end template and data display

In the template design of Anqi CMS, comment lists are usually displayed through{% commentList comments ... %}This tag is used to retrieve and render. Each comment data object will contain a field namedVoteCountwhich is used to store and display the current number of likes for the comment.

To enable users to like comments, we need to add a clickable element in the display area of each comment, such as a link or a button. This element needs to carry the liked commentsidInformation, so that the user can accurately identify the target comment when clicked. A common practice is to use HTML'sdata-*attribute to store this information, such asdata-id="{{item.Id}}". The number of likes is displayed directly{{item.VoteCount}}.

The following is a simplified HTML structure example, showing how to add a like section in a comment item:

<div class="comment-control" data-id="{{item.Id}}">
  <a class="item vote-comment">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
</div>

Write JavaScript interactive logic

The like operation is usually implemented using asynchronous JavaScript (AJAX) to provide a smooth user experience and avoid page refresh. You need to write a JavaScript code to handle the behavior when the user clicks the like button:

  1. Listen for click eventsAdd an event listener to the like button (or link) that triggers when clicked. To ensure that dynamically loaded comments also respond, it is recommended to use event delegation.
  2. Get comment IDIn the event handling function, extract the corresponding comment ID from thedata-idattribute of the clicked element or its parent element.
  3. Send an AJAX request: Build an AJAXPOSTRequest, the target URL is provided by AnQi CMS/comment/praise. Send the obtained comment ID asidthe parameter to the backend.
  4. Process the backend responseAfter the request is successful, parse the JSON data returned by the backend. If the backend indicates that the like is successful, you need to update the like count display on the corresponding front-end page, for example, to modify<span>The text content of the element. At the same time, visual feedback such as changes in the style of the like button, pop-up prompt information, etc., can enhance the user experience.

An example of JavaScript code based on jQuery that demonstrates the implementation of a like function:

`javascript"\((document).on("click", ".vote-comment", function (e) { e.preventDefault();// Prevent the default link behavior, if the like is an <a> tag let that = !(this); let commentId = that.closest(“.comment-control”).data(“id”);// Get the comment's ID

// You can add front-end judgment here to prevent repeated likes within a short time and improve user experience // For example: that.hasClass(“disabled”) or alert(“You like too frequently!”);

$.ajax({

url: "/comment/praise",
method: "post",
data: { id: commentId }, // 传递评论ID给后端
dataType: "json",
success: function (res) {
  if (res.code === 0) { // 假设 res.code 为 0 表示成功
    // 成功点赞，更新点赞数显示
    that.find(".vote-count").text(res.data.vote_count); 
    // 添加点赞成功的视觉反馈，例如改变按钮文本或样式
    that.