留言板的處理流程及其實現(xiàn)過程

/留言板的處理流程及其實現(xiàn)過程項目背景@本網(wǎng)站的《莘莘之音》節(jié)目中每一期節(jié)目下面的留言功能就是按照本文的思路實現(xiàn)的@在日常的網(wǎng)站制作的項目中，往往會帶上留言板的功能。主要的目的是讓網(wǎng)站用戶能夠在本站進行留言，以此方式來進行社區(qū)化的交流。另一方面還可以讓版主或者站長看到用戶的意見建議和反饋，提升服務(wù)質(zhì)量。

網(wǎng)站前端界面這種界面在很多網(wǎng)站中都能夠看到，最典型的就是微博類的社交網(wǎng)站。通過Firefox的firebug插件分析后看到，新浪微博的這個輸入框其實是HTML中的<textarea>標(biāo)簽。這是我在頁面里寫的一段代碼，看到在<form>表單包圍下，有一個<input>標(biāo)簽和<textarea>標(biāo)簽。其中<input>里輸入的是title，即該留言的標(biāo)題；<textarea>標(biāo)簽輸入的是留言的正文內(nèi)容。

可以直接通過<textarea>的屬性來定義該標(biāo)簽的呈現(xiàn)方式，但還是建議通過CSS來定義。這樣可定義的內(nèi)容更豐富，程序編寫更靈活。這里就是該標(biāo)簽的CSS樣式。Width和height：直接定義了這個輸入框的寬和高Letter-spacing：定義輸入框中文字之間的間隔，為了美觀最好還是不要讓文字擠在一起。Ling-heigh：定義輸入框中的行高，類似Word中的段落間距的設(shè)置，也是為了美觀。Font-size：定義文字的大小Padding：定義文字塊距離輸入框邊界的距離，不要讓文字離輸入框邊界太近，也是為了美觀下面重點來講一下上圖中剩下的三個CSS屬性。resize我們在HTML文件中寫入<textarea>標(biāo)簽，然后在瀏覽器中打開，會看到在輸入框右下角有兩個45度的短線，意思是可以通過鼠標(biāo)拖動這個短線來調(diào)整輸入框的大小。這種特性很靈活，但是往往在已經(jīng)計算好尺寸的網(wǎng)頁里不適用。因為用戶任意改變輸入框的尺寸，會影響頁面中的其他元素的尺寸，從而影響整個頁面的整體美觀。所以我們通過CSS讓用戶無法修改這個<textarea>標(biāo)簽的尺寸。在CSS中寫入resize:none即重新改變尺寸為“否”。這樣處理后，在輸入框右下角就不會出現(xiàn)這兩個短線了。

overflow-x/overflow-y文字如果在x軸方向溢出，將如何處理？我們在<textarea>標(biāo)簽中輸入的內(nèi)容如果過長，則<textarea>會進行相應(yīng)的處理。我的這個實例中設(shè)置了overflow-x的值為hidden。表示如果文字溢出，在X軸方向上隱藏不顯示。而overflow-y的值為auto，表示如果文字太多，則會在輸入框中自動加入滾動條。類似于這樣的效果。后端業(yè)務(wù)邏輯我們在上面的代碼截圖能夠看到，我把<textarea>標(biāo)簽寫在了<form>表單中了，這是因為在進行數(shù)據(jù)提交的時候，只有通過表單的方式，才能取到<textarea>中的內(nèi)容。

在表單外面寫了兩個<div>，作為操作的按鈕。一個是提交內(nèi)容，一個是重寫。這里捎帶的講解一下CSS3的新屬性，可以方便的修飾div標(biāo)簽的外輪廓形狀，讓矩形的div的輪廓變成圓角矩形。看到在這兩個標(biāo)簽的CSS屬性中，有一條是border-radius：50px；表示的是輪廓的半徑，這樣做的結(jié)果就是div變成了圓角矩形，這個值越大，矩形邊緣的弧度就更大。下面講解通過jQuery的ajax方法，取得標(biāo)簽中的內(nèi)容，然后提交給服務(wù)器端的一個PHP文件進行業(yè)務(wù)邏輯的處理。

下圖是發(fā)布按鈕的單擊事件的代碼截圖：從代碼第27行開始，通過$(".post")取得提交按鈕的控制權(quán)，當(dāng)這個標(biāo)簽發(fā)生了點擊事件，則會觸發(fā)下面的動作。$(".post").click(function(e)▉

28行——如果當(dāng)用戶名的這一欄為空值，則提示先登錄，才能發(fā)布消息。對應(yīng)這段代碼<inputtype="text"hidden="true"value="<?php

echo$_COOKIE["username"];?>"name="username">這段代碼是通過PHP的超全局變量$_COOKIE來進行的。當(dāng)用戶登錄成功后，PHP程序會控制瀏覽器將用戶的cookie信息（username和password）寫入到瀏覽器的cookie文件中，當(dāng)用戶下次登錄的時候，通過PHP程序檢測瀏覽器的cookie內(nèi)容，如果有對應(yīng)的內(nèi)容，則將網(wǎng)頁的狀態(tài)設(shè)置為該用戶已登錄，如果沒有cookie信息，則這個input標(biāo)簽的value的值為空，表示用戶未登錄。▉

30行——如果標(biāo)題欄中的內(nèi)容和正文輸入框的為空或者輸入的是連續(xù)的空格，則提示標(biāo)題或正文不能為空。這里使用了jQuery的正則表達式來驗證字符串的內(nèi)容。/^\s*$/表示以空格（space）開始（^），并有一個或多個空格（*），而且以空格結(jié)束（$）?！娟P(guān)于jQuery或javascript的正則表達式的講解，請參考本網(wǎng)站編程欄目的相關(guān)文章】▉

32行——如果num<0，則提示已經(jīng)超出了輸入字數(shù)的上限。這里我們先來看看新浪微博里的小功能，但是很提升用戶體驗。▉

34行——如果上面的條件都滿足，表示用戶的情況滿足發(fā)布的要求，則在點擊發(fā)布按鈕的時候，進行ajax異步操作。這里沒有直接使用jQuery的ajax（）方法，而是使用了它的簡化版$.get（）方法。因為在表單標(biāo)簽中，我們定義了表單信息是以get的方式提交的，<formmethod="get">，這種方式的特點是當(dāng)用戶提交時，會在瀏覽器地址欄中顯示提交的信息，比如，這種方式比較快，但是不安全，因為全都走光了！??！微博中默認只能輸入140個字符，在輸入字符的同時，系統(tǒng)會實時的檢測用戶輸入的字數(shù)，如果超出了140這個顯示，則提示，并無法發(fā)布。這種設(shè)計其實是新浪微博抄襲美國的twitter的設(shè)計。這樣做的用意是讓用戶用很少的字來說明事情，寫完自己想說的事，這樣讓瀏覽者也能快速的舒服的看完你所發(fā)布的信息。因為現(xiàn)在的互聯(lián)網(wǎng)閱讀是碎片化的閱讀，在快速的生活節(jié)奏下，已經(jīng)很少有能像讀小說那樣去欣賞，去體會大段文字的魅力了。另外的用意是，這樣也逼迫著用戶多發(fā)消息，多發(fā)帖子，有什么大事小情都發(fā)消息，從而讓這個網(wǎng)站的內(nèi)容更豐富，流量更大。言歸正傳，那么如何能夠?qū)崟r的檢測<textarea>中的字數(shù)呢？jQuery能夠辦到。首先在頁面里用一個<span>標(biāo)簽來顯示還能輸入的字數(shù)。然后在js文檔中用jQuery提供的鍵盤事件函數(shù)來計算字數(shù)的情況▉

第4行，首先定義一個全局變量maxWord，表示能夠輸入的文字上限，賦值為140。▉

第5行，定義一個全局變量num，用來存放還能輸入的字符數(shù)。▉

第6行，給class為num的<span>標(biāo)簽中放入maxWord的值，表示當(dāng)頁面剛加載好的時候，在輸入框下面就顯示“您可以輸入140個字符”▉

第7行，$(".content").keydown(function(e)，輸入框的鍵盤按下事件出發(fā)keydown方法，執(zhí)行相應(yīng)的操作。▉

第8行，讓maxWord的值減去當(dāng)前輸入框的字符的長度，就得到了還能夠輸入多少字符。▉

第9~13行，進行判斷，如果num為負數(shù)，表示輸入的字符已經(jīng)超過了140這個上限，則還能輸入多少字符的那個提示的數(shù)字變?yōu)榧t色，表示警示，否則還是黑色。那么不光是鍵盤按下，用戶在用拼音輸入法或者英文輸入法打字完畢后，鍵盤會按起的，那么再調(diào)用keyup(function(e)方法，來進行同樣的邏輯判斷。這樣就保證了在用戶輸入字符的時候，系統(tǒng)實時的檢測輸入的字符數(shù)。

（這個實時計算輸入字符數(shù)的代碼必須寫在發(fā)布按鈕點擊那個代碼塊的上面）

調(diào)用jQuery的get方法，第一個參數(shù)”post.php”，表示將參數(shù)信息傳給這個PHP服務(wù)器文件進行處理；第二個參數(shù)表示要傳的數(shù)據(jù)，username、title和content；第三個參數(shù)表示回調(diào)函數(shù)，這個函數(shù)的參數(shù)就是接收PHP文件傳回來的結(jié)果。如果傳回的結(jié)果為success，在頁面彈出對話框顯示發(fā)布成功，跳轉(zhuǎn)到show.php這個頁面；如果傳回fail，提示失敗，還是跳轉(zhuǎn)到show.php這個頁面。這樣就處理完了前端的所有事情。那么接下來看一看通過jQuery的ajax技術(shù)，把數(shù)據(jù)傳到服務(wù)器的post.php文件后做了哪些事情。打開post.php文conn.phppost.php首先看看conn.php文件，這個文件是用來連接MySQL數(shù)據(jù)庫的。第2行，通過PHP的系統(tǒng)函數(shù)mysql_connect()與數(shù)據(jù)庫建立連接，這個函數(shù)的參數(shù)分別是所連接的數(shù)據(jù)庫名，用戶名和密碼。本項目中數(shù)據(jù)庫名是localhost，root用戶，密碼為空。把這個連接傳給一個變量$conn作為句柄，$conn=mysql_connect("localhost","root","");。然后調(diào)用PHP系統(tǒng)函數(shù)mysql_select_db（）來打開數(shù)據(jù)庫，里面的參數(shù)第一個是要連接的數(shù)據(jù)庫實例，第二個參數(shù)是數(shù)據(jù)庫連接的句柄。mysql_select_db("message",$conn);

接下來看post.php文件。首先include（”conn.php”），把數(shù)據(jù)庫連接文件包含在這個業(yè)務(wù)邏輯的文件里，其實就類似于Java中的導(dǎo)入包中的某個類。第3~5行，把從頁面中通過get方法拿來的數(shù)據(jù)賦給PHP變量。第6行，創(chuàng)建一個$response變量，用于向頁面返回信息。第7行，利用PHP內(nèi)部函數(shù)str_replace()把content中的空格和換行符替換為HTML中的空格和換行，以保證將來在頁面中顯示的時候能夠正?？崭窈蛽Q行。第8行，運行一段insert的SQL語言，向數(shù)據(jù)庫中的表插入一條記錄，表示用戶輸入的信息。第10~14行，調(diào)用PHP的系統(tǒng)函數(shù)mysql_query()，第一個參數(shù)是SQL語句，第二個參數(shù)是數(shù)據(jù)庫連接句柄。如果插入成功，則返回“success”，否則返回“fail”。第16行，返回業(yè)務(wù)邏輯處理的結(jié)果。第17行，關(guān)閉數(shù)據(jù)庫連接，節(jié)省資源，應(yīng)對更多的訪問。

以上就是如何實現(xiàn)提交一條帖子的全過程。下面我們來看看如何在頁面中顯示數(shù)據(jù)庫表中的內(nèi)容。打開show.php文件show.php和post.php文件類似，也是先引入數(shù)據(jù)庫連接文件，然后執(zhí)行一段查詢的SQL語句。通過mysql_fetch_row(數(shù)據(jù)庫查詢結(jié)果)這個函數(shù)取得查詢的結(jié)果集，將這個結(jié)果集賦給一個變量$row。這個變量指向每一行記錄，而每一行記錄就是一個數(shù)組，數(shù)組的元素對應(yīng)著select語句所查詢的字段順序。