留言板的处理流程及其实现过程.docx

留言板的处理流程及其实现过程

项目背景
@本网站的《莘莘之音》节目中每一期节目下面的留言功能就是按照本文的思路实现的@
在日常的网站制作的项目中，往往会带上留言板的功能。主要的目的是让网站用户能够在本站进行留言，以此方式来进行社区化的交流。另一方面还可以让版主或者站长看到用户的意见建议和反馈，提升服务质量。

网站前端界面

这种界面在很多网站中都能够看到，最典型的就是微博类的社交网站。
通过Firefox的firebug插件分析后看到，新浪微博的这个输入框其实是HTML中的标签。

这是我在页面里写的一段代码，看到在<form>表单包围下</p><p style='padding:5px 0px;'>2、有一个<input>标签和<textarea>标签。其中<input>里输入的是title，即该留言的标题；<textarea>标签输入的是留言的正文内容。
         可以直接通过<textarea>的属性来定义该标签的呈现方式，但还是建议通过CSS来定义。这样可定义的内容更丰富，程序编写更灵活。

这里就是该标签的CSS样式。
Width和height：直接定义了这个输入框的宽和高
Letter-spacing：定义输入框中文字之间的间隔，为了美观最好还是不要让文字挤在一起。
Ling-heigh：定义输入框中的行高，类似Word中的段落间距的设置，也是为了美观</p><p style='padding:5px 0px;'>3、
Font-size：定义文字的大小
Padding：定义文字块距离输入框边界的距离，不要让文字离输入框边界太近，也是为了美观

下面重点来讲一下上图中剩下的三个CSS属性。
resize
我们在HTML文件中写入<textarea>标签，然后在浏览器中打开，会看到在输入框右下角有两个45度的短线，意思是可以通过鼠标拖动这个短线来调整输入框的大小。

这种特性很灵活，但是往往在已经计算好尺寸的网页里不适用。因为用户任意改变输入框的尺寸，会影响页面中的其他元素的尺寸，从而影响整个页面的整体美观。所以我们通过CSS让用户无法修改这个<textarea>标签</p><p style='padding:5px 0px;'>4、的尺寸。
在CSS中写入resize:none
即重新改变尺寸为“否”。
这样处理后，在输入框右下角就不会出现这两个短线了。
 overflow-x / overflow-y
文字如果在x轴方向溢出，将如何处理？
我们在<textarea>标签中输入的内容如果过长，则<textarea>会进行相应的处理。我的这个实例中设置了overflow-x的值为hidden。表示如果文字溢出，在X轴方向上隐藏不显示。而overflow-y的值为auto，表示如果文字太多，则会在输入框中自动加入滚动条。

类似于这样的效果。

后端业务逻辑
我们在上面的代码截图能够看到，我把<text</p><p style='padding:5px 0px;'>5、area>标签写在了<form>表单中了，这是因为在进行数据提交的时候，只有通过表单的方式，才能取到<textarea>中的内容。
     在表单外面写了两个<div>，作为操作的按钮。一个是提交内容，一个是重写。

这里捎带的讲解一下CSS3的新属性，可以方便的修饰div标签的外轮廓形状，让矩形的div的轮廓变成圆角矩形。看到在这两个标签的CSS属性中，有一条是border-radius：50px；表示的是轮廓的半径，这样做的结果就是div变成了圆角矩形，这个值越大，矩形边缘的弧度就更大。

下面讲解通过jQuery的ajax方法，取得标签中的内容，然后提交给服务器端的一个PHP</p><p style='padding:5px 0px;'>6、文件进行业务逻辑的处理。
     下图是发布按钮的单击事件的代码截图：

从代码第27行开始，通过$(".post")取得提交按钮的控制权，当这个标签发生了点击事件，则会触发下面的动作。$(".post").click(function(e)
▉ 28行——如果当用户名的这一栏为空值，则提示先登录，才能发布消息。对应这段代码
<input type="text" hidden="true" value="<?php  echo $_COOKIE["username"]; ?>" name="username">
这段代码是通过PHP的超全局变量$_COOKIE来进行的。当用户登录</p><p style='padding:5px 0px;'>7、成功后，PHP程序会控制浏览器将用户的cookie信息（username和password）写入到浏览器的cookie文件中，当用户下次登录的时候，通过PHP程序检测浏览器的cookie内容，如果有对应的内容，则将网页的状态设置为该用户已登录，如果没有cookie信息，则这个input标签的value的值为空，表示用户未登录。
▉ 30行——如果标题栏中的内容和正文输入框的为空或者输入的是连续的空格，则提示标题或正文不能为空。这里使用了jQuery的正则表达式来验证字符串的内容。/^\s*$/ 表示以空格（space）开始（^），并有一个或多个空格（*），而且以空格结束（$）。【关于jQue</p><p style='height:0px;padding:0;overflow:hidden'>8、ry或javascript的正则表达式的讲解，请参考本网站编程栏目的相关文章】
▉ 32行——如果num<0，则提示已经超出了输入字数的上限。这里我们先来看看新浪微博里的小功能，但是很提升用户体验。
▉ 34行——如果上面的条件都满足，表示用户的情况满足发布的要求，则在点击发布按钮的时候，进行ajax异步操作。这里没有直接使用jQuery的ajax（）方法，而是使用了它的简化版$.get（）方法。因为在表单标签中，我们定义了表单信息是以get的方式提交的，<form method="get">，这种方式的特点是当用户提交时，会在浏览器地址栏中显示提交的信息，比如，这种方式比较快，但是不安全</p><p style='height:0px;padding:0;overflow:hidden'>9、因为全都走光了！！！
微博中默认只能输入140个字符，在输入字符的同时，系统会实时的检测用户输入的字数，如果超出了140这个显示，则提示，并无法发布。这种设计其实是新浪微博抄袭美国的twitter的设计。这样做的用意是让用户用很少的字来说明事情，写完自己想说的事，这样让浏览者也能快速的舒服的看完你所发布的信息。因为现在的互联网阅读是碎片化的阅读，在快速的生活节奏下，已经很少有能像读小说那样去欣赏，去体会大段文字的魅力了。另外的用意是，这样也逼迫着用户多发消息，多发帖子，有什么大事小情都发消息，从而让这个网站的内容更丰富，流量更大。

言归正传，那么如何能够实时的检测<textarea></p><p style='height:0px;padding:0;overflow:hidden'>10、中的字数呢？jQuery能够办到。首先在页面里用一个<span>标签来显示还能输入的字数。

然后在js文档中用jQuery提供的键盘事件函数来计算字数的情况

▉ 第4行，首先定义一个全局变量maxWord，表示能够输入的文字上限，赋值为140。
▉ 第5行，定义一个全局变量num，用来存放还能输入的字符数。
▉ 第6行，给class为num的<span>标签中放入maxWord的值，表示当页面刚加载好的时候，在输入框下面就显示“您可以输入140个字符”
▉ 第7行，$(".content").keydown(function(e)，输入框的键盘按下事件出发keydown方法，</p><p style='height:0px;padding:0;overflow:hidden'>11、执行相应的操作。
▉ 第8行，让maxWord的值减去当前输入框的字符的长度，就得到了还能够输入多少字符。
▉ 第9~13行，进行判断，如果num为负数，表示输入的字符已经超过了140这个上限，则还能输入多少字符的那个提示的数字变为红色，表示警示，否则还是黑色。那么不光是键盘按下，用户在用拼音输入法或者英文输入法打字完毕后，键盘会按起的，那么再调用keyup(function(e)方法，来进行同样的逻辑判断。这样就保证了在用户输入字符的时候，系统实时的检测输入的字符数。
     （这个实时计算输入字符数的代码必须写在发布按钮点击那个代码块的上面）

调用jQuery的get方法，</p><p style='height:0px;padding:0;overflow:hidden'>12、第一个参数”post.php”，表示将参数信息传给这个PHP服务器文件进行处理；第二个参数表示要传的数据，username、title和content；第三个参数表示回调函数，这个函数的参数就是接收PHP文件传回来的结果。如果传回的结果为success，在页面弹出对话框显示发布成功，跳转到show.php这个页面；如果传回fail，提示失败，还是跳转到show.php这个页面。这样就处理完了前端的所有事情。那么接下来看一看通过jQuery的ajax技术，把数据传到服务器的post.php文件后做了哪些事情。

打开post.php文

conn.php

post.php

首</p><p style='height:0px;padding:0;overflow:hidden'>13、先看看conn.php文件，这个文件是用来连接MySQL数据库的。第2行，通过PHP的系统函数mysql_connect( )与数据库建立连接，这个函数的参数分别是所连接的数据库名，用户名和密码。本项目中数据库名是localhost，root用户，密码为空。把这个连接传给一个变量$conn作为句柄，$conn=mysql_connect("localhost","root","");。然后调用PHP系统函数mysql_select_db（）来打开数据库，里面的参数第一个是要连接的数据库实例，第二个参数是数据库连接的句柄。mysql_select_db("message",$conn);
  </p><p style='height:0px;padding:0;overflow:hidden'>14、   接下来看post.php文件。首先include（”conn.php”），把数据库连接文件包含在这个业务逻辑的文件里，其实就类似于Java中的导入包中的某个类。第3~5行，把从页面中通过get方法拿来的数据赋给PHP变量。第6行，创建一个$response变量，用于向页面返回信息。第7行，利用PHP内部函数str_replace ( )把content中的空格和换行符替换为HTML中的空格和换行，以保证将来在页面中显示的时候能够正常空格和换行。第8行，运行一段insert的SQL语言，向数据库中的表插入一条记录，表示用户输入的信息。第10~14行，调用PHP的系统函数mysql_quer</p><p style='height:0px;padding:0;overflow:hidden'>15、y( )，第一个参数是SQL语句，第二个参数是数据库连接句柄。如果插入成功，则返回“success”，否则返回“fail”。第16行，返回业务逻辑处理的结果。第17行，关闭数据库连接，节省资源，应对更多的访问。

以上就是如何实现提交一条帖子的全过程。下面我们来看看如何在页面中显示数据库表中的内容。
打开show.php文件

show.php

和post.php文件类似，也是先引入数据库连接文件，然后执行一段查询的SQL语句。通过mysql_fetch_row( 数据库查询结果 )这个函数取得查询的结果集，将这个结果集赋给一个变量$row。这个变量指向每一行记录，而每一行记录就是一个数组，数组的元素对应着select语句所查询的字段顺序。通过while循环将结果集的记录一条一条的输出，连同HTML代码一起显示在页面上。最后不要忘记关闭数据库连接，这是一个好习惯。
其实动态网页的逻辑并不难，就是前端采集数据，进行数据验证，然后将请求提交到后端的服务器业务逻辑程序中进行处理，然后将处理的结果返回给前端，并进行显示。而本项目中用到的ajax就是一个中间环节，是前端和后端的桥梁。也可以借助更加方便，封装性更好的框架来实现。
以上服务器端的业务逻辑代码，同样也可以用Java语言来实现，请读者自己实验。

24 / 24
</p>
</div>
</div>

<span id="LabelScript"></span>
<script src="https://m.zixin.com.cn/JS/bootstrap-collapse.js"></script>

<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">

<div>
<div style=" margin: auto; overflow:hidden;
text-align: center;">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6e2a21bc68316db308b5fdc9a0d11f2e";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<div style=" height:80px; margin: auto; overflow:hidden;
text-align: center;">

<a target="_blank"
href='https://m.zixin.com.cn/ADMiddle.aspx?t=92ULKnFRa/o='>

<img src="https://www.zixin.com.cn/FileUpload/Images/81dd1a0b-02e3-435a-aa37-fbfccae9a83d.gif" width="100%" height='80'
alt="移动网页_全站_页脚广告1" />

</a>
</div> </div>
<div class="siteInner">
<p style="white-space: normal; text-align: center;"><a href="https://www.zixin.com.cn/h-33.html" target="_blank" title="关于我们" textvalue="关于我们"><span style="text-align: center;">关于我们</span></a> <span style="text-align: center;">     </span><a href="https://www.zixin.com.cn/h-37.html" target="_blank" title="便捷服务" textvalue="便捷服务">便捷服务</a>  <span style="text-align: center;">     </span><a href="https://ai.zixin.com.cn/" target="_blank" title="自信AI" textvalue="自信AI">自信AI</a> <span style="text-align: center;">      </span><a href="https://gpt.zixin.com.cn/" target="_blank" title="AI导航" textvalue="AI导航">AI导航</a>        <a href="https://www.zixin.com.cn/info/266.html" target="_blank" title="抽奖活动" textvalue="抽奖活动">抽奖活动</a></p><p style="white-space: normal; text-align: center;"><span style="color: rgb(153, 153, 153); font-family: 微软雅黑, 宋体, Arial; font-size: 12px; text-align: center; background-color: rgb(248, 248, 248);"></span><span style="text-align: center;">©2010-2025 宁波自信网络信息技术有限公司 </span><span style="text-align: center;"> </span><span style="text-align: center;">版权所有</span></p><p style="white-space: normal; text-align: center;"><span style="text-align: center;"><span style="text-align: center;"><span style="text-align: center;"><span style="text-align: center;">客服电话：4009-655-100  <span style="text-align: center;">投诉</span>/<span style="text-align: center;">维权</span>电话：[phone]</span></span></span></span></p><p style="white-space: normal; text-align: center;"><span style="text-align: center;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-6/9/6379033271755225397249870.png" title="gongan.png" alt="gongan.png"/></span><a href="http://www.beian.gov.cn/portal/index.do" target="_blank" textvalue="浙公网安备33021202000488号">浙公网安备33021202000488号</a>   </p><p style="white-space: normal; text-align: center;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/4/6379256265460890686562879.png" title="icp.png" alt="icp.png"/><a href="http://beian.miit.gov.cn/" target="_blank" textvalue="浙ICP备2021020529号-1">浙ICP备2021020529号-1</a> <span style="text-align: center;"> | </span> <a href="https://dxzhgl.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num=%E5%AE%81%E6%B3%A2%E8%87%AA%E4%BF%A1%E7%BD%91%E7%BB%9C%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&type=xuke" target="_blank" title="浙B2-20240490" textvalue="浙B2-20240490">浙B2-20240490</a><span style="text-align: center;">  </span></p><p style="white-space: normal; text-align: left;"><span style="text-align: center; font-family: 楷体, 楷体_GB2312, SimKai; font-size: 20px;">关注我们</span><span style="text-align: center;"> ：<a href="https://www.zixin.com.cn/news/113.html" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/9/6379298231429297878483475.png" title="微信公众号" alt="微信公众号"/></a></span><span style="text-align: center;">    <a href="https://www.zixin.com.cn/news/113.html" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257739400583672497521.png" title="抖音" alt="抖音"/></a>    <a href="https://weibo.com/zixinnetwork" target="_blank" style="color: rgb(217, 83, 79); text-align: center; white-space: normal;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257739400583672497523.png" title="微博" alt="微博"/></a>    <a href="https://zixinnetwork.lofter.com/" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257740834991205479163.png" title="LOFTER" alt="LOFTER"/></a> </span></p>

</div>
</div>
<div style="position: fixed; bottom: 100px; right: 15px; z-index: 100000000000000000;">
<a href="https://work.weixin.qq.com/kfid/kfcb5dffb1386b26424"><img src="https://www.zixin.com.cn/FileUpload/Images/c1022425-c464-4203-b6dc-db237b2252d5.gif" style="width:36px" alt="客服"/></a>
</div>

<div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
<div class="trlogoside" id="navlogo" style="display: none;">
<a href="https://m.zixin.com.cn/" title="咨信网"><img src="https://www.zixin.com.cn/FileUpload/Images/c4280cd2-fe62-449e-aeca-027ef73439f5.png" alt="咨信网"></a>
<div class="trnavclose" id="navclose">
<span></span>
</div>
</div>
<div class="navcontainer">
<div class="row">
<ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;">

<li><a target="_parent"href="https://m.zixin.com.cn/login.aspx">登录</a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/">首页 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/booklist-0.html">分类 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/infos.html">学堂 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/newslist.html">公告 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/h-0.html">帮助中心 </a></li>

</ul>
</div>
</div>
</div>
<script type="text/javascript">
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#navmore").click(function (e) {
$("#navcontent").show();
$("#navlogo").show();
stopPropagation(e);
var navcontentwidth = $("#navcontent").width();
$('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
$("#navcontent").show().animate({ "right": 0 }, 300);
});
$(document).bind('click', function () {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
$("#navcontent").click(function (e) {
stopPropagation(e);
});
$("#navclose").click(function (e) {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
</script>

<script>
function BaseShare(title, desc, imgUrl) {
var link = "https://m.zixin.com.cn/docdown/9705720.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx49d3b0cb6fb382c4', // 必填，公众号的唯一标识
timestamp: '1748528388', // 必填，生成签名的时间戳
nonceStr: '7F1DE29E6DA19D22B51C68001E7E0E54', // 必填，生成签名的随机串
signature: 'ff14acd947f2fa6ba65df9c70729f74b929fe390',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
function BaseShare(title, desc, imgUrl, link) {
if (link=="")
link = "https://m.zixin.com.cn/docdown/9705720.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx49d3b0cb6fb382c4', // 必填，公众号的唯一标识
timestamp: '1748528388', // 必填，生成签名的时间戳
nonceStr: '7F1DE29E6DA19D22B51C68001E7E0E54', // 必填，生成签名的随机串
signature: 'ff14acd947f2fa6ba65df9c70729f74b929fe390',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
</script>

<!--footer-->
<footer class="footer">

<a target="_parent" class="footer-item" href="https://m.zixin.com.cn/">
<img class="footer-item-img" src="/Master/img/tabbar/home.png" alt="首页" />
<div class="footer-item-txt ">首页</div>
</a>
<a target="_parent" class="footer-item" id="classify" href="https://m.zixin.com.cn/bookmap.html">
<img class="footer-item-img" src="/Master/img/tabbar/category.png" alt="分类" />
<div class="footer-item-txt ">分类</div>
</a>
<a target="_parent" class="footer-item" id="case" href="https://m.zixin.com.cn/zhuantilist-.html">
<img class="footer-item-img" src="/Master/img/tabbar/case.png" alt="专题" />
<div class="footer-item-txt ">专题</div>
</a>
<a target="_parent" class="footer-item" id="my" href="https://m.zixin.com.cn/UserDefault.aspx">
<img class="footer-item-img" src="/Master/img/tabbar/my.png" alt="我的" />
<div class="footer-item-txt ">我的</div>
</a>
</footer>

<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.zixin.com.cn/header.aspx";
$.get(url + "?tp=0&t=" + (new Date()).valueOf(), function (d) {
try {
arr.eq(index).empty().html(d);
} catch (e) { }
try {
arr.html(d);
} catch (e) { }
});
})(i);
}
});
</script>

<script src="https://m.zixin.com.cn/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>