《留言板的处理流程及其实现过程》由会员分享，可在线阅读，更多相关《留言板的处理流程及其实现过程（24页珍藏版）》请在金锄头文库上搜索。
1、留言板的处理流程及其实现过程项目背景本网站的莘莘之音 节目中每一期节目下面的留言功能就是按照本文的思路实现的在日常的网站制作的项目中，往往会带上留言板的功能。主要的目的是让网站用户能够在本站进行留言，以此方式来进行社区化的交流。另一方面还可以让版主或者站长看到用户的意见建议和反馈，提升服务质量。网站前端界面这种界面在很多网站中都能够看到，最典型的就是微博类的社交网站。通过 Firefox 的 firebug 插件分析后看到，新浪微博的这个输入框其实是 HTML 中的标签。这是我在页面里写的一段代码，看到在表单包围下，有一个 标签和标签。其中里输入的是 title，即该留言的标题； 标签输入的是
2、留言的正文内容。可以直接通过的属性来定义该标签的呈现方式，但还是建议通过 CSS 来定义。这样可定义的内容更丰富，程序编写更灵活。这里就是该标签的 CSS 样式。Width 和 height：直接定义了这个输入框的宽和高Letter-spacing：定义输入框中文字之间的间隔，为了美观最好还是不要让文字挤在一起。Ling-heigh：定义输入框中的行高，类似 Word 中的段落间距的设置，也是为了美观。Font-size：定义文字的大小Padding：定义文字块距离输入框边界的距离，不要让文字离输入框边界太近，也是为了美观下面重点来讲一下上图中剩下的三个 CSS 属性。resize我们在 HT
3、ML 文件中写入标签，然后在浏览器中打开，会看到在输入框右下角有两个 45 度的短线，意思是可以通过鼠标拖动这个短线来调整输入框的大小。这种特性很灵活，但是往往在已经计算好尺寸的网页里不适用。因为用户任意改变输入框的尺寸，会影响页面中的其他元素的尺寸，从而影响整个页面的整体美观。所以我们通过 CSS 让用户无法修改这个标签的尺寸。在 CSS 中写入 resize:none即重新改变尺寸为“否”。这样处理后，在输入框右下角就不会出现这两个短线了。overflow-x / overflow-y文字如果在 x 轴方向溢出，将如何处理？我们在标签中输入的内容如果过长，则 会进行相应的处理。我的这个实例
4、中设置了 overflow-x 的值为 hidden。表示如果文字溢出，在 X 轴方向上隐藏不显示。而 overflow-y 的值为 auto，表示如果文字太多，则会在输入框中自动加入滚动条。类似于这样的效果。后端业务逻辑我们在上面的代码截图能够看到，我把标签写在了表单中了，这是因为在进行数据提交的时候，只有通过表单的方式，才能取到中的内容。在表单外面写了两个 ，作为操作的按钮。一个是提交内容，一个是重写。这里捎带的讲解一下 CSS3 的新属性，可以方便的修饰 div 标签的外轮廓形状，让矩形的 div 的轮廓变成圆角矩形。看到在这两个标签的 CSS 属性中，有一条是 border-radiu
5、s：50px；表示的是轮廓的半径，这样做的结果就是 div变成了圆角矩形，这个值越大，矩形边缘的弧度就更大。下面讲解通过 jQuery 的 ajax 方法，取得标签中的内容，然后提交给服务器端的一个 PHP 文件进行业务逻辑的处理。下图是发布按钮的单击事件的代码截图：从代码第 27 行开始，通过 $(.post)取得提交按钮的控制权，当这个标签发生了点击事件，则会触发下面的动作。$(.post).click(function(e) 28 行 如果当用户名的这一栏为空值，则提示先登录，才能发布消息。对应这段代码 name=username这段代码是通过 PHP 的超全局变量$_COOKIE 来进
6、行的。当用户登录成功后，PHP 程序会控制浏览器将用户的cookie 信息（username 和 password）写入到浏览器的 cookie 文件中，当用户下次登录的时候，通过 PHP 程序检测浏览器的 cookie 内容，如果有对应的内容，则将网页的状态设置为该用户已登录，如果没有 cookie 信息，则这个input 标签的 value 的值为空，表示用户未登录。 30 行 如果标题栏中的内容和正文输入框的为空或者输入的是连续的空格，则提示标题或正文不能为空。这里使用了 jQuery 的正则表达式来验证字符串的内容。/s*$/ 表示以空格（space ）开始（），并有一个或多个空格（*
7、 ），而且以空格结束（$）。【关于 jQuery 或 javascript 的正则表达式的讲解，请参考本网站编程栏目的相关文章】 32 行 如果 num，这种方式的特点是当用户提交时，会在浏览器地址栏中显示提交的信息，比如http:/ 140 个字符，在输入字符的同时，系统会实时的检测用户输入的字数，如果超出了 140 这个显示，则提示，并无法发布。这种设计其实是新浪微博抄袭美国的 twitter 的设计。这样做的用意是让用户用很少的字来说明事情，写完自己想说的事，这样让浏览者也能快速的舒服的看完你所发布的信息。因为现在的互联网阅读是碎片化的阅读，在快速的生活节奏下，已经很少有能像读小说那样去
8、欣赏，去体会大段文字的魅力了。另外的用意是，这样也逼迫着用户多发消息，多发帖子，有什么大事小情都发消息，从而让这个网站的内容更丰富，流量更大。言归正传，那么如何能够实时的检测中的字数呢？jQuery 能够办到。首先在页面里用一个标签来显示还能输入的字数。然后在 js 文档中用 jQuery 提供的键盘事件函数来计算字数的情况 第 4 行，首先定义一个全局变量 maxWord，表示能够输入的文字上限，赋值为 140。 第 5 行，定义一个全局变量 num，用来存放还能输入的字符数。 第 6 行，给 class 为 num 的 标签中放入 maxWord 的值，表示当页面刚加载好的时候，在输入框下
9、面就显示“您可以输入 140 个字符” 第 7 行，$(.content).keydown(function(e)，输入框的键盘按下事件出发 keydown 方法，执行相应的操作。 第 8 行，让 maxWord 的值减去当前输入框的字符的长度，就得到了还能够输入多少字符。 第 913 行，进行判断，如果 num 为负数，表示输入的字符已经超过了 140 这个上限，则还能输入多少字符的那个提示的数字变为红色，表示警示，否则还是黑色。那么不光是键盘按下，用户在用拼音输入法或者英文输入法打字完毕后，键盘会按起的，那么再调用 keyup(function(e)方法，来进行同样的逻辑判断。这样就保证了
10、在用户输入字符的时候，系统实时的检测输入的字符数。 （这个实时计算输入字符数的代码必须写在发布按钮点击那个代码块的上面）调用 jQuery 的 get 方法，第一个参数 ”post.php”，表示将参数信息传给这个 PHP 服务器文件进行处理；第二个参数表示要传的数据，username、title 和 content；第三个参数表示回调函数，这个函数的参数就是接收 PHP 文件传回来的结果。如果传回的结果为 success，在页面弹出对话框显示发布成功，跳转到 show.php 这个页面；如果传回fail，提示失败，还是跳转到 show.php 这个页面。这样就处理完了前端的所有事情。那么接下
11、来看一看通过 jQuery的 ajax 技术，把数据传到服务器的 post.php 文件后做了哪些事情。打开 post.php 文conn.phppost.php首先看看 conn.php 文件，这个文件是用来连接 MySQL 数据库的。第 2 行，通过 PHP 的系统函数 mysql_connect( )与数据库建立连接，这个函数的参数分别是所连接的数据库名，用户名和密码。本项目中数据库名是 localhost，root用户，密码为空。把这个连接传给一个变量$conn 作为句柄，$conn=mysql_connect(localhost,root,);。然后调用 PHP 系统函数 mysql
12、_select_db（）来打开数据库，里面的参数第一个是要连接的数据库实例，第二个参数是数据库连接的句柄。mysql_select_db(message,$conn);接下来看 post.php 文件。首先 include（”conn.php”），把数据库连接文件包含在这个业务逻辑的文件里，其实就类似于 Java 中的导入包中的某个类。第 35 行，把从页面中通过 get 方法拿来的数据赋给 PHP 变量。第 6 行，创建一个$response 变量，用于向页面返回信息。第 7 行，利用 PHP 内部函数 str_replace ( )把 content 中的空格和换行符替换为 HTML 中的
13、空格和换行，以保证将来在页面中显示的时候能够正常空格和换行。第 8 行，运行一段insert 的 SQL 语言，向数据库中的表插入一条记录，表示用户输入的信息。第 1014 行，调用 PHP 的系统函数mysql_query( )，第一个参数是 SQL 语句，第二个参数是数据库连接句柄。如果插入成功，则返回“success”，否则返回“fail” 。第 16 行，返回业务逻辑处理的结果。第 17 行，关闭数据库连接，节省资源，应对更多的访问。以上就是如何实现提交一条帖子的全过程。下面我们来看看如何在页面中显示数据库表中的内容。打开 show.php 文件show.php和 post.php 文
14、件类似，也是先引入数据库连接文件，然后执行一段查询的 SQL 语句。通过 mysql_fetch_row( 数据库查询结果 )这个函数取得查询的结果集，将这个结果集赋给一个变量$row。这个变量指向每一行记录，而每一行记录就是一个数组，数组的元素对应着 select 语句所查询的字段顺序。通过 while 循环将结果集的记录一条一条的输出，连同 HTML 代码一起显示在页面上。最后不要忘记关闭数据库连接，这是一个好习惯。其实动态网页的逻辑并不难，就是前端采集数据，进行数据验证，然后将请求提交到后端的服务器业务逻辑程序中进行处理，然后将处理的结果返回给前端，并进行显示。而本项目中用到的 ajax 就是一个中间环节，是前端和后端的桥梁。也可以借助更加方便，封装性更好的框架来实现。以上服务器端的业务逻辑代码，同样也可以用 Java 语言来实现，请读者自己实验。
