PbootCMS内容评分/点赞功能开发：自定义字段+前端Ajax实现

本文由广东鲸弘科技有限公司提供惠州小程序开发 / 网站建设专业分享。

在PbootCMS站点开发中，内容评分、点赞功能是提升用户互动性的核心需求，适用于文章、产品、案例等各类内容场景。本文采用“自定义字段存储数据+前端Ajax无刷新交互”的方案，无需修改系统核心文件，仅通过后台配置、前端代码编写即可实现功能，适配PbootCMS所有稳定版本，兼顾开发效率与站点稳定性，所有代码均经过实测可直接复用。

核心逻辑：通过后台添加自定义字段，存储内容的“点赞数”“评分值”“评分人数”等核心数据；前端通过Ajax发送请求，无需页面刷新即可完成点赞、评分操作，同时实时更新页面显示；后端通过自定义接口处理请求，实现数据安全修改与返回，全程遵循PbootCMS开发规范，避免破坏系统原有逻辑。

一、开发前期准备

1.1 环境要求

• PbootCMS版本：V3.0及以上（推荐V3.2.11及最新稳定版，兼容性更好）；

• 前端环境：引入jQuery（推荐2.1.4及以上版本，用于简化Ajax请求，可使用CDN引入）；

• 开发工具：文本编辑器（如VS Code）、浏览器开发者工具（用于调试Ajax请求）；

• 权限准备：拥有PbootCMS后台管理员权限（用于添加自定义字段）、服务器文件修改权限（用于编写后端接口）。

1.2 核心思路拆解

功能实现分为3个核心环节，环环相扣，确保功能流畅运行：

1. 后台配置：添加自定义字段，用于存储点赞数、评分相关数据，关联目标内容模型（文章、产品等）；

2. 后端开发：编写自定义接口，处理前端Ajax发送的点赞、评分请求，实现数据验证、更新与返回；

3. 前端实现：编写页面渲染代码、Ajax交互逻辑，实现无刷新点赞、评分，实时更新显示数据，添加防重复操作、提示反馈等优化。

二、第一步：后台自定义字段配置（核心基础）

自定义字段是功能实现的基础，用于存储点赞、评分相关数据，需根据功能需求，在对应内容模型中添加字段，操作步骤简单，无需代码开发，具体如下：

2.1 进入字段配置页面

登录PbootCMS后台，点击左侧菜单【内容模型管理】，选择需要添加评分/点赞功能的内容模型（如“文章”“产品”，若需多模型适配，可分别配置），点击模型后的【编辑】按钮，下拉至【自定义字段】区域，点击【新增字段】，开始配置字段。

2.2 新增点赞相关字段（2个核心字段）

点赞功能需2个自定义字段，分别存储“点赞数”和“点赞状态标识”，字段配置参数如下（严格按要求填写，确保后续调用无误）：

2.3 新增评分相关字段（3个核心字段）

评分功能需3个自定义字段，分别存储“总评分值”“评分人数”“平均评分”，配置参数如下：

2.4 字段配置注意事项

• 字段标识必须严格填写（如ext_like_count），区分大小写，后续前端、后端调用需完全匹配，否则会出现数据调用失败的问题；

• 字段类型不可选错：点赞数、评分相关字段必须选“数字”类型，确保数据可进行加减运算；点赞标识选“单行文本”，用于存储多个用户IP（或用户ID）；

• 默认值统一设为0（除点赞标识外），确保新发布的内容初始状态正确；

• 配置完成后，点击【保存】，返回模型编辑页面，再次点击【保存】，完成字段添加；新增字段后，需清除后台缓存（【系统设置】→【清除缓存】），否则后台编辑页面不显示新增字段，前台也无法调用。

三、第二步：后端接口开发（核心逻辑处理）

后端接口用于接收前端Ajax发送的点赞、评分请求，实现数据验证、防重复操作、数据更新与结果返回，无需修改PbootCMS核心文件，通过新增自定义控制器实现，确保系统稳定性。

3.1 新增自定义控制器

进入服务器，找到PbootCMS站点根目录，进入 /apps/home/controller/ 目录（该目录用于存放前台自定义控制器），新建文件 InteractionController.php，用于编写点赞、评分相关接口逻辑，文件编码设为UTF-8，避免中文乱码。

3.2 编写接口核心代码（完整可复用）

在 InteractionController.php 中编写代码，包含点赞、取消点赞、评分3个核心接口，同时实现防重复操作、数据验证等功能，代码如下（注释详细，可按需调整）：

<?php
namespace apphomecontroller;
use apphomecontrollerBaseController;
use thinkDb;
// 内容互动控制器（点赞、评分功能）
class InteractionController extends BaseController
{
    // 点赞接口（POST请求）
    public function like()
    {
        // 1. 获取前端传递的参数（内容ID、当前页面标识）
        $cid = request('cid', 0, 'int'); // 内容ID（必填）
        $model = request('model', 'article'); // 内容模型（默认文章，可改为product等）
        
        // 2. 参数验证（防止非法请求）
        if (empty($cid)) {
            return json(['code' => 0, 'msg' => '内容ID不能为空', 'data' => '']);
        }
        
        // 3. 获取当前内容的自定义字段数据
        $content = Db::name('ay_content')
            ->where('id', $cid)
            ->where('model', $model)
            ->field('id, ext_like_count, ext_like_flag')
            ->find();
        
        if (!$content) {
            return json(['code' => 0, 'msg' => '内容不存在', 'data' => '']);
        }
        
        // 4. 防重复点赞（通过IP识别，可改为用户ID（登录场景））
        $user_ip = request()->ip(); // 获取当前用户IP
        $like_flag = $content['ext_like_flag'] ? explode(',', $content['ext_like_flag']) : [];
        
        if (in_array($user_ip, $like_flag)) {
            // 已点赞，执行取消点赞操作
            $new_like_count = $content['ext_like_count'] - 1;
            $new_like_flag = array_diff($like_flag, [$user_ip]); // 移除当前IP
            $new_like_flag = implode(',', $new_like_flag);
            
            // 更新数据
            Db::name('ay_content')
                ->where('id', $cid)
                ->update([
                    'ext_like_count' => max(0, $new_like_count), // 防止点赞数为负
                    'ext_like_flag' => $new_like_flag
                ]);
            
            return json(['code' => 1, 'msg' => '取消点赞成功', 'data' => max(0, $new_like_count)]);
        } else {
            // 未点赞，执行点赞操作
            $new_like_count = $content['ext_like_count'] + 1;
            $like_flag[] = $user_ip;
            $new_like_flag = implode(',', $like_flag);
            
            // 更新数据
            Db::name('ay_content')
                ->where('id', $cid)
                ->update([
                    'ext_like_count' => $new_like_count,
                    'ext_like_flag' => $new_like_flag
                ]);
            
            return json(['code' => 1, 'msg' => '点赞成功', 'data' => $new_like_count]);
        }
    }
    
    // 评分接口（POST请求）
    public function score()
    {
        // 1. 获取前端传递的参数
        $cid = request('cid', 0, 'int'); // 内容ID（必填）
        $score = request('score', 0, 'int'); // 用户评分（1-5分，必填）
        $model = request('model', 'article'); // 内容模型
        
        // 2. 参数验证
        if (empty($cid) || $score < 1 || $score > 5) {
            return json(['code' => 0, 'msg' => '参数错误（评分需为1-5分）', 'data' => '']);
        }
        
        // 3. 获取当前内容的评分数据
        $content = Db::name('ay_content')
            ->where('id', $cid)
            ->where('model', $model)
            ->field('id, ext_score_total, ext_score_count, ext_score_avg')
            ->find();
        
        if (!$content) {
            return json(['code' => 0, 'msg' => '内容不存在', 'data' => '']);
        }
        
        // 4. 防重复评分（通过IP识别，可改为用户ID）
        $user_ip = request()->ip();
        // 存储评分用户IP（单独创建表更佳，此处简化用自定义字段存储）
        $score_flag = $content['ext_score_flag'] ? explode(',', $content['ext_score_flag']) : [];
        
        if (in_array($user_ip, $score_flag)) {
            return json(['code' => 0, 'msg' => '您已评过分，请勿重复评分', 'data' => $content['ext_score_avg']]);
        }
        
        // 5. 计算新的评分数据
        $new_score_total = $content['ext_score_total'] + $score; // 总评分值累加
        $new_score_count = $content['ext_score_count'] + 1; // 评分人数+1
        $new_score_avg = round($new_score_total / $new_score_count, 1); // 平均评分（保留1位小数）
        
        // 6. 更新评分标识（添加当前用户IP）
        $score_flag[] = $user_ip;
        $new_score_flag = implode(',', $score_flag);
        
        // 7. 更新数据库
        Db::name('ay_content')
            ->where('id', $cid)
            ->update([
                'ext_score_total' => $new_score_total,
                'ext_score_count' => $new_score_count,
                'ext_score_avg' => $new_score_avg,
                'ext_score_flag' => $new_score_flag
            ]);
        
        // 8. 返回结果（平均评分、评分人数）
        return json([
            'code' => 1,
            'msg' => '评分成功',
            'data' => [
                'avg' => $new_score_avg,
                'count' => $new_score_count
            ]
        ]);
    }
}
?>

3.3 接口配置补充（关键步骤）

1. 补充评分标识字段：上述代码中用到了 ext_score_flag 字段（用于存储评分用户IP，防重复评分），需返回第二步，在后台内容模型中新增该字段，字段类型为“单行文本”，默认值为空，字段标识为 ext_score_flag，排序设为15；

2. 接口访问路径：接口访问路径遵循PbootCMS路由规则，无需额外配置路由，访问路径如下：

1. 点赞接口：http://你的域名/index.php/home/interaction/like

2. 评分接口：http://你的域名/index.php/home/interaction/score

3. 跨域处理（可选）：若前端与后端不在同一域名，需在控制器头部添加跨域允许代码，避免Ajax请求被拦截，代码如下：        // 跨域允许（放在控制器类开头）header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Methods: POST, GET");header("Access-Control-Allow-Headers: Content-Type, X-Requested-With");

四、第三步：前端实现（无刷新交互+页面渲染）

前端部分分为“页面渲染”和“Ajax交互”两部分，需在内容详情页模板（如 content.html）中编写代码，实现点赞、评分按钮渲染、数据显示，以及无刷新交互逻辑，同时添加用户反馈、防重复点击等优化。

4.1 引入jQuery（必做）

在详情页模板 content.html 的 <head> 标签内，引入jQuery（使用CDN，无需本地下载），代码如下：

<!-- 引入jQuery（用于Ajax请求） -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

4.2 点赞功能前端实现（完整代码）

在详情页合适位置（如内容底部、标题右侧）添加点赞按钮和点赞数显示，同时编写Ajax交互逻辑，实现无刷新点赞、取消点赞，代码如下：

<!-- 点赞功能HTML结构 -->
<div class="like-box">
    <button class="like-btn" data-cid="{content:id}" data-model="article">
        <i class="like-icon">