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

留言板的处理流程及其实现过程项目背景@本网站的《莘莘之音》节目中每一期节目下面的留言功能就是按照本文的思路实现的@在日常的网站制作的项目中，往往会带上留言板的功能。主要的目的是让网站用户能够在本站进行留言，以此方式来进行社区化的交流。另一方面还可以让版主或者站长看到用户的意见建议和反馈，提升服务质量。?网站前端界面这种界面在很多网站中都能够看到，最典型的就是微博类的社交网站。通过Firefox的firebug插件分析后看到，新浪微博的这个输入框其实是HTML中的textarea标签。这是我在页面里写的一段代码，看到在form表单包围下，有一个input标签和textarea标签。其中input里输入的是title，即该留言的标题；textarea标签输入的是留言的正文内容。 可以直接通过textarea的属性来定义该标签的呈现方式，但还是建议通过CSS来定义。这样可定义的内容更丰富，程序编写更灵活。这里就是该标签的CSS样式。Width和height：直接定义了这个输入框的宽和高Letter-spacing：定义输入框中文字之间的间隔，为了美观最好还是不要让文字挤在一起。Ling-heigh：定义输入框中的行高，类似Word中的段落间距的设置，也是为了美观。Font-size：定义文字的大小Padding：定义文字块距离输入框边界的距离，不要让文字离输入框边界太近，也是为了美观下面重点来讲一下上图中剩下的三个CSS属性。resize我们在HTML文件中写入textarea标签，然后在浏览器中打开，会看到在输入框右下角有两个45度的短线，意思是可以通过鼠标拖动这个短线来调整输入框的大小。这种特性很灵活，但是往往在已经计算好尺寸的网页里不适用。因为用户任意改变输入框的尺寸，会影响页面中的其他元素的尺寸，从而影响整个页面的整体美观。所以我们通过CSS让用户无法修改这个textarea标签的尺寸。在CSS中写入resize:none即重新改变尺寸为“否”。这样处理后，在输入框右下角就不会出现这两个短线了。?overflow-x / overflow-y文字如果在x轴方向溢出，将如何处理？我们在textarea标签中输入的内容如果过长，则textarea会进行相应的处理。我的这个实例中设置了overflow-x的值为hidden。表示如果文字溢出，在X轴方向上隐藏不显示。而overflow-y的值为auto，表示如果文字太多，则会在输入框中自动加入滚动条。类似于这样的效果。后端业务逻辑我们在上面的代码截图能够看到，我把textarea标签写在了form表单中了，这是因为在进行数据提交的时候，只有通过表单的方式，才能取到textarea中的内容。 在表单外面写了两个div，作为操作的按钮。一个是提交内容，一个是重写。这里捎带的讲解一下CSS3的新属性，可以方便的修饰div标签的外轮廓形状，让矩形的div的轮廓变成圆角矩形。看到在这两个标签的CSS属性中，有一条是border-radius：50px；表示的是轮廓的半径，这样做的结果就是div变成了圆角矩形，这个值越大，矩形边缘的弧度就更大。下面讲解通过jQuery的ajax方法，取得标签中的内容，然后提交给服务器端的一个PHP文件进行业务逻辑的处理。 下图是发布按钮的单击事件的代码截图：从代码第27行开始，通过$(.post)取得提交按钮的控制权，当这个标签发生了点击事件，则会触发下面的动作。$(.post).click(function(e)▉?28行——如果当用户名的这一栏为空值，则提示先登录，才能发布消息。对应这段代码input type=text hidden=true value=?php echo $_COOKIE[username]; ? name=username这段代码是通过PHP的超全局变量$_COOKIE来进行的。当用户登录成功后，PHP程序会控制浏览器将用户的cookie信息（username和password）写入到浏览器的cookie文件中，当用户下次登录的时候，通过PHP程序检测浏览器的cookie内容，如果有对应的内容，则将网页的状态设置为该用户已登录，如果没有cookie信息，则这个input标签的value的值为空，表示用户未登录。▉?30行——如果标题栏中的内容和正文输入框的为空或者输入的是连续的空格，则提示标题或正文不能为空。这里使用了jQuery的正则表达式来验证字符串的内容。/^\s*$/ 表示以空格（space）开始（^），并有一个或多个空格（*），而且以空格结束（$）。【关于jQuery或javascript的正则表达式的讲解，请参考本网站编程栏目的相关文章】▉?32行——如果num0，则提示已经超出了输入字数的上限。这里我们先来看看新浪微博