在织梦(dedecms)模板中,实现“顶一下”和“踩一下”功能可以通过多种方式,这里将介绍一种常用的方法,即通过修改模板文件和使用ajax技术来实现异步提交。
准备工作
1、创建数据库字段:首先需要在文章数据表中添加两个字段,比如click_up
和click_down
,分别用来记录点赞和点踩的数量。
2、模板文件修改:找到需要显示“顶一下”和“踩一下”按钮的模板文件,通常是article_article.htm
或list_article.htm
等。
3、引入jQuery库:确保项目中已经引入了jQuery库,因为后续的ajax操作会用到jQuery。
实现步骤
1. 修改模板文件
在文章列表或详细页面的模板文件中,添加“顶一下”和“踩一下”的按钮代码。
<a href="javascript:;" class="clickup">顶一下</a> <a href="javascript:;" class="clickdown">踩一下</a> <span id="clickcount">0</span>
2. 编写JavaScript代码
在模板文件中引入一个外部的JavaScript文件,或者直接在<script>
标签中编写如下代码:
$(document).ready(function() { $('.clickup').on('click', function() { var aid = $('.clickup').data('id'); // 假设文章ID存在某个属性中 $.post('{dede:global.cfg_basehost/}ajax.php', {'action': 'up', 'aid': aid}, function(data) { if (data.status == 'success') { $('#clickcount').text(parseInt($('#clickcount').text()) + 1); } else { alert('操作失败'); } }); }); $('.clickdown').on('click', function() { var aid = $('.clickdown').data('id'); // 假设文章ID存在某个属性中 $.post('{dede:global.cfg_basehost/}ajax.php', {'action': 'down', 'aid': aid}, function(data) { if (data.status == 'success') { $('#clickcount').text(parseInt($('#clickcount').text()) 1); } else { alert('操作失败'); } }); }); });
3. 处理Ajax请求
在织梦后台创建一个名为ajax.php
的文件,用于处理前端发送的ajax请求,在这个文件中,根据请求参数进行相应的数据库操作。
<?php include './config.php'; // 包含数据库连接配置 include './common.inc.php'; // 包含常用函数 $action = $_POST['action']; // 获取操作类型:up或down $aid = $_POST['aid']; // 获取文章ID // 根据操作类型更新数据库 if ($action == 'up') { $sql = "UPDATE dede_articles SET click_up = click_up + 1 WHERE id = $aid"; mysqli_query($conn, $sql); } elseif ($action == 'down') { $sql = "UPDATE dede_articles SET click_down = click_down + 1 WHERE id = $aid"; mysqli_query($conn, $sql); } echo json_encode(['status' => 'success']); // 返回成功状态 ?>
注意事项
1、安全性:上述示例中的代码没有考虑安全性问题,实际开发中需要对输入的数据进行验证和过滤,防止SQL注入等安全问题。
2、性能优化:如果网站访问量很大,频繁的数据库操作可能会影响性能,可以考虑使用缓存或者其他优化手段。
3、用户体验:为了更好的用户体验,可以添加一些动画效果,或者限制同一用户短时间内不能重复点击。
FAQs
Q1: 如果我想在用户登录后才能进行“顶一下”和“踩一下”的操作,应该如何修改?
A1: 你可以在ajax请求之前检查用户的登录状态,如果用户未登录,则弹出提示让用户先登录,在后端的PHP代码中也需要检查用户的登录状态,确保只有登录用户才能进行操作。
Q2: 我的网站有多语言版本,如何让“顶一下”和“踩一下”的文本也支持多语言?
A2: 你可以使用JavaScript来动态设置按钮的文本,根据当前的语言设置来显示不同的文本,你需要在服务器端准备好不同语言的文本内容,然后在前端根据用户的语言偏好来选择对应的文本显示。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。