导航

无需数据库的评论系统

使用PHP实现的不需要数据库的评论系统

新建三个文件comments.txtcomments.phpindex.php,粘贴下方对应代码至对应文件

comments.txtcomments.phpindex.php文件上传至php运行环境的服务器中,直接访问index.php

演示

lai.yuweining.cn/t/pinglun

comments.txt

新建一个名字为comments的空白文档,后缀为 .txt 内容为空。

comments.php

新建一个名字为comments的空白文档,后缀为 .php 并粘贴下方内容然后保存。

    <?php
// 评论文档,默认保存到 comments.txt
$txtfile = dirname(__FILE__) . '/comments.txt';


// 读取评论文档
function read_comments($count=0, $page=0, $offset=0, $ASC=0) {
    global $txtfile;
    if (file_exists($txtfile)) {
        $myfile = fopen("$txtfile", "r");
        if (filesize($txtfile)) {
            $comments = fread( $myfile, filesize($txtfile) );
            $comments = @unserialize($comments);
        }
    } else {
        $myfile = fopen("$txtfile", "w");
    }
    fclose($myfile);
    if (!empty($comments)) {
        // 升序排列评论,默认倒序
        if ($ASC) $comments = array_reverse($comments);
        // 评论偏移值,从第几条评论开始
        if ($offset) $comments = array_slice($comments, 0, -$offset);
        // 评论分页以及每页显示评论的数量
        if ($count) {
            // 对评论进行分页
            if ($page) {
                $pages = ceil( count($comments) / $count );
                if ( !($page<1) || $page=='last' ) {
                    // last 直接读取最后一页
                    $page = ( $page>$pages || $page=='last' ) ? $pages : $page;
                    $offset = ($page - 1) * $count ;
                    $comments = array_slice($comments, $offset);
                }
            }
            $comments = array_slice($comments, 0, $count);
        }
    }
    if (isset($comments) && is_array($comments)) {
        return $comments;
    } else {
        return array();
    }
}


function delete_comment($id) {
    // Wait
}


// Ajax 请求 action
if ( isset($_GET['action'])) {
    $old_comments = read_comments();
    // 如果还未评论,初始化评论id
    if ( empty($old_comments) ) {
        $rebuild_id = 0;
    }
    // 初始化返回参数
    $data['code'] = 0;


    // 写入评论
    if ( $_GET['action']=='add' && isset($_POST['user']) && isset($_POST['comment']) ) {
        $last_comment = array(
            array(
                'id' => isset($rebuild_id) ? $rebuild_id : ($old_comments[0]['id'] + 1),
                'user' => @$_POST['user'] ? : '网友',
                'comment' => @htmlspecialchars($_POST['comment']) ? : '这人很懒,啥也没留下!',
                'time' => date("F j, Y - H:i:s")
            )
        );
        $comment_array = array_merge($last_comment, $old_comments);
        file_put_contents($txtfile, serialize($comment_array));
        $data['code'] = 200;
    }
    // 读取评论
    if ( $_GET['action']=='get' ) {
        $ASC = (isset($_GET['ASC']) && $_GET['ASC']) ? $_GET['ASC'] : 0;
        $page = (isset($_GET['page']) && $_GET['page']) ? $_GET['page'] : 0;
        $count = (isset($_GET['count']) && $_GET['count']) ? $_GET['count'] : 0;
        $offset = (isset($_GET['offset']) && $_GET['offset']) ? $_GET['offset'] : 0;
        $comments = read_comments($count, $page, $offset, $ASC);
        if ( !empty($old_comments) ) {
            $data['code'] = 100;
            $data['comments'] = $comments;
        }
    }
    die(json_encode($data));
} else {
    die('<h1>SB</h1>');
}

index.php

新建一个名字为index的空白文档,后缀为 .php 并粘贴下方内容然后保存。

<!DOCTYPE html>
<html>
<head>
<title>简单的评论系统</title>
<meta charset="UTF-8">
<meta name="keywords" content="评论,jQuery"/>
<meta name="description" content="使用PHP,jQuery实现的一个简单不需要数据库的评论系统"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<style>body{background-color:#f2f2f2}a,a:link,#footer{color:#03699e;text-decoration:none}a:hover{color:#10b369}a:active{color:#065177}#page{width:90%;max-width:1200px;margin:10px auto 0;padding:20px 0 40px}.background{padding:10px;margin:0 0 20px 0;border:1px solid #e6e6e6;animation:fadeIn .3s linear .3s both;box-shadow:0 3px 24px rgba(0,0,0,0.06);background:#fff;background:rgba(255,255,255,0.8);border-radius:6px}#comments .comments-input{border:1px solid #ddd;box-sizing:border-box;padding:.5em;margin-right:1em;font-size:14px;vertical-align:middle}#add{display:inline-block;margin-bottom:0;padding:.6em 1.2em;vertical-align:middle;font-size:14px;font-weight:400;line-height:1.2;text-align:center;white-space:nowrap;background-image:none;color:#fff;background-color:#29bb9c;border-radius:4px;cursor:pointer;border:0;outline:0;-webkit-transition:background-color .3s ease-out,border-color .3s ease-out;transition:background-color .3s ease-out,border-color .3s ease-out}#add:hover{background-color:#239e84}#add:active{background-color:#1c806b}#content{border:1px solid #ddd;box-sizing:border-box;padding:.5em;margin:1em 0 0;resize:vertical}#comment-list{display:none}#comment-list .comment{list-style:none;margin:0 0 10px;padding:0 0 10px;animation:fadeIn .3s linear .3s both;font-size:90%;border-bottom:1px dashed #ccc;border-color:rgba(0,0,0,0.1)}#comment-list .comment:nth-last-child(1){margin:0;padding:0;border:0}#comment-list .comment-time{font-size:12px;color:#065177}#comment-list .comment-time.new{color:#f71515}#message.succe{color:#1d7edb}#message.error{color:#f71515}#footer{width:100%;position:fixed;left:0;bottom:0;margin:0;font-size:14px;text-align:center;background:#f8f8f8;border-top:1px solid #ddd;z-index:12;box-sizing:border-box}#footer span{line-height:36px;display:inline-block}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}</style>
<script type="text/javascript" src="//cdn.staticfile.org/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
<div id="page">
    <h1>简单的评论系统</h1>
    <!-- 评论内容 -->
    <div id="comments" class="background">
        <form id="comment" method="post">
            <div>
                <input class="comments-input" id="user" name="user" type="text" required placeholder="昵称" />
                <input type="submit" value="发表评论" id="add" />
            </div>
            <textarea class="" id="content" name="comment" style="width:100%; height:80px" required placeholder="留下你的文字"></textarea>
            <div id="message"></div>
        </form>
    </div>
    <ol id="comment-list" class="background"></ol>
</div>
<div id="footer">
    <span><a href="https://iui.su/">Ning</a> © All Rights Reserved</span>
</div>
<script>
$(function() {
    var a = $("#comment-list");
    $(function() {
        $.getJSON("comments.php?action=get", function(b) {
            if (b["code"]!=100) return;
            $.each(b["comments"], function(b, c) {
                var d = '<li class="comment"><div><strong>' + c["user"] + ':</strong><span class="comment-content">' + c["comment"] + '</span></div><span class="comment-time">' + c["time"] + "</span></li>";
                a.append(d), a.fadeIn();
            });
        });
    }), $("#comment").submit(function() {
        var b = $("#user").val(), c = $("#content").val();
        return message = $("#message"), $.ajax({
            type:$(this).attr("method"),
            url:"comments.php?action=add",
            data:$(this).serialize(),
            success:function(d) {
                var e;
                d = JSON.parse(d), 200 == d["code"] ? (e = '<li class="comment"><div><strong>' + b + ':</strong><span class="comment-content">' + c + '</span></div><span class="comment-time new">刚刚</span></li>', 
                a.prepend(e), a.fadeIn(), message.attr("class", "succe").text("发表成功!").show().fadeOut(1200)) :message.attr("class", "error").text("发表失败!").show().fadeOut(1200);
            }
        }), !1;
    }), $("#comments").keypress(function(a) {
        (a.ctrlKey && 13 == a.which || 10 == a.which) && jQuery("#add").click();
    });
});
</script>
</body>
</html>


转自:郑远睦
Archives QR Code Tip
QR Code for this page
Tipping QR Code