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