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

网站留言板的功能_网页留言板源码本文描述如何在网页上实现一个简单的留言板功能,仅支持文字留言。开发环境: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)


相关推荐

  • IE中出现 “Stack overflow at line“ 错误的解决方法

    IE中出现 “Stack overflow at line“ 错误的解决方法IE中出现”Stackoverflowatline”错误的解决方法

  • 二叉树的五大性质及证明「建议收藏」

    二叉树的五大性质及证明「建议收藏」二叉树(BinaryTree)定义:一棵二叉树是结点的一个有限集合,该集合或者为空,或者是由一个根结点加上两棵分别称为左子树和右子树的、互不相交的二叉树组成。特点:每个结点至多只有两棵子树(二叉树中不存在度大于2的结点)五种形态: 1.性质1性质1 在二叉树的第i层至多有2^(i-1)个结点。(i&gt;=1) [用数学归纳法证明]  …

  • python中random函数的用法_python中的随机函数random的用法示例random

    python中random函数的用法_python中的随机函数random的用法示例random篇文章主要介绍了python中的随机函数random的用法示例,详细的介绍了python随机函数random的用法和实例。一、random模块简介Python标准库中的random函数,可以生成随机浮点数、整数、字符串,甚至帮助你随机选择列表序列中的一个元素,打乱一组数据等。二、random模块重要函数1、random()返回0…

  • pcl点云合并_pcl点云重建

    pcl点云合并_pcl点云重建本节记录下点云聚类方法1.欧式聚类分割方法//为提取点云时使用的搜素对象利用输入点云cloud_filtered创建Kd树对象tree。pcl::search::KdTree::Ptrtree(newpcl::search::KdTree);tree-&amp;amp;gt;setInputCloud(cloud_filtered);//创建点云索引向量,用于存储实际的点云信息首先创…

    2022年10月21日
  • 毕业设计方案_apabi document是什么文档

    毕业设计方案_apabi document是什么文档毕设存档——mdlt实现流程MATLAB环境配置mex-setup功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入M…

发表回复

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

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