网站留言板的功能_网页留言板源码

网站留言板的功能_网页留言板源码本文描述如何在网页上实现一个简单的留言板功能,仅支持文字留言。开发环境:dreamweaverCChtml+jscirpt+php前置条件:1、一个简单的网站已经搭建完毕,支持用户登录网站。2、用户已登录网站。实现步骤:一、新建留言板网页1、新建网页:whiteboard.html留言板(js-div-whiteboard…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

本文描述如何在网页上实现一个简单的留言板功能,仅支持文字留言。

开发环境: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);}
                    
                });
    }

到此代码功能实现。

上传网页及相关代码到服务器上,体验一下简单的留言版功能吧。

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/213481.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Java标识符规范

    Java标识符规范?标识符标识符是我们给变量、类、方法等取的名字。取名规则:1.标识符中可以包含字母(中文)、下划线、美元符$、数字,不能包含其他符号2.标识符不能以数字开头3.标识符不能是关键字命名建议:1.类名,每个单词的首字母大写(大驼峰)例如:MyFirstApp,TestApp等2.方法名,首字母小写,后面每个单词开头大写例如:getHttpMessage(),localValue等3.变量名,和方法名规则一样。4.常量命名全部大写,每个单词间下划线分开5.字定义的标识符在命名时,使用尽

  • android 高德地图标记,android学习之高德地图添加标记

    android 高德地图标记,android学习之高德地图添加标记Marker用于标注地图上的一个特定位置aMap的.addMarker(markerOptions)方法即可markerOptions有如下的属性position(Required)在地图上标记位置的经纬度值。参数不能为空。title当用户点击标记,在信息窗口上显示的字符串。snippet附加文本,显示在标题下方。draggable如果您允许用户可以自由移动标记,设置为“true”。…

  • linux tty 软件包,linux学习之安装ttylinux(世界最小的linux操作系统)(转载)

    linux tty 软件包,linux学习之安装ttylinux(世界最小的linux操作系统)(转载)第一步,用WinRAR解压缩bootcd-i486-8.1.iso.gz,变成,bootcd-i486-8.1.iso镜像文件备用。第二步,在VirtualBox中新建一个虚拟电脑,并指定内存大小和硬盘大小,我们可以设定为内存256M,硬盘512M。第三步,指定虚拟光驱为bootcd-i486-8.1.iso镜像文件,双击新建的虚拟电脑图标启动即可。第四步,用虚拟光驱启动后,进入系统:输入用户名…

  • hive RegexSerDe View

    hive RegexSerDe View

  • Weblogic-SSRF漏洞复现

    Weblogic-SSRF漏洞复现这两天了解的ssrf复现这个漏洞差不多了,开始进行笔迹整理:上面一篇介绍的就是些入门的基础,让你可以更加好的去理解,更好的懂ssrf这个漏洞的原理。0x00到底什么是ssrf呢?SSRF(server-siderequestforgery):服务器端请求伪造。是一种由攻击者构造形成由服务器端发起请求的一个安全漏洞,一般情况下,ssrf攻击的目标是从外网无法访问的内部系统(正是因…

  • 物联网开发_物联网是不是一种骗局

    物联网开发_物联网是不是一种骗局物联网期末大作业—睡眠质量检测系统

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号