基于Ajax技術(shù)和jQuery的SNS交友網(wǎng)站前端設(shè)計與實現(xiàn)

1、目錄 TOC o 1-3 h z u HYPERLINK l _Toc294520788 第一章 緒論 PAGEREF _Toc294520788 h 1 HYPERLINK l _Toc294520789 1.1 課題研究背景 PAGEREF _Toc294520789 h 1 HYPERLINK l _Toc294520790 的興起 PAGEREF _Toc294520790 h 1 HYPERLINK l _Toc294520791 時代的SNS網(wǎng)站 PAGEREF _Toc294520791 h 2 HYPERLINK l _Toc294520792 時代的前端開發(fā) PAGEREF

2、_Toc294520792 h 3 HYPERLINK l _Toc294520793 1.2 研究內(nèi)容和技術(shù) PAGEREF _Toc294520793 h 5 HYPERLINK l _Toc294520794 1.3 論文結(jié)構(gòu) PAGEREF _Toc294520794 h 6 HYPERLINK l _Toc294520795 第二章 系統(tǒng)框架與技術(shù) PAGEREF _Toc294520795 h 7 HYPERLINK l _Toc294520796 2.1 Ajax和Javascript PAGEREF _Toc294520796 h 7 HYPERLINK l _Toc29452

3、0797 2.2 jQuery簡介 PAGEREF _Toc294520797 h 8 HYPERLINK l _Toc294520798 2.3 SSH框架簡介 PAGEREF _Toc294520798 h 10 HYPERLINK l _Toc294520799 第三章 SNS網(wǎng)站系統(tǒng)概述 PAGEREF _Toc294520799 h 11 HYPERLINK l _Toc294520800 3.1系統(tǒng)簡介 PAGEREF _Toc294520800 h 11 HYPERLINK l _Toc294520801 3.2 系統(tǒng)功能概述 PAGEREF _Toc294520801 h 11

4、 HYPERLINK l _Toc294520802 3.2.1 功能圖示和描述 PAGEREF _Toc294520802 h 11 HYPERLINK l _Toc294520803 3.2.2 系統(tǒng)界面展示 PAGEREF _Toc294520803 h 13 HYPERLINK l _Toc294520804 3.2.3 用戶接口 PAGEREF _Toc294520804 h 15 HYPERLINK l _Toc294520805 3.2.4 軟件接口 PAGEREF _Toc294520805 h 15 HYPERLINK l _Toc294520806 3.2.5 系統(tǒng)用例圖

5、PAGEREF _Toc294520806 h 15 HYPERLINK l _Toc294520807 3.3 系統(tǒng)核心技術(shù) PAGEREF _Toc294520807 h 15 HYPERLINK l _Toc294520808 第四章 Ajax技術(shù)和jQuery在SNS網(wǎng)站前端設(shè)計與實現(xiàn)中的運用 PAGEREF _Toc294520808 h 17 HYPERLINK l _Toc294520809 4.1 好友狀態(tài)回復(fù)功能 PAGEREF _Toc294520809 h 17 HYPERLINK l _Toc294520810 4.1.1 狀態(tài)回復(fù)功能模塊實現(xiàn)思路 PAGEREF _T

6、oc294520810 h 17 HYPERLINK l _Toc294520811 4.1.2 狀態(tài)回復(fù)功能模塊具體實現(xiàn) PAGEREF _Toc294520811 h 17 HYPERLINK l _Toc294520812 4.1.3 功能模塊的界面設(shè)計評價 PAGEREF _Toc294520812 h 19 HYPERLINK l _Toc294520813 4.2 注冊驗證 PAGEREF _Toc294520813 h 19 HYPERLINK l _Toc294520814 4.2.1 注冊驗證實現(xiàn)思路 PAGEREF _Toc294520814 h 20 HYPERLINK

7、l _Toc294520815 4.2.2 注冊驗證具體實現(xiàn) PAGEREF _Toc294520815 h 20 HYPERLINK l _Toc294520816 功能模塊的界面設(shè)計評價 PAGEREF _Toc294520816 h 22 HYPERLINK l _Toc294520817 4.3 日歷控件 PAGEREF _Toc294520817 h 22 HYPERLINK l _Toc294520818 4.3.1 jQuery UI介紹 PAGEREF _Toc294520818 h 22 HYPERLINK l _Toc294520819 4.3.2 日歷控件具體使用 PAG

8、EREF _Toc294520819 h 23 HYPERLINK l _Toc294520820 4.3.3 功能模塊的界面設(shè)計評價 PAGEREF _Toc294520820 h 25 HYPERLINK l _Toc294520821 4.4 照片展示特效 PAGEREF _Toc294520821 h 25 HYPERLINK l _Toc294520822 第五章 總結(jié)與展望 PAGEREF _Toc294520822 h 28 HYPERLINK l _Toc294520823 5.1 總結(jié) PAGEREF _Toc294520823 h 28 HYPERLINK l _Toc29

9、4520824 5.2 展望 PAGEREF _Toc294520824 h 29 HYPERLINK l _Toc294520825 參考文獻 PAGEREF _Toc294520825 h 30 HYPERLINK l _Toc294520826 附錄A：各功能模塊核心代碼 PAGEREF _Toc294520826 h 32第一章 緒論本章主要介紹Web2.0時代，SNS網(wǎng)站的發(fā)展，以及本課題將要研究的內(nèi)容和采用的技術(shù)。1.1 課題研究背景 的興起我們現(xiàn)在所了解的Web2.0的概念最初進入人們的視野是2004年。在此之前，由于瀏覽器得到了普及，萬維網(wǎng)得到快速的增長，人們將網(wǎng)站視為如同電視

10、、報紙、雜志等傳統(tǒng)媒體一樣的發(fā)布信息的媒介，雖然這段時期用戶也可以和站點進行一些簡單的交互，比如用戶登錄，數(shù)據(jù)查詢，提交數(shù)據(jù)等，但這些網(wǎng)站總體來說還是一種信息提供/瀏覽的模式。這段時期的WEB應(yīng)用被稱之為Webl.0。在2004年，在OReilly和MediaLive公司的一次頭腦風暴會議上，Dale Dougherty提出了的概念，他指出不再將網(wǎng)站視為一種簡單的信息發(fā)布的手段。而是將網(wǎng)站看作是一個平臺，強調(diào)用戶與網(wǎng)站之間的互動，由用戶來提供內(nèi)容，為網(wǎng)站增加價值。他們還指出網(wǎng)站的一些關(guān)鍵原則：1將Web站點視為平臺。2充分利用群體智能。3數(shù)據(jù)是站點的“Intel Inside”。4豐富的用戶體

11、驗。5快速的反應(yīng)能力.的應(yīng)用主要包括：博客（BLOG）、RSS、百科全書(Wiki)、網(wǎng)摘 、社會網(wǎng)絡(luò)（SNS）、P2P、即時通訊（IM）等。中國互聯(lián)網(wǎng)的Web2.0時代到來后，這些應(yīng)用都有較為普及的例子，門戶網(wǎng)站的博客系統(tǒng)，百度百科，人人網(wǎng)，騰訊QQ，包括現(xiàn)在風頭正勁的微博。經(jīng)過多年發(fā)展，Web2.0已經(jīng)存在于互聯(lián)網(wǎng)生活的各個角落，極大地改變了人們上網(wǎng)的習慣。由上述網(wǎng)站的關(guān)鍵原則可以看到，系統(tǒng)能否實現(xiàn)用戶和網(wǎng)站的交互以及系統(tǒng)能否提供良好的用戶體驗在網(wǎng)站中具有關(guān)鍵的作用。這要求前端開發(fā)人員對web2.0用戶體驗有了解和研究，并通過前端技術(shù)達到最佳效果。 SNS，全稱Social Network

12、ing Services，即社會性網(wǎng)絡(luò)服務(wù)，專指旨在幫助人們建立社會性網(wǎng)絡(luò)的互聯(lián)網(wǎng)應(yīng)用服務(wù)，在國內(nèi)以人人網(wǎng)（校內(nèi)網(wǎng)）、開心網(wǎng)、白社會SNS平臺為代表。在Danah m.Boyd和Nicole BEllison的論文中給出了SNS網(wǎng)站的定義，他們指出SNS包含如下兩個功能特征：1)每一個用戶都擁有一個一個公開或半公開的個人檔案文件，2)用戶之間互相共享好友列表，用戶可以遍歷查看由這些好友關(guān)系組織形成的網(wǎng)絡(luò)。在中國，SNS的發(fā)展可以分為三個時期。1.1999-2006年：1999年，被認為是SNS概念最早的倡導者周云帆、陳一舟和楊寧共同創(chuàng)辦ChinaRen校友錄。當時中國互聯(lián)網(wǎng)處于萌芽階段，網(wǎng)民總

13、數(shù)在1000萬人左右。2003年博客逐漸興起后，Web2.0理念與多種應(yīng)用產(chǎn)品開始流行。2005年，8月，龐升東創(chuàng)立51 ，是中國最大的博客社區(qū)，以交友為主；12月，來自清華大學和天津大學的王興、王慧文等幾位大學生創(chuàng)立校內(nèi)網(wǎng)(xiaonei ），是中國最早的校園SNS社區(qū)。這一階段SNS概念處于被認知和等待普及階段，SNS服務(wù)單一，更多被當作一種降低聯(lián)絡(luò)成本的工具來使用。2.2006-2008年5月：2006年，陳一舟創(chuàng)立千橡集團，10月收購校內(nèi)網(wǎng)，其他SNS第一目標依然鎖定校園市場。2007年10月，曾創(chuàng)建校內(nèi)網(wǎng)和飯否網(wǎng)的王興推出真實社交網(wǎng)絡(luò)海內(nèi)網(wǎng)（），是最早模仿全球最大SNS服務(wù)提供商fa

14、cebook（2004年創(chuàng)立）的商務(wù)類SNS社區(qū)。這一時期校園SNS較有影響的主要是：校內(nèi)網(wǎng)、億聚網(wǎng)、占座網(wǎng)、Chinay、Chinaren校內(nèi)、優(yōu)點網(wǎng)。這一時期資本市場高度關(guān)注SNS市場，風投不斷注入；SNS理念、經(jīng)營思路、產(chǎn)品嚴重同質(zhì)化，即以校內(nèi)用戶為主，更模仿facebook，但沒有facebook豐富的應(yīng)用開發(fā)平臺，如音樂、視頻等。3.2008年5月以后：2008年5月，開心網(wǎng)（kaixin001 ）創(chuàng)立，流行于白領(lǐng)，游戲結(jié)合邀請模式是其快速發(fā)展的根本。同一時間，日本軟銀注資3.4億美元于千橡集團。而Facebook從微軟和李嘉誠基金會獲得巨額融資，國際主流資本市場對于SNS關(guān)注達到頂

15、點。資本市場的行動隨之引發(fā)連鎖效應(yīng)，到目前為止，國內(nèi)SNS服務(wù)提供商超過100家。這一時期具有代表性的SNS網(wǎng)站為校內(nèi)網(wǎng)、開心網(wǎng)、51 等。這一時期的SNS網(wǎng)站用戶用戶身份主要集中于企業(yè)白領(lǐng)，用戶需求呈現(xiàn)出多樣性和現(xiàn)實性；另外，SNS應(yīng)用和服務(wù)在商業(yè)化方面開始超越校內(nèi)網(wǎng)等第二階段。從國內(nèi)SNS網(wǎng)站發(fā)展脈絡(luò)中，可以看出，一個SNS網(wǎng)站要要想能夠更有活力的生存，想要活的更久，不僅要學會與用戶之間互動，更為重要的就是要架構(gòu)出社區(qū)這個意義，形成一個個的“圈子”，從而制造出良好的用戶體驗。依托圈子的力量將用戶粘住，提高用戶的活躍性，從而反作用于“圈子”，這樣所形成的良性的循環(huán)式發(fā)展，比一味靠炒作的噱頭而

16、短期增加用戶的手段要長遠得多。 雜亂無章的內(nèi)容與人群通過SNS社區(qū)變得有序 Web2.0時代的前端開發(fā)前端開發(fā)是互聯(lián)網(wǎng)產(chǎn)品開發(fā)工作逐漸細分的產(chǎn)物，前端開發(fā)工程師的職責用一句精煉的話表述即為：運用前端技術(shù)，實現(xiàn)體驗的良好傳達?！绑w驗”即前端設(shè)計部分，在這里指的是設(shè)計師對互聯(lián)網(wǎng)產(chǎn)品所做的交互設(shè)計和視覺設(shè)計，實現(xiàn)人員采用相關(guān)技術(shù)，將其實現(xiàn)為產(chǎn)品，通常，將PSD設(shè)計稿轉(zhuǎn)化為HTML+CSS+JS就是一種實現(xiàn)過程。web產(chǎn)品交互越來越復(fù)雜，用戶使用體驗和網(wǎng)站前端性能優(yōu)化，這些都需要專業(yè)的前端工程師來解決。另外，在項目中還要彌補設(shè)計師在交互設(shè)計上的不足，前端工程師在開發(fā)過程中起著重要的承上啟下的作用。一兩

17、個前端工程師就可以讓整個開發(fā)并行起來，讓設(shè)計到實現(xiàn)的轉(zhuǎn)換更順利。在前端開發(fā)過程中，如何進行合理的界面設(shè)計，是開發(fā)人員必須考慮的問題。在人機交互的工業(yè)設(shè)計領(lǐng)域，任何機器的交互產(chǎn)生的部分被稱為用戶界面（User Interface）。廣義上的人機交互包括硬件和軟件兩種。大多數(shù)系統(tǒng)的用戶界面都提供輸入和輸出，輸入使用戶得以操作一個系統(tǒng)，輸出則是系統(tǒng)對用戶的控制所作出的反應(yīng)。為了更好地完成人機交互過程，用戶界面的設(shè)計顯得尤為重要。設(shè)計的目的是使得系統(tǒng)能簡單而高效地完成用戶的需求。一個友好而美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離。關(guān)注于軟件戰(zhàn)略咨詢服務(wù)的獨立研究機構(gòu)InfoTrends在

18、其近期的研究中發(fā)現(xiàn), 企業(yè)對于用戶體驗的關(guān)注成為新的熱潮, 用戶體驗把握度的提升將成為新一輪企業(yè)市場競爭的拐點。界面設(shè)計并不僅僅停留在美工層面，而是心理學，美學，甚至社會學等多種知識的綜合運用，目前在國內(nèi)，用戶界面設(shè)計還是個相對陌生的詞，用戶界面設(shè)計也大多被視為網(wǎng)頁設(shè)計的同義詞，然而，即使是網(wǎng)頁設(shè)計，也并非僅僅停留在視覺層面或者技術(shù)層面。用戶界面設(shè)計主要遵循以下七大原則：方便用戶完成操作（suitability for the task）：人機對交互應(yīng)盡量有利于用戶有效且高效地完成操作。一目了然（Self-descriptiveness）：人機的每一次交互應(yīng)通過系統(tǒng)提示或解釋性提示使用戶能立即

19、了解交互目的。可控性（controllability）：在交互完成前，用戶應(yīng)當可以預(yù)先定制交互方式和節(jié)奏。和用戶期望保持一致（conformity with user expectations）：交互過程應(yīng)和用戶特征，如知識結(jié)構(gòu)，教育北京，經(jīng)歷，以及被廣泛接受的習慣保持一致。允許用戶犯錯（error tolerance）:當遇到錯誤輸入時，用戶不需或只需采取最少的行動以達到想要的目的。方便個性化設(shè)置（suitability for individualization）：用戶界面軟件應(yīng)當為不同需求，用戶偏好以及用戶水平提供相應(yīng)調(diào)整。方便用戶學習（suitability for learning）

20、：為用戶提供學習使用系統(tǒng)的途徑。SNS網(wǎng)站中，用戶的參與和用戶粘度是網(wǎng)站發(fā)展的關(guān)鍵因素，一個優(yōu)秀的用戶界面設(shè)計在帶來好的用戶體驗的同時，無疑增加了用戶對網(wǎng)站的好感度，為他繼續(xù)使用增加了籌碼。本系統(tǒng)在進行頁面設(shè)計時，努力以上述七條原則為參考，希望給目標用戶提供優(yōu)質(zhì)的用戶體驗。1.2 研究內(nèi)容和技術(shù)本系統(tǒng)具備SNS社區(qū)的主要功能模塊，為用戶提供網(wǎng)絡(luò)交流平臺，通過瀏覽和分享好友的資源，查看好友最新動態(tài)，給好友留言等方式增強聯(lián)系，達到社交目的。本系統(tǒng)區(qū)別于一般SNS社區(qū)的特點在于：用戶設(shè)定為武漢大學的學生，利用其現(xiàn)實生活中的聯(lián)系，為其提供生活資訊和實用信息，如問答求助，校園活動，舊物交換，資源共享等，

21、利用SNS網(wǎng)站六度分割原理，通過系統(tǒng)內(nèi)的“轉(zhuǎn)發(fā)”和“分享”功能，將用戶發(fā)布的信息傳播到所有可能達到的地方，實現(xiàn)最大化傳播。社區(qū)內(nèi)成員大多具有現(xiàn)實生活聯(lián)系，用戶通過已有的信任關(guān)系作為傳遞媒介建立起新的社會關(guān)系，這使那些具有較強的群體性的信息傳播更為快捷，朋友之間的人脈關(guān)系資源分享因為社交網(wǎng)絡(luò)的存在更為方便。這突破了傳統(tǒng)SNS社區(qū)單純交友的功能，體現(xiàn)了互聯(lián)網(wǎng)應(yīng)用對實際生活的巨大影響，使網(wǎng)絡(luò)變成一種生活方式。用戶通過相同的愛好，需求，形成一個一個的圈子，互相影響，形成對交流平臺的依賴性。本系統(tǒng)功能的實現(xiàn)主要采用Ajax技術(shù)和SSH（Struts+Spring+Hibernate）框架，并使用HTML

22、+CSS+jQuery作為前端技術(shù)，使網(wǎng)頁的框架結(jié)構(gòu)設(shè)計、網(wǎng)頁的樣式設(shè)計、實現(xiàn)網(wǎng)頁動態(tài)效果的腳本設(shè)計三者成功分離，前端和后端的工作并行，提高了團隊工作效率。正如前文所說，前端設(shè)計與實現(xiàn)在產(chǎn)品開發(fā)過程中占有重要地位，選用Ajax技術(shù)，也是為了保證前端開發(fā)的合理和高效。Ajax 與傳統(tǒng)的Web 對比, Ajax 可以通過在用戶操作頁面的同時無刷新的更新用戶界面。這樣的處理在某些情況下能夠給用戶帶來較好的用戶體驗。Ajax與傳統(tǒng)的Web 相比, 在操作性和展現(xiàn)力及交互性方面會給用戶不同體驗。在操作性和展現(xiàn)力方面，相對于桌面應(yīng)用程序, Web 應(yīng)用程序在操作性和展現(xiàn)力上明顯缺乏, 如果一個復(fù)雜一點的應(yīng)

23、用,在Web 上可能需要十幾個頁面來處理。而事實上我們需要交換的數(shù)據(jù)僅僅是網(wǎng)頁中的一部分內(nèi)容, 而不需要將整個頁面提交。Ajax 可以彌補這種操作性上的缺失。其次是交互性的問題。傳統(tǒng)的Web 由于 協(xié)議本身的缺陷, 頁面上的每一個功能都需要進行頁面刷新和下載, 大到提交數(shù)據(jù)、數(shù)據(jù)查詢、數(shù)據(jù)可視打印, 小到取一個變量。這個正是Ajax 模型最擅長的地方。按需更新頁面, 我們不再需要去刷新整個頁面,哪里需要刷新就刷新哪里, 大大降低傳輸?shù)臄?shù)據(jù)量,增強交互性。1.3 論文結(jié)構(gòu)本文的主要工作分為三部分：首先，對本系統(tǒng)的互聯(lián)網(wǎng)背景以及前端開發(fā)的行業(yè)發(fā)展做一個總的介紹，并陳述本系統(tǒng)在內(nèi)容和技術(shù)方面的特點和

24、意義。然后，對系統(tǒng)實現(xiàn)過程中所采用的框架和技術(shù)做詳細介紹，包括Ajax各部分的功能和關(guān)系，Javascript語言的特點及其在Ajax中的作用，并對SSH框架做一定介紹。另外，本系統(tǒng)所用到的Javascript框架jQuery在這一部分也將作介紹。接下來，將介紹本系統(tǒng)的功能以及開發(fā)環(huán)境，并進一步介紹核心技術(shù)。其后，以本系統(tǒng)各功能模塊為例，介紹jQuery在實現(xiàn)前端功能方面的具體方法。最后，對系統(tǒng)及本文做出總結(jié)，并提出本系統(tǒng)現(xiàn)階段的不足和需要改進的地方。第二章 系統(tǒng)框架與技術(shù) Ajax和JavascriptAjax（Asynchronous JavaScript And XML，異步JavaSc

25、ript和XML)，它在2005年由Jesse James Garrett首先提出，它是一種客戶端的技術(shù)。然而Ajax并不是一種新的技術(shù)，而是一些傳統(tǒng)技術(shù)的組合，每種技術(shù)都有其獨特之處。Ajax的出現(xiàn)，揭開了頁面無刷新技術(shù)的開始，并逐漸取代傳統(tǒng)的Web 交互方式以及通過隱藏的框架來實現(xiàn)異步提交，它使用XML Resqust 實現(xiàn)異步數(shù)據(jù)讀取，XML 和XSLT 進行數(shù)據(jù)交換與處理，并使用DOM 實現(xiàn)動態(tài)顯示和交互，已經(jīng)成為Web開發(fā)的一個里程碑。它的核心技術(shù)包括：1XML Request:AJAX的一個最大的特點是無需刷新頁面便可向服務(wù)器傳輸或讀寫數(shù)據(jù)(又稱無刷新更新頁面)，這一特點主要得益于

26、XML 組件XML Request對象。這樣就可以向再發(fā)桌面應(yīng)用程序只同服務(wù)器進行數(shù)據(jù)層面的交換，而不用每次都刷新界面也不用每次將數(shù)據(jù)處理的工作提交給服務(wù)器來做，這樣即減輕了服務(wù)器的負擔又加快了響應(yīng)速度、縮短了用戶等候時間。2JavaScript:是一種基于對象(object)和事件驅(qū)動并具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java腳本語言(Java小程序)一起實現(xiàn)在一個Web頁面中鏈接多個對象，與Web客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標準的HTML語言中實現(xiàn)的。它的出現(xiàn)彌補了HTML語言的缺陷，它是Java與HTML折衷的選擇。3

27、.DOM(DoemueniobjectModel):DOM是給HTML和XML文件使用的一組API。它提供了文件的結(jié)構(gòu)表述，讓你可以改變其中的內(nèi)容及可見物。其本質(zhì)是建立網(wǎng)頁與Script或程序語言溝通的橋梁。所有Web開發(fā)人員可操作及建立文件的屬性、方法及事件都以對象來展現(xiàn)(例如，Docmunet就代表“文件本身”這個對象，Table對象則代表HTML的表格對象等等)。這些對象可以由當今大多數(shù)的瀏覽器以Script來取用。4.CSS:CSS是Web設(shè)計沿用已久的部分，無論是在傳統(tǒng)的Wbe應(yīng)用還是在AJAX應(yīng)用中，CSS都是一種頻繁使用的技術(shù)。樣式表提供了集中定義各種視覺樣式的方法，并且可以非常

28、方便地設(shè)置在頁面的元素上。樣式表可以定義一些明顯的樣式元素，例如顏色、邊框、背景圖片、透明度和大小等。此外，樣式表還可以定義元素相互之間的布局以及簡單的用戶交互功能。圖2.2 Ajax關(guān)鍵元素圖示由此可以看出，JavaScript就像膠水將各個部分粘合在一起，定義應(yīng)用的工作流和業(yè)務(wù)邏輯。Javascript在Ajax中的作用具體體現(xiàn)在以下幾個方面：2.用Javascript的DOM組織視圖。3. 用Javascript中XML技術(shù)異步加載數(shù)據(jù)。2.2 jQuery簡介前文中已經(jīng)提到，Ajax和傳統(tǒng)的Web交互方式相比，具有無刷新更新數(shù)據(jù)，使用戶操作與服務(wù)器響應(yīng)異步化等優(yōu)勢，但它也有著一些不足：

29、首先，Ajax 對瀏覽器兼容性存在差別，實現(xiàn)Ajax 時，需要解決瀏覽器兼容性問題，加大開發(fā)成本；其次，缺乏開發(fā)與調(diào)試工具，使得開發(fā)Ajax 程序更加困難。此時，JQuery框架應(yīng)運而生，展現(xiàn)了其在無刷新技術(shù)上的優(yōu)勢。jQuery是一個優(yōu)秀的JavaScript庫是一個由John Resig創(chuàng)建于2006年1月的開源項目。iQuery憑借簡潔的語法和跨平臺的兼容性。極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、操作DOM、處理事件、執(zhí)行動畫和開發(fā)Ajax的操作。其獨特而又優(yōu)雅的代碼風格改變了JavaScript程序員的設(shè)計思路和編寫程序的方式。利用iQuery豐富的函數(shù)庫，可以減少

30、代碼的重復(fù)編寫及DOM腳本庫的調(diào)用。而只關(guān)注程序邏輯的實現(xiàn)，利用盡可能少的代碼實現(xiàn)想要實現(xiàn)的功能。在Ajax中引入jQuery具有這樣一些優(yōu)勢：（1）代碼簡練、語義易懂、學習快速、文檔豐富； （2）jQuery是一個輕量級的腳本，其代碼非常小巧，最新版的JavaScript包只有20K左右；（3）jQuery支持CSS1-CSS3,以及基本的xPath；（4）jQuery是跨瀏覽器的，它支持的瀏覽器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+；（5）可以很容易的為jQuery擴展其他功能；（6）能將JS代碼和HTML代碼完全分離，便于代碼和維護和修改；

31、（7）插件豐富，除了jQuery本身帶有的一些特效外，可以通過插件實現(xiàn)更多功能，如表單驗證、tab導航、拖放效果、表格排序、DataGrid，樹形菜單、圖像特效以及ajax上傳等。jQuery的使用方法非常簡單。首先到j(luò)Query官方網(wǎng)站（ jquery ）下載jQuery的最先版本。然后再頁面標簽之間加入下面的代碼： 其中，可以替換為不同的jQuery版本（是截至2011年5月16日的最新版本），這樣jQuery在該頁面中就可以使用了。2.3 SSH框架簡介Struts2+Spring+Hibernate是目前JavaWeb開發(fā)業(yè)界流行的開源框架技術(shù)。為提高系統(tǒng)的開發(fā)效率，使開發(fā)人員更注重于

32、業(yè)務(wù)邏輯設(shè)計，本系統(tǒng)采用J2EE輕量級框架技術(shù)即Struts，Hibernate和Spring的框架組合。Struts框架是基于MVC(modelvieweontroller)模式的框架，是Apache軟件基金會旗下的Jakarta項目組的一部分，是一個免費開源的Web層的應(yīng)用框架，在傳統(tǒng)的開發(fā)巾主要采用JSP與Servlet技術(shù)實現(xiàn)，把Servlet，JSP及自定義標簽和信息資源整合到一個統(tǒng)一的框架中，關(guān)注于控制器的流程而開發(fā)人員只需開發(fā)相應(yīng)的Action類、ActionFormBean和JSP組件，就可以套用Struts框架，進行項目的開發(fā)。Hibernate框架是一個優(yōu)秀的Java持久層

33、解決方案。是一個對象/關(guān)系映射框架。它把對象模型表示的對象映射到基于SQL的關(guān)系模型基礎(chǔ)上。在JDBC的方式上進行輕量級對象封裝。同時Hibemate還提供數(shù)據(jù)查詢和獲取數(shù)據(jù)的方法，減少使用SQL和JDBC訪問數(shù)據(jù)庫的時間。Spring框架是在J2EE的基礎(chǔ)上實現(xiàn)的一個輕量級J2EE框架。它服務(wù)于所有層面的應(yīng)用程序，提供了Bean的配置基礎(chǔ)、AOP的支持、JDBC提取框架、抽象事務(wù)支持等，它還有效地組織了系統(tǒng)中的中間層對象。消除了組件對象創(chuàng)建與使用耦合緊密的問題。SSH中各層的作用以及相互間的關(guān)系如圖2.1所示：圖2.1 SSH結(jié)構(gòu)圖第三章 SNS網(wǎng)站系統(tǒng)概述SNS交友平臺包括前臺界面和后臺管

34、理兩大模塊，對應(yīng)互聯(lián)網(wǎng)用戶和系統(tǒng)管理員兩種類型的用戶。前臺包括用戶登錄，注冊，首頁，個人主頁，還有對日志，個人狀態(tài)，相冊，個人收藏，個人資料和好友的管理操作。后臺包括對用戶發(fā)布的內(nèi)容進行查找，刪除等操作，維護和管理系統(tǒng)。產(chǎn)品環(huán)境介紹如圖3.1所示：圖3.1 產(chǎn)品環(huán)境拓撲圖3.2 系統(tǒng)功能概述 功能圖示和描述該系統(tǒng)的軟件功能框架如圖所示：用戶特征：注冊用戶：登錄前臺系統(tǒng)，根據(jù)不同的用戶權(quán)限，進行相關(guān)的操作。管理員：登錄后臺管理系統(tǒng)，可以對內(nèi)容進行添加、刪除、修改、查找等基本功能，管理、維護網(wǎng)站。（1）用戶通過輸入用戶名、密碼、真實姓名、性別、生日、電子郵箱、驗證碼注冊。這些項目為必填項目，其他的

35、用戶信息可以在注冊登錄以后，從個人資料圖3.2 系統(tǒng)功能圖管理模塊中修改。系統(tǒng)檢驗用戶的各項輸入是否合法，如果不合法，彈出提示信息，要求重新填寫。（2）用戶通過輸入用戶名和密碼登陸系統(tǒng)，如果不正確，彈出提示信息，要求重新輸入，如果正確，登錄成功。（1）個人狀態(tài)：用戶可以發(fā)表自己的個人狀態(tài)，顯示在個人主頁上。個人狀態(tài)的格式為中英文、常用字符、可選表情，長度限度為140個字符。（2）個人資料：用戶可以查看、修改個人資料。個人資料包括昵稱、真實姓名、性別、生日、學院、專業(yè)、郵箱、 、QQ、愛好、頭像、星座、省份、城市等。（3）留言板：用戶可以查看留言板，在留言板上留言、回復(fù)留言。（4）站內(nèi)信：用戶可

36、以寫站內(nèi)信給所有人（包括好友和非好友），也可以以站內(nèi)信的形式回復(fù)自己收到的站內(nèi)信。（5）賬號管理：用戶可以在賬號管理功能中修改密碼和停用賬號、恢復(fù)使用賬號。3.日志管理：用戶可以發(fā)表日志，編輯日志，查看和刪除日志。4.相冊管理：用戶可以創(chuàng)建、刪除、編輯、查看、分享相冊，管理員可以查看、刪除相冊，創(chuàng)建相冊的目的在于便于統(tǒng)一管理照片資源。5. 照片管理：所有照片統(tǒng)一組織在相冊下，用戶可以上傳、刪除、編輯、查看、分享照片，管理員可以查看、刪除照片。6. 收藏管理：收藏功能主要展示用戶用于交易的物品，可以為實物用品或者虛擬用品。交易雙方在線上聯(lián)系，線下交易。7.群組管理：群組的目的在于讓興趣愛好相同的

37、用戶能有一個交流的平臺，群組的形式相當于簡化版的論壇。用戶可以創(chuàng)建、解散群組，管理員可以解散群組。8.好友管理：用戶可以向其他用戶申請加為好友，也可以同意別人發(fā)給自己的好友申請。A向B申請加為好友，B同意好友申請，則A和B互相成為對方的好友。9.評論管理：用戶可以評論日志、照片、收藏、帖子，回復(fù)評論，也可以刪除自己的評論，管理員可以刪除任何人的評論。10：分享管理：用戶可以分享瀏覽的日志、相冊、照片、收藏、帖子，分享的信息出現(xiàn)在自己以及所有好友的新鮮事中。用戶也可以在我的分享中查看、刪除自己分享過的所有信息。 系統(tǒng)界面展示圖3.3 系統(tǒng)登錄界面圖3.4 系統(tǒng)首頁3.2.3 用戶接口本系統(tǒng)基于B

38、/S模式，提供給用戶的操作界面主要有：用戶登錄、注冊頁面（系統(tǒng)首頁），用戶首頁，個人主頁，日志頁面，相冊頁面，收藏頁面，群組頁面，好友頁面。界面能在1024*768的分辨率下很好地顯示，并自動適應(yīng)其它分辨率的顯示。3.2.4 軟件接口操作系統(tǒng)：windows xp/NT/2000以及以上版本、Linux系統(tǒng)；數(shù)據(jù)庫：MySql；瀏覽器：IE6.0，推薦使用IE6.0或以上版本，或Firefox，chrome等；Web服務(wù)器：Tomcat；分辨率：最佳效果1024*768分辨率；開發(fā)工具：MyEclipse+Tomcat+MySql，Dreamweaver CS5；開發(fā)語言：JAVA，Javas

39、cript；建模工具：Rational Rose；圖片處理：Adobe PhotoShop CS5。3.2.5 系統(tǒng)用例圖系統(tǒng)用例圖如圖3.5所示。3.3 系統(tǒng)核心技術(shù)系統(tǒng)的前端開發(fā)部分主要采用jQuery框架實現(xiàn)頁面的動態(tài)效果，并采用Ajax技術(shù)與服務(wù)器進行交互，提供良好的用戶體驗。各子系統(tǒng)中，用戶對好友內(nèi)容的回復(fù)，表情插入采用jQuery實現(xiàn)；注冊時，使用引入了jQuery的Ajax技術(shù)實現(xiàn)驗證功能；另外，采用jQuery UI中的日歷控件，為用戶提供可視化操作界面，同時方便系統(tǒng)讀取標準的日期格式；在登錄頁面中，使用jQuery實現(xiàn)豐富的動畫效果。下一章將對這些技術(shù)的具體實現(xiàn)進行詳細講解。

40、圖3.5 系統(tǒng)用例圖第四章 Ajax技術(shù)和jQuery在SNS網(wǎng)站前端設(shè)計與實現(xiàn)中的運用4.1 好友狀態(tài)回復(fù)功能在SNS交友平臺中，用戶可以隨時發(fā)布個人狀態(tài)，并顯示在該用戶好友的首頁，好友對其狀態(tài)進行回復(fù)，達到和用戶交流的目的。為了提供更活潑的交流方式，回復(fù)中可添加表情。這部分功能主要通過JQuery來實現(xiàn)。 狀態(tài)回復(fù)功能模塊實現(xiàn)思路為了節(jié)省頁面空間，狀態(tài)的回復(fù)框在用戶點擊之前為收起狀態(tài)，用戶點擊后展開，根據(jù)用戶的輸入情況顯示已輸入字數(shù)和最大輸入字數(shù)，用戶通過點擊表情按鈕，插入表情，點擊回復(fù)按鈕，輸入框中的內(nèi)容即顯示在頁面上。這些功能的實現(xiàn)大致思路為：控制DOM對象中的，通過focus()函數(shù)

41、實現(xiàn)展開和收起，通過keyup()事件判斷輸入字數(shù)；通過表情按鈕的onclick()事件，繪制表情面板，將選擇的表情顯示在textarea中；通過submit()函數(shù)將textarea中的內(nèi)容顯示在頁面中。 狀態(tài)回復(fù)功能模塊具體實現(xiàn)這一功能模塊將box和fb兩個元素放進layout這個塊級元素中，方便迭代，具體每個元素的類名如圖4.1所示：（a）（b）（c）圖4.1 狀態(tài)回復(fù)功能模塊圖示在圖4.1（a）中可以看到，當用戶尚未點擊輸入框時，恢復(fù)按鈕，表情按鈕等均未顯示，而是通過預(yù)先顯示“添加回復(fù)”字樣對用戶進行提示。當用戶點擊輸入框時，觸發(fā)textarea的focus事件，調(diào)用函數(shù)，將div.b

42、ox和span.fb顯示出來。核心代碼見附A1。當focus事件被觸發(fā)后，用next（）方法返回textlimit之后的，用show（）函數(shù)將其顯示，再通過，這樣，回復(fù)面板就徹底展開了。當用戶點擊回復(fù)框時，如果當前textlimit的值為默認title值，則自動清空。如果textlimit失去焦點并且其中沒有內(nèi)容，則用類似的方法調(diào)用blur（）函數(shù)收起回復(fù)面板。2.最大字數(shù)的判斷系統(tǒng)對用戶輸入的內(nèi)容限制在140字以內(nèi)，用戶輸入時，系統(tǒng)自動顯示當前輸入字數(shù)。這部分的核心代碼見附A2。每次textlimit的keyup事件被觸發(fā)，則調(diào)用maxLimit函數(shù)。該函數(shù)將輸入框中的字數(shù)顯示在textli

43、mit的下一個同輩節(jié)點的標簽為span的子節(jié)點中。3.插入表情用戶點擊表情按鈕，onclick事件被觸發(fā)，調(diào)用show（）函數(shù)，創(chuàng)建DOM元素，并定義其樣式，繪制出表情面板，再用append函數(shù)將其追加至html文檔中，與此同時用相關(guān)函數(shù)控制表情面板的顯示位置。單個表情圖片的顯示，利用for循環(huán)將指定文件夾中的表情樣式添加至表情面板中。值得一提的是，需要用replace函數(shù)將html頁面的表情代碼替換為圖片，以方便顯示在網(wǎng)頁上。function convertImg(val)return val.replace(/g, );最后點擊提交按鈕觸發(fā)submit事件，將textlimit中的內(nèi)容通過

44、DOM操作，顯示在頁面上。詳細代碼參見附A3。 功能模塊的界面設(shè)計評價系統(tǒng)對用戶的輸入控制在140字以內(nèi)，span#textCount的設(shè)計對用戶進行實時的提醒，顯示剩余字數(shù)，方便用戶控制輸入，和UI設(shè)計原則的suitability for the task和Self-descriptiveness的內(nèi)涵符合。4.2 注冊驗證用戶注冊時，需要填寫注冊郵箱，真實姓名，出生年月等信息，這些數(shù)據(jù)屬于必填項目，并需要用戶進行合法輸入。系統(tǒng)實現(xiàn)用戶輸入時的提示和輸入后的驗證。圖4.2展示了注冊部分的順序圖。 注冊驗證實現(xiàn)思路當用于鼠標移動到每個輸入框時，通過編寫hover（handlerIn，handl

45、erOut）事件的兩個參數(shù)，即鼠標移動到控件，和移出控件時引發(fā)的函數(shù)，顯示輸入提示。用戶鼠標點擊輸入框外的區(qū)域時，blur事件被觸發(fā)，調(diào)用相關(guān)函數(shù)，判斷輸入框中的內(nèi)容是否合法，這里可以采用正則表達式來判斷，如果不合法，通過改變輸入框的樣式進行提示。樣式如圖4.3所示。 注冊驗證具體實現(xiàn)在頁面元素input中添加兩個屬性reg=w+(-+.w+)*w+(-.w+)*.w+(-.w+)*$ tip=郵箱地址，如wangking717qq ，reg的值為正則表達式，用來表示該輸入框中的合法輸入，tip屬性的值為輸入提示的內(nèi)容，這兩個參數(shù)在js文件中將被調(diào)用。詳細代碼如附A4所示。圖4.2 用戶注冊順

46、序圖通過定位鼠標當前的X軸Y軸位置，得到提示框的top和left值，用append（）函數(shù)將提示框追加到頁面相應(yīng)位置。bgiframe（）是jQuery一款插件中提供的函數(shù)，用來解決 IE6 z-index 的問題，如果網(wǎng)頁上有浮動區(qū)塊和下拉選單重疊時，在IE6會看到下拉選框總是把浮動區(qū)塊覆蓋住，無論怎么調(diào)整 z-index 都是沒用的，而用 bgiframe 就可以輕松解決這個問題。這樣，無論在那種瀏覽器下，提示總會顯示在最頂層。HandlerOut觸發(fā)的函數(shù)較為簡單，將p#vtip用removeClass函數(shù)去掉即可。圖4.3 注冊驗證功能模塊圖示用戶的鼠標在輸入框之外的區(qū)域點擊時，輸入框

47、的blur事件被觸發(fā)，調(diào)用validate函數(shù)，具體代碼見附A4。RegExp是JS的正則表達式對象，有pattern和attribute兩個參數(shù)，參數(shù)pattern是一個字符串，指定了正則表達式的模式或其他正則表達式。參數(shù)attributes是一個可選的字符串，包含屬性 g、i 和 m，分別用于指定全局匹配、區(qū)分大小寫的匹配和多行匹配。new一個正則表達式對象，傳到pattern參數(shù)中的是輸入框中定義的reg屬性的值，objVallue則是用戶輸入的內(nèi)容，通過test（）函數(shù)判斷二者是否匹配，以此決定change_error_style（obj,msg,action_type）和change

48、_tip（obj,action_type）的action_type參數(shù)的值。這兩個函數(shù)通過判斷action_type的值對obj進行屬性和類的設(shè)定和刪除，達到顯示不同效果的目的。在管理員子系統(tǒng)中，添加管理員時系統(tǒng)會檢測新加的管理員的用戶名是否已被占用。新加管理員的form表單的action定義為addAdminAction，通過檢測數(shù)據(jù)庫，判斷用戶輸入是否已經(jīng)存在于數(shù)據(jù)庫中，如果不存在，則將新加的用戶添加到數(shù)據(jù)庫中，實現(xiàn)了和后臺的交互。如圖4.4所示：圖4.4 添加管理員功能模塊的界面設(shè)計評價在注冊功能模塊中，根據(jù)鼠標停留的區(qū)域給用戶響應(yīng)的提示，用戶輸入錯誤時，系統(tǒng)給出紅色輸入框的提示，用戶只

49、需再次輸入即可，與error tolerance原則相符合。同時，也避免了系統(tǒng)因為不合法的輸入造成的不可預(yù)期的錯誤，降低了系統(tǒng)處理出錯信息的成本。4.3 日歷控件系統(tǒng)中有多處地方需要用戶輸入日期，日期的格式多種多樣，為了避免因為格式或者其他誤輸而對后臺處理數(shù)據(jù)所造成影響，本系統(tǒng)提供日歷控件，用戶只用點擊日期，輸入框中即自動填進標準格式的內(nèi)容。本系統(tǒng)采用jQuery UI的datepicker控件，方便快捷地實現(xiàn)了該功能。 jQuery UI介紹jQuery UI 是一套 jQuery 的頁面 UI 插件，包含很多種常用的頁面空間，例如 Tabs（如本站首頁右上角部分） 、拉簾效果（本站首頁左上

50、角）、對話框、拖放效果、日期選擇、顏色選擇、數(shù)據(jù)排序、窗體大小調(diào)整等等非常多的內(nèi)容。這套插件具有這樣一些特點：1. 簡單易用，繼承jQuery簡易的特性，提供高度抽象接口；2. 兼容各主流桌面瀏覽器，包括IE 6+、Firefox 2+、Safari 3+、Opera9+、Chrome 1+。3. 組件間相對獨立，可按需加載，避免浪費帶寬拖慢網(wǎng)頁打開速度。4. 提供近 20 種預(yù)設(shè)主題，并可自定義多達 60 項可配置樣式規(guī)則，提供 24 種背景紋理選擇。使用時，首先在網(wǎng)頁中加載開發(fā)包中 jQuery 核心庫文件，再按需加載 ui.core.js、effects.core.js 及各組件代碼文件

51、，如設(shè)置可視組件外觀需同時加載 CSS 主題文件。 日歷控件具體使用jQuery UI中這一控件有多種樣式，適應(yīng)不同需求。例如，年份月份的選擇有默認的逐月選擇模式，適合選擇靠近當前日期的時間，還提供了以下拉方式選擇年份和月份的模式，方便用戶選擇較大范圍內(nèi)的日期，本系統(tǒng)視實際需求使用不同樣式。注冊頁面中，由于用戶需要選擇出生日期，一般距離當前日期時間較久，應(yīng)采用相應(yīng)的模式，如圖4.5所示：在頁面的頭部中，添加jquery-.js，這些庫文件即可使用datepicker插件。另外，為了使日歷控件的風格和網(wǎng)站整體風格一致，還需引用主題包，在開發(fā)包中加入redmond這一主題包，再引用其css即可：使

52、用時，將生日的輸入框id設(shè)為datepicker，并在添加如下代碼，即可顯示下拉模式的日歷控件：$(function() $( #datepicker ).datepicker(changeMonth: true,changeYear: true);)圖4.5 登陸頁面日歷控件效果默認的datepicker控件可供選擇的年份范圍是10年，在實際運用中不能滿足要求，需要對文件做相應(yīng)修改。在該文件用來顯示年月下拉框的_generateMonthYearHeader函數(shù)中，將10相應(yīng)地改為50，下拉框中可供選擇的年份即從1961年開始，基本可以滿足系統(tǒng)目標群體的需求。用戶發(fā)起活動的時候，需要填寫活動

53、開始時間和結(jié)束時間，供報名的同學參考，這需要避免用戶誤填導致的錯誤，如結(jié)束時間早于開始時間，使用datepicker控件可以很好地避免這一問題。效果如圖4.6所示：圖4.6 活動發(fā)起頁面的日歷控件效果控件對當前日期后的三個月給出了展示，方便用戶查看，用戶填寫了開始時間后，選擇結(jié)束時間時，開始時間之前的內(nèi)容自動設(shè)為不可選狀態(tài)，有效避免了不合法輸入。頁面使用該控件的方法與注冊頁面類似，將開始時間輸入框的id設(shè)為from，結(jié)束時間的id設(shè)為to，并在頭部文件中加入設(shè)置顯示月份個數(shù)等的Jquery函數(shù)即可。 功能模塊的界面設(shè)計評價日歷控件避免了用戶進行錯誤輸入，并且將本來依靠鍵盤輸入的內(nèi)容轉(zhuǎn)換成可視化

54、的鼠標點擊，更易于使用，并且方便系統(tǒng)數(shù)據(jù)庫錄入數(shù)據(jù)采取統(tǒng)一的格式。時間段選擇的控件可以清晰方便地查看將來日期，這個設(shè)計靈感來源于現(xiàn)實生活，用戶在制定計劃時經(jīng)常需要查看日歷，使用系統(tǒng)內(nèi)自帶的日歷無疑比使用系統(tǒng)外如桌面日歷方便許多，在實際使用中具有較大價值。 照片展示特效隨著前端技術(shù)的快速發(fā)展，網(wǎng)站的風格漸漸多樣化，特別是針對年輕人的網(wǎng)站，更是越來越追求視覺上的美感。jQuery的特點之一就是它提供了豐富的插件，可實現(xiàn)多種功能，如表單驗證、tab導航、拖放效果、表格排序、DataGrid，樹形菜單、圖像特效以及ajax上傳等，甚至一些許多類似flash的效果都可以實現(xiàn)，又避免了flash需要長時間

55、載入的問題。在SNS社區(qū)中，頭像是展示一個用戶個人風采最直接的手段，用戶在社區(qū)中活動時，也常常通過頭像來辨認好友。為了吸引新用戶注冊，本系統(tǒng)在登陸頁面隨機選取了若干用戶的頭像，用照片墻的形式展示，這樣，尚未注冊的用戶也能領(lǐng)略到系統(tǒng)內(nèi)用戶的風采，增強了注冊的欲望。照片墻采用jQuery插件來實現(xiàn)，效果如圖4.7所示。(a)(b)圖4.7 登陸頁面照片墻展示當鼠標移動到照片區(qū)域時，圖片放大，并突出顯示，下方提供用戶名字。照片墻右邊的圖片是一幅空白頭像，等候新用戶注冊，鼠標移動到上面以后，提示“馬上注冊”，點擊即進入注冊頁面，如圖（b）所示。插件中提供zoomer.css和zoomer.js這兩個文

56、件，實現(xiàn)這一效果需要對插件中的代碼做一些修改，以適合本頁面的大小和樣式。所有照片被放在div#container中，用元素以列表形式展現(xiàn)，通過設(shè)置中元素的float屬性，使其并排排列，通過定義container和每張圖片的尺寸，決定每行顯示的圖片數(shù)量。對尺寸做修改后，每行顯示6張圖片，每張大小為60*60像素。css文件中對圖片定義了一個hover類，決定鼠標懸停時的樣式，js代碼中，采用addClass（）函數(shù)將hover類添加到圖片中，圖片即放大。照片下的用戶名顯示效果通過js中的prepend（）函數(shù)將span#title添加到圖片下方，這一元素的樣式在css文件中已經(jīng)定義。由于對圖片大

57、小進行了修改，對圖片的動畫效果函數(shù)animate（params, duration, easing, callback)）中的相應(yīng)參數(shù)也應(yīng)做修改。params這一參數(shù)為一組包含作為動畫屬性和終值的樣式屬性和及其值的集合，如top，width等css常見屬性。在本例中，對照片滑動效果起作用的參數(shù)是marginTop，marginLeft，top，left，width，height和padding七個屬性，通過設(shè)定合適的值，實現(xiàn)了較為理想的效果?！癥OU”圖片的實現(xiàn)原理和其他照片類似，然而需要注意的是，緊鄰的登陸信息輸入模塊的float值設(shè)定為left，會隨著“YOU”圖片的伸縮而浮動，這顯然不是

58、我們預(yù)期的效果，解決方法是將“YOU”圖片所在的div#join的寬度設(shè)置為定值，稍大于圖片在變化過程中的最大寬度即可。最后，可以通過speedView和speedRemove兩個函數(shù)對圖片的運動速度進行控制。這部分詳細代碼見附A5。第五章 總結(jié)與展望5.1 總結(jié)本系統(tǒng)總體框架為Ajax+SSH，Ajax主要用來實現(xiàn)前臺和后臺的交互，在前端的設(shè)計和實現(xiàn)方面，主要采用HTML+CSS，使用Javascript作為連接Ajax各部分的腳本語言。具體實現(xiàn)過程中，選取簡潔的輕量級框架jQuery，并利用其豐富的插件，實現(xiàn)美觀大方的視覺效果。前端界面設(shè)計方面，本系統(tǒng)努力遵循UI設(shè)計的理念，重視UI設(shè)計的

59、七個原則，為用戶提供最好的用戶體驗。本文的主要工作為以下幾個方面：1.對項目的互聯(lián)網(wǎng)時代背景做了綜述，重視用戶，突出群體智慧的理念和技術(shù)方面的特性，和博客，微博，SNS等應(yīng)用。接下來簡要概括了SNS網(wǎng)站的功能特點，即自我展示和與好友的互動。 然后，本文對web2.0時代前端開發(fā)的作用及其在軟件開發(fā)中的地位做了闡述，前端開發(fā)在整個軟件開發(fā)過程中扮演了重要角色，前端設(shè)計應(yīng)遵循用戶界面設(shè)計的基本原則，而實現(xiàn)過程應(yīng)采用合理而高效的技術(shù)。2.重點闡述了本系統(tǒng)不同于其他SNS的性質(zhì)：以武漢大學學生為主要對象的社區(qū)，利用其現(xiàn)實聯(lián)系，為其提供生活資訊。依托同學的力量將用戶粘住，提高用戶的活躍性，從而反作用于“

60、圈子”，這樣所形成的良性的循環(huán)式發(fā)展。介紹了本系統(tǒng)前端所采用的主要技術(shù)，HTML+CSS+JQuery實現(xiàn)頁面布局和視覺效果。另外，本系統(tǒng)采用Ajax技術(shù)實現(xiàn)異步數(shù)據(jù)讀取和動態(tài)顯示交互。為了使開發(fā)人員更注重于業(yè)務(wù)邏輯設(shè)計，系統(tǒng)在后端技術(shù)方面采用J2EE輕量級框架技術(shù)SSH框架。 3.接下來，對本系統(tǒng)的核心技術(shù)，如Ajax，jQuery，SSH框架做了闡述。3.本文以系統(tǒng)中各功能模塊為例，對實際效果做了展示詳細，描述了留言回復(fù)，表單驗證，日歷控件，特效插件的設(shè)計思路和具體實現(xiàn)方法，并結(jié)合用戶界面設(shè)計原則對各功能進行了評價。設(shè)計原則，每部分功能模塊中，均做了評價：在狀態(tài)回復(fù)功能模塊中，字數(shù)提醒使得