Web網頁——留言板功能

本文描述如何在網頁上實現一個簡單的留言板功能，僅支持文字留言。

開發環境：dreamweaverCC  html +jscirpt + php

前置條件：1、一個簡單的網站已經搭建完畢，支持用戶登錄網站。

                  2、用戶已登錄網站。

實現步驟：

一、新建留言板網頁

1、新建網頁：whiteboard.html 

留言板（js-div-whiteboard)分爲三個部分：

留言列表：（js-div-whiteboard-messages）、無留言提示：（js-div-whiteboard-empty-hint ）、提交新留言：（js-div-whiteboard-input），三個div自上而下垂直排列。

html:

<div class = "js-div-whiteboard ">
        <div class = "js-div-whiteboard-messages"> 
        </div>
        <div class = "js-div-whiteboard-empty-hint">
        </div>        
        <div class = "js-div-whiteboard-input style-margin-top">
        </div>
    </div>

2、留言列表 js-div-whiteboard

留言列表分爲 菜單（js-div-whiteboard-menu）和 留言內容（js-ul-whiteboard-message-list）兩部分。

菜單：上一頁 、下一頁。

留言內容：作者10% + 留言80% + 日期10%， 三項內容水平排列，寬度爲10%-80%-10%。 每條留言之間有水平線分割。

以上兩項內容自上而下垂直排列。

html

 <div class = "js-div-whiteboard-messages">
            <div class="js-div-whiteboard-menu">
                 <span>&nbsp;&nbsp;</span>
                  <span class = "js-whiteboard-up-page ">上一頁</span>
                  <span>&nbsp;&nbsp;</span>
                  <span class = "js-whiteboard-down-page ">下一頁</span>
                  <hr class = "style-hr-full">
            </div>        
            <ul class="js-ul-whiteboard-message-list style-li-notice-text style-ul-user-menu">
            <li class = "style-fontsize-15">
                <span class = "style-li-whiteboard-user style-fontsize-15-center">user1</span>
                <span class = "style-li-whiteboard-message">喫瓜羣衆三號。</span>
                <span class = "style-li-whiteboard-date style-fontsize-15-center">01-02</span>
            </li>
            <hr class = "style-hr-full">
            <li>
                <span class = "style-li-whiteboard-user">user2</span>
                <span class = "style-li-whiteboard-message">喫瓜羣衆二號。</span>
                <span class = "style-li-whiteboard-date">01-02</span>
            </li>
            <hr class = "style-hr-full">
            </ul>
        </div>

3、無留言提示：（js-div-whiteboard-empty-hint ）

 <div class = "js-div-whiteboard-empty-hint">
         <span class = "style-li-whiteboard-message"> 留言板還是空的哦！</span>
 </div>

4、提交新留言：（js-div-whiteboard-input）

包含 textarea (js-whiteboard-textarea-input) 和 button(js-button-whiteboard-submit)兩部分，上下垂直排列。

html

<div class = "js-div-whiteboard-input style-margin-top">
            <textarea class = "js-whiteboard-textarea-input" rows="5" cols="100" maxlength = "400" placeholder="說點什麼吧……" style = "resize: none"></textarea><br/><br/>
            <button class = " js-button-whiteboard-submit" > 提 交  </button>  
</div>

5、最後添加一些css設置，頁面結果

html：

<div class = "js-div-whiteboard ">
        <div class = "js-div-whiteboard-messages">
            <div class="js-div-whiteboard-menu style-fontsize-15">
                 <span>&nbsp;&nbsp;</span>
                  <span class = "js-whiteboard-up-page ">上一頁</span>
                  <span>&nbsp;&nbsp;</span>
                  <span class = "js-whiteboard-down-page ">下一頁</span>
                  <hr class = "style-hr-full">
            </div>        
            <ul class="js-ul-whiteboard-message-list style-li-notice-text style-ul-user-menu">
            <li class = "style-fontsize-15">
                <span class = "style-li-whiteboard-message">我在這裏安靜地喫個瓜。</span>
                <span class = "style-li-whiteboard-user style-fontsize-15-center">user1</span>
                <span class = "style-li-whiteboard-date style-fontsize-15-center">01-02</span>
            </li>
            <hr class = "style-hr-full">
            <li>
                <span class = "style-li-whiteboard-message">還不錯哦！</span>
                <span class = "style-li-whiteboard-user">user2</span>
                <span class = "style-li-whiteboard-date">01-02</span>
            </li>
            <hr class = "style-hr-full">
            </ul>
        </div>
        <div class = "js-div-whiteboard-empty-hint style-margin-bottom style-margin-top">
         <span class = "style-li-whiteboard-message style-margin-bottom style-margin-top"> 留言板還是空的哦！</span>
        </div>        
        <div class = "js-div-whiteboard-input style-margin-top">
            <textarea class = "js-whiteboard-textarea-input style-fontsize-20" rows="5" cols="100" maxlength = "400" placeholder="說點什麼吧……" style = "resize: none"></textarea><br/><br/>
            <button class = "style-fontsize-20 js-button-whiteboard-submit" > 提 交  </button>  
        </div>
    </div>

至此留言板界面完成。

二、數據庫設計

本網站數據庫採用阿里雲ecs 自建庫。表名稱：whiteboard_messages 

結構如下：

預置數據庫內容如下：

三、留言板功能實現

1、服務器端：支持網頁端查詢數據庫內的留言信息

getBoardmessages.php：

<?php
    $offset = $_POST['offset'];
    $conn = mysqli_connect("localhost","root","","Learn") or die("連接失敗");
    mysqli_query($conn,"set names utf8");
    $result = mysqli_query($conn,"select * from whiteboard_messages order by creat_time  DESC limit 2 offset $offset ");    
    $messageArray = array();
    while ($row = mysqli_fetch_array($result))
    {
        $tempArray = array('id'=>$row[id],'message'=>$row[message],'author'=>$row[author],'author_id'=>$row[author_id],'creat_time'=>$row[creat_time]);
        array_push($messageArray,$tempArray);        
    }

    //把消息返回前端        
    if (sizeof($messageArray)> 0)
    {
        echo json_encode($messageArray,JSON_UNESCAPED_UNICODE);
    }
    else
    {
        echo "no message";
    }
    
?>

2、網頁端：刷新頁面時，顯示已有留言

功能：每次打開或刷新頁面時，從數據庫中讀取最新的2條信息，按照日期降序排列。

           沒有留言時，顯示空白留言提示。

jscpript 核心代碼：      
        $.ajax({
                    url:"http://www.xxx.cn/php/getBoardmessages.php",
                    type:"POST",
                    async: false,//設置爲同步操作就可以給全局變量賦值成功 
                    data:{"info":"get_message","offset":0},
                    success:function(data){
                        console.log(data);
                        if (data == "no message")
                        {

                            $(".js-div-whiteboard-empty-hint").attr("style","display:block;");
                            $(".js-div-whiteboard-messages").attr("style","display:none;");
                            return;
                        }

                        $(".js-div-whiteboard-empty-hint").attr("style","display:none;");
                        $(".js-div-whiteboard-messages").attr("style","display:block;");
                        var info = JSON.parse(data);                        
                        global_whiteboard_message_list = info;//
                        displayWhiteboardMessageList();
                                                
                       },
                    error:function(xhr){alert("錯誤提示： " + xhr.status + " " + xhr.statusText);}
                    
                });
        

function displayWhiteboardMessageList()
    {
        var text = "";    
        $(".js-ul-whiteboard-message-list").empty();
        for (var i = 0;i < global_whiteboard_message_list.length;i++)
        {
            text = text 
                + "<li class = \"style-fontsize-15\"><span class = \"style-li-whiteboard-user style-fontsize-15-center\">" 
                + global_whiteboard_message_list[i].author 
                + "</span><span class = \"style-li-whiteboard-message\">" 
                + global_whiteboard_message_list[i].message 
                + "</span><span class = \"style-li-whiteboard-date style-fontsize-15-center\">" +　timestamp2time(global_whiteboard_message_list[i].creat_time) 
                + "</span></li><hr class = \"style-hr-full\">";
        }        
        $(".js-ul-whiteboard-message-list").append(text);
    }
 

function timestamp2time(timestamp){
        var stamp = parseInt(timestamp * 1000);//php時間戳只有十位，擴展爲13位
        var date = new Date(stamp);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';        
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
        return Y+M+D+h+m+s;
    }

3、服務器端：支持向數據庫內寫入新留言

write2board.php

<?php
    session_start();
    $message = $_POST['message'];
    $author = $_POST['author'];
    $author_id = $_POST['author_id'];

    $conn = mysqli_connect("localhost","root","","Learn") or die("連接失敗");
    mysqli_query($conn,"set names utf8");
    
    $time = time();
    $var = mysqli_query($conn,"insert into whiteboard_messages(message,author,author_id,creat_time)values('$message','$author','$author_id','$time')");
    echo 'white2board success';   
        
    
?>

4、網頁端：添加新留言

jscript 核心代碼：

$(".js-button-whiteboard-submit").click(function(){
        if ($('.js-whiteboard-textarea-input').val().trim().length ==0) return;
        
        var sendData = {"message":$('.js-whiteboard-textarea-input').val(),"author_id":global_user_info.id,"author":global_user_info.username};//global_user_info 用戶登錄時保存的信息
                $.ajax({
                    url:"http://www.xxx.cn/php/write2board.php",
                    type:"POST",
                    data:sendData,
                    success:function(data){
                        console.log(data);
                        if (data == "white2board success")
                        {
                            $(".js-whiteboard-textarea-input").val("white2board success");
                        }
                        else
                        {
                            $(".js-whiteboard-textarea-input").val("white2board failed");
                        }
                    },
                    error:function(xhr){alert("錯誤提示： " + xhr.status + " " + xhr.statusText);}
                    
                });
        
    });

5、菜單功能：上一頁、下一頁 翻頁

點擊“上一頁”或“下一頁”時，翻頁顯示所有留言。每頁最多顯示兩條，按照時間降序排列。

顯示第一頁時，隱藏“上一頁”；顯示最後一頁時，隱藏“下一頁”；留言只有一頁時，隱藏“上一頁”和“下一頁”。

jscript代碼：1）在第2條功能已有代碼上修改，藍色爲新增代碼

        $(".js-whiteboard-up-page").click(function(){updateWhiteboardMessages("up");});
        $(".js-whiteboard-down-page").click(function(){updateWhiteboardMessages("down");});
        
        $(".js-whiteboard-down-page").attr("style","visibility:hidden;");
        $(".js-whiteboard-up-page").attr("style","visibility:hidden;");
        
        $.ajax({
                    url:"http://www.xxx.cn/php/getBoardmessages.php",
                    type:"POST",
                    async: false,//設置爲同步操作就可以給全局變量賦值成功 
                    data:{"info":"get_message","offset":0},
                    success:function(data){
                        //$(".debug_info").text(data);
                        console.log(data);
                        if (data == "no message")
                        {
                            $(".js-div-whiteboard-empty-hint").attr("style","display:block;");
                            $(".js-div-whiteboard-messages").attr("style","display:none;");
                            return;
                        }
                        $(".js-div-whiteboard-empty-hint").attr("style","display:none;");
                        $(".js-div-whiteboard-messages").attr("style","display:block;");
                        var info = JSON.parse(data);                        
                        global_whiteboard_message_list = info;

                        /*不止一頁*/                        
                        if (global_whiteboard_message_list.length == global_whiteboard_message_limit)
                        {                            
                            $(".js-whiteboard-down-page").attr("style","visibility:visible;");
                        }
                        displayWhiteboardMessageList();
                                                
                       },
                    error:function(xhr){alert("錯誤提示： " + xhr.status + " " + xhr.statusText);}
                    
                });

 

    2）

function updateWhiteboardMessages(action)
    {
        if (action == "up")
        {
            global_whiteboard_message_offset = global_whiteboard_message_offset - 2;
            $(".js-whiteboard-down-page").attr("style","visibility:visible;");
        }
        else if (action == "down")
        {
            global_whiteboard_message_offset = global_whiteboard_message_offset + 2;
            $(".js-whiteboard-up-page").attr("style","visibility:visible;");
        }
        else
        {
            ;
        }
       
        $.ajax({
                    url:"http://www.xxx.cn/php/getBoardmessages.php",
                    type:"POST",
                    async: false,//設置爲同步操作就可以給全局變量賦值成功 
                    data:{"info":"get_message","offset":global_whiteboard_message_offset},
                    success:function(data){
                        console.log(data);
                        if (data == "no message")
                        {
                            if (action == "up")/*已經到第一頁*/
                            {                                
                                $(".js-whiteboard-up-page").attr("style","visibility:hidden;");
                                global_whiteboard_message_offset = global_whiteboard_message_offset + 2;
                            }
                            if (action == "down")/*已經到最後一頁*/
                            {                                
                                $(".js-whiteboard-down-page").attr("style","visibility:hidden;");
                                global_whiteboard_message_offset = global_whiteboard_message_offset - 2;
                            }
                            return;
                        }
                        
                        var info = JSON.parse(data);                        
                        global_whiteboard_message_list = info;
                        
                        /*已經到最後一頁*/                        
                        if (global_whiteboard_message_list.length < 2)
                        {
                            $(".js-whiteboard-down-page").attr("style","visibility:hidden;");
                        }
                        /*已經到第一頁*/
                        if (global_whiteboard_message_offset == 0)
                        {
                            $(".js-whiteboard-up-page").attr("style","visibility:hidden;");
                        }
                        displayWhiteboardMessageList();
                                                
                       },
                    error:function(xhr){alert("錯誤提示： " + xhr.status + " " + xhr.statusText);}
                    
                });
    }

到此代碼功能實現。

上傳網頁及相關代碼到服務器上，體驗一下簡單的留言版功能吧。