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

大家好，又见面了，我是你们的朋友全栈君。

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

开发环境：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:

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>  </span> <span class = “js-whiteboard-up-page “>上一页</span> <span>  </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

5、最后添加一些css设置，页面结果

html：

<div class = “js-div-whiteboard “> <div class = “js-div-whiteboard-messages”> <div class=”js-div-whiteboard-menu style-fontsize-15″> <span>  </span> <span class = “js-whiteboard-up-page “>上一页</span> <span>  </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 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[message],’author’=>row[author_id],’creat_time’=>messageArray,tempArray); }

//把消息返回前端 if (sizeof(messageArray)> 0) { echo json_encode(

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”>”; }

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(); 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’,’

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);} }); });

点击“上一页”或“下一页”时，翻页显示所有留言。每页最多显示两条，按照时间降序排列。

显示第一页时，隐藏“上一页”；显示最后一页时，隐藏“下一页”；留言只有一页时，隐藏“上一页”和“下一页”。

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）

到此代码功能实现。

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

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

json javascript jquery php xml

0 人点赞