网站CMS系统礼物系统模块开发与集成实践

我们以WordPress CMS平台为例,深入探讨礼物系统模块的开发与集成实践。该模块允许用户在网站活动中赠送虚拟或实体礼物,增强用户互动与社区活跃度。

需求分析与功能定义

礼物系统需支持用户购买礼物、选择接收者、自定义祝福语,并在接收者端显示收礼通知。核心功能包括礼物商店、送礼流程、收礼通知、积分兑换等。

礼物商店开发

首先创建礼物数据表,用于存储礼物信息。以下为MySQL数据库表结构SQL语句:

CREATE TABLE `gifts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL COMMENT '礼物名称',
  `description` text COMMENT '礼物描述',
  `price` decimal(10,2) NOT NULL COMMENT '礼物价格',
  `image_url` varchar(255) NOT NULL COMMENT '礼物图片路径',
  `stock` int(11) NOT NULL COMMENT '库存数量',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='礼物信息表';

该表包含礼物ID、名称、描述、价格、图片路径和库存数量等字段。礼物价格字段使用DECIMAL类型以支持精确小数计算。

接下来创建礼物商店前端页面。以下为商品列表页面的PHP代码片段:

prefix . 'gifts';
    return $wpdb->get_results("SELECT  FROM $table_name WHERE stock > 0 ORDER BY price ASC");
}
// 在前端显示礼物列表
function display_gift_store() {
    $gifts = get_gift_list();
    ?>
    

礼物商店

<img src="image_url); ?>" alt="name); ?>">

name); ?>

description); ?>

该代码使用WordPress短代码功能,通过`[gift_store]`标签在页面中显示礼物列表。每个礼物项包含图片、名称、描述和价格,以及”加入购物车”按钮。

送礼流程实现

送礼流程涉及用户选择礼物、输入接收者信息、支付处理和发送通知等步骤。以下为送礼表单的和JavaScript代码:


选择礼物

请选择礼物 <option value="id; ?>">name; ?> - ¥price; ?>

接收者信息

以下是JavaScript代码,用于处理表单提交和AJAX请求:

document.getElementById('send-gift').addEventListener('click', function() {
    const giftId = document.getElementById('gift-select').value;
    const recipientName = document.getElementById('recipient-name').value;
    const recipientEmail = document.getElementById('recipient-email').value;
    const message = document.getElementById('recipient-message').value;
    
    if(!giftId) {
        alert('请选择礼物');
        return;
    }
    
    // 使用jQuery发送AJAX请求
    $.ajax({
        url: ajaxurl,
        type: 'POST',
        data: {
            action: 'send_gift',
            gift_id: giftId,
            recipient_name: recipientName,
            recipient_email: recipientEmail,
            message: message,
            nonce: gift_form_nonce // 防止CSRF攻击
        },
        success: function(response) {
            if(response.success) {
                alert('礼物已成功发送!');
                // 清空表单
                document.getElementById('gift-giving-form').reset();
            } else {
                alert('发送失败:' + response.data.message);
            }
        },
        error: function() {
            alert('网络错误,请稍后重试');
        }
    });
});

服务器端处理代码需要在WordPress中添加自定义钩子:

// 在functions.php中添加
add_action('wp_ajax_send_gift', 'handle_send_gift');
add_action('wp_ajax_nopriv_send_gift', 'handle_send_gift');

function handle_send_gift() {
    check_ajax_referer('gift_form', 'nonce');
    
    $gift_id = isset($_POST['gift_id']) ? intval($_POST['gift_id']) : 0;
    $recipient_name = sanitize_text_field($_POST['recipient_name']);
    $recipient_email = sanitize_email($_POST['recipient_email']);
    $message = sanitize_textarea_field($_POST['message']);
    
    if($gift_id  '无效的礼物ID'));
    }
    
    // 检查礼物库存
    global $wpdb;
    $table_name = $wpdb->prefix . 'gifts';
    $gift = $wpdb->get_row("SELECT  FROM $table_name WHERE id = $gift_id");
    
    if(!$gift || $gift->stock  '礼物库存不足'));
    }
    
    // 执行送礼逻辑...
    // 更新礼物库存
    $wpdb->query("UPDATE $table_name SET stock = stock - 1 WHERE id = $gift_id");
    
    // 发送邮件通知
    $subject = '您收到了一份礼物';
    $body = "亲爱的 {$recipient_name},nn您收到了来自 {$current_user->user_email} 的一份礼物:{$gift->name}。nn祝福语:{$message}nn";
    wp_mail($recipient_email, $subject, $body);
    
    // 发送成功响应
    wp_send_json_success();
}

收礼通知功能

当用户成功送礼后,系统需要向接收者发送通知。以下为邮件通知模板:



亲爱的 ,

您收到了来自 <a href=""> 的一份礼物:。

发送者留言:

感谢您参与我们的社区活动!

此致

团队

在AJAX请求成功回调中,我们已经调用了`wp_mail()`函数发送通知邮件。此外,可以在用户个人中心添加收礼记录列表,增强用户体验。

API集成实践

为了支持移动端或第三方应用送礼,可以开发REST API接口。以下为创建API接口的PHP代码:

// 在functions.php中添加
function gift_api_init() {
    register_rest_route('gift/v1', '/send', array(
        'methods' => 'POST',
        'callback' => 'gift_api_send',
        'permission_callback' => function() {
            return is_user_logged_in();
        }
    ));
}
add_action('rest_api_init', 'gift_api_init');

function gift_api_send($request) {
    $user = wp_get_current_user();
    
    $data = $request->get_json_params();
    $gift_id = isset($data['gift_id']) ? intval($data['gift_id']) : 0;
    $recipient_name = isset($data['recipient_name']) ? sanitize_text_field($data['recipient_name']) : '';
    $recipient_email = isset($data['recipient_email']) ? sanitize_email($data['recipient_email']) : '';
    $message = isset($data['message']) ? sanitize_textarea_field($data['message']) : '';
    
    // 验证和授权逻辑...
    
    // 创建送礼记录
    $gift_record = array(
        'user_id' => $user->ID,
        'gift_id' => $gift_id,
        'recipient_name' => $recipient_name,
        'recipient_email' => $recipient_email,
        'message' => $message,
        'status' => 'completed',
        'created_at' => current_time('timestamp')
    );
    
    // 存储送礼记录...
    
    return new WP_REST_Response(array(
        'status' => 'success',
        'message' => '礼物已成功发送'
    ), 200);
}

客户端可以使用cURL或Fetch API调用该接口:

async function sendGiftApi(giftId, recipient) {
    const response = await fetch('/wp-json/gift/v1/send', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': gift_form_nonce
        },
        body: JSON.stringify({
            gift_id: giftId,
            recipient_name: recipient.name,
            recipient_email: recipient.email,
            message: recipient.message
        })
    });
    
    const data = await response.json();
    return data;
}

安全加固措施

礼物系统存在多种安全风险,需要采取以下防护措施:

1.

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。