基于HTML5的社交平臺(tái)的設(shè)計(jì)與開(kāi)發(fā)

摘要人民的生活水平隨著互聯(lián)網(wǎng)的發(fā)展而不斷提升，在網(wǎng)絡(luò)進(jìn)行社交活動(dòng)成為了當(dāng)代主流的一種娛樂(lè)方式。人們可以通過(guò)社交平臺(tái)表達(dá)內(nèi)心的情感需求，也能夠利用它迅速地獲取信息?？傮w上而言，社交平臺(tái)是一種能為人們帶來(lái)較高實(shí)際價(jià)值的互聯(lián)網(wǎng)產(chǎn)物。本W(wǎng)eb端社交平臺(tái)命名為“ON”，采用目前主流的Bootstrap前端框架進(jìn)行網(wǎng)頁(yè)的整體設(shè)計(jì)，不僅界面簡(jiǎn)潔美觀，而且解決了跨終端的顯示問(wèn)題。后端使用PHP語(yǔ)言進(jìn)行開(kāi)發(fā)，配合MySQL數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)儲(chǔ)存，打造了一個(gè)具有實(shí)用性、可靠性、可擴(kuò)展性以及先進(jìn)性的交互系統(tǒng)。平臺(tái)在默認(rèn)的社交功能基礎(chǔ)上拓展即時(shí)分享的板塊，極大地提升了用戶體驗(yàn)。根據(jù)用戶的操作喜好以及需求，網(wǎng)站分為四大板塊，分別是：首頁(yè)、好友、收藏、個(gè)人中心等。首頁(yè)能夠展示實(shí)時(shí)的多媒體大眾化信息，消除了平臺(tái)的孤立性。用戶可以在首頁(yè)進(jìn)行發(fā)布內(nèi)容和實(shí)時(shí)刪除的操作，方便快捷。在個(gè)人中心頁(yè)面，可以發(fā)布不對(duì)外公開(kāi)的私人動(dòng)態(tài)以及管理個(gè)人發(fā)布的所有內(nèi)容。網(wǎng)站還具備了即時(shí)互動(dòng)功能，能夠發(fā)表對(duì)好友動(dòng)態(tài)的評(píng)論以及發(fā)起對(duì)話等。這些功能均體現(xiàn)了社交的特性，能夠?yàn)橛脩籼峁┦孢m的使用體驗(yàn)，極大地增強(qiáng)了用戶對(duì)本W(wǎng)eb端平臺(tái)的粘性。為滿足有效管理平臺(tái)的需求，開(kāi)發(fā)了對(duì)應(yīng)的后臺(tái)管理系統(tǒng)，并通過(guò)管理系統(tǒng)對(duì)網(wǎng)站整體的內(nèi)容及用戶信息進(jìn)行維護(hù)，系統(tǒng)的主要功能包括刪減人員、發(fā)布官方公告等。簡(jiǎn)潔美觀的管理臺(tái)為管理人員提供了直觀的工作界面，便于各項(xiàng)工作事務(wù)的處理，有效提高了管理效率，具有較好的實(shí)際應(yīng)用效果。本文將對(duì)平臺(tái)的開(kāi)發(fā)理念、設(shè)計(jì)思想以及實(shí)現(xiàn)方法作詳細(xì)的闡述，并且展示開(kāi)發(fā)的成果。關(guān)鍵詞：HTML5；PHP；Web端；社交平臺(tái)

AbstractWiththedevelopmentoftheInternet,people'slivingstandardsareconstantlyimproving,andsocialactivitiesontheInternethavebecomeamainstreamwayofentertainment.Peoplecanexpresstheirinneremotionalneedsthroughsocialplatform,andalsocanuseittogetinformationquickly.Generallyspeaking,socialplatformisakindofInternetproductthatcanbringhighpracticalvaluetopeople.Thisweb-basedsocialplatformisnamed"on",whichusesthecurrentmainstreambootstrapfront-endframeworkfortheoveralldesignofthewebpage.Itnotonlyhasasimpleandbeautifulinterface,butalsosolvestheproblemofcrossterminaldisplay.Theback-endisdevelopedbyusingPHPlanguageandstoredinMySQLdatabase.Itcreatesapractical,reliable,scalableandadvancedinteractivesystem.Basedonthedefaultsocialfunction,theplatformexpandsthereal-timesharingmodule,greatlyimprovingtheuserexperience.Accordingtotheuser'soperationpreferencesandneeds,thewebsiteisdividedintofourparts:homepage,friends,collection,personalcenter,etc.Thehomepagecandisplayreal-timemultimediapopularinformation,eliminatingtheisolationoftheplatform.Userscanpublishcontentonthehomepageanddeleteitinrealtime,whichisconvenientandfast.Onthepersonalcenterpage,youcanpublishprivatenewsthatisnotpubliclyavailableandmanageallthecontentpublishedbyindividuals.Thesefeaturescanprovideuserswithacomfortableexperienceandgreatlyenhancetheuser'sstickinesstothewebplatform.Inordertomeettheneedsoftheeffectivemanagementplatform,thecorrespondingbackgroundmanagementsystemisdeveloped,whichmainlyincludespersonneldeletion,officialannouncementandotherfunctions,withbetterpracticalapplicationeffect.Keywords：Web;HTML5;SocialPlatform;PHP

目錄14929第一章緒論 緒論選題的目的和意義新時(shí)代下信息社會(huì)的飛速發(fā)展，給人們創(chuàng)造了更多的交流方式。網(wǎng)絡(luò)社會(huì)互動(dòng)是社會(huì)互動(dòng)中的一種，它是基于互聯(lián)網(wǎng)而形成的互動(dòng)形式[[]吳詠梅.互聯(lián)網(wǎng)時(shí)代社會(huì)互動(dòng)的特點(diǎn)[J[]吳詠梅.互聯(lián)網(wǎng)時(shí)代社會(huì)互動(dòng)的特點(diǎn)[J].新西部:下旬·理論,2014(9):113-113.社交平臺(tái)作為一種社會(huì)化媒體，通過(guò)鏈接用戶與用戶構(gòu)建社會(huì)化網(wǎng)絡(luò)，為人們提供了信息交換的平臺(tái)，其用戶可以借助網(wǎng)絡(luò)傳播信息，并向另一群使用網(wǎng)絡(luò)的用戶開(kāi)放。基于社交平臺(tái)的功能及屬性，信息可以很快地傳播，人與人之間的關(guān)系更加密切。網(wǎng)絡(luò)社交平臺(tái)還具有操作簡(jiǎn)易的特點(diǎn)，從注冊(cè)到使用一目了然，降低了對(duì)用戶的技術(shù)要求，適用人群面廣泛。以此趨勢(shì)發(fā)展，社交平臺(tái)必然成為終端上人群聚合和深度社交的強(qiáng)力紐帶。概括地說(shuō)，對(duì)于個(gè)體而言，社交平臺(tái)主要提供了這三種價(jià)值：為人們提供一條社交的新方式，并縮短認(rèn)識(shí)、溝通的途徑。為人們的情感需求提供服務(wù)。大幅度地提升在社交過(guò)程中獲取信息的效率。為了不斷提高社交平臺(tái)所能創(chuàng)造的價(jià)值，滿足人們的社交需求，打造積極生長(zhǎng)的健康社交平臺(tái)成為互聯(lián)網(wǎng)時(shí)代下的重大挑戰(zhàn)。在現(xiàn)代，各種社交應(yīng)用層出不窮，在相互競(jìng)爭(zhēng)的同時(shí)，實(shí)現(xiàn)了融合發(fā)展。本次開(kāi)發(fā)便是在這一背景下，通過(guò)分析市面上各種社交應(yīng)用的優(yōu)缺點(diǎn)，結(jié)合當(dāng)前流行的開(kāi)發(fā)方式所完成的。該平臺(tái)充分考慮了用戶的需求以及類似產(chǎn)品的功能不足之處，進(jìn)行了對(duì)應(yīng)的提升，系統(tǒng)也能夠十分方便地進(jìn)行更新及維護(hù)。國(guó)內(nèi)外發(fā)展現(xiàn)狀和發(fā)展趨勢(shì)社交媒體的起源可以追溯到1971年，這一年便是E-Mail（電子郵件）的誕生年，從此社交媒體便依賴著互聯(lián)網(wǎng)技術(shù)以及智能終端的發(fā)展而迅速成長(zhǎng)，以各種各樣的形式呈現(xiàn)在人們的面前。互聯(lián)網(wǎng)作為世界發(fā)展歷程中一場(chǎng)完全改變?nèi)祟惿罘绞降膫鞑ジ锩?，賦予了公眾超越空間和時(shí)間傳播信息的能力以及權(quán)力。在互聯(lián)網(wǎng)時(shí)代，

人們可以即時(shí)地交換海量信息，以點(diǎn)對(duì)點(diǎn)、點(diǎn)對(duì)面、面對(duì)點(diǎn)、面對(duì)面的形式在網(wǎng)絡(luò)中進(jìn)行溝通，當(dāng)然這種情況能夠?qū)崿F(xiàn)必不可少的還有平臺(tái)及終端這兩個(gè)載體。人類對(duì)社交網(wǎng)絡(luò)的細(xì)致研究在互聯(lián)網(wǎng)未出現(xiàn)時(shí)便已存在。在1967年，美國(guó)哈佛大學(xué)的著名心理學(xué)教授米爾格蘭姆（StanleyMilgram）經(jīng)過(guò)實(shí)驗(yàn)發(fā)現(xiàn)：兩位陌生人之間，最多通過(guò)六個(gè)人便可以互相認(rèn)識(shí)。這個(gè)現(xiàn)象便是著名的“六度分隔”現(xiàn)象，這個(gè)現(xiàn)象表明了一個(gè)重要的概念，人與人之間必然可以通過(guò)一定的聯(lián)系方式，產(chǎn)生聯(lián)系或關(guān)系。該理論將世界看作是一個(gè)互相聯(lián)系的“六度空間”，空間模型示意圖如圖1-1。圖1-1六度空間模型示意圖早期的SNS（SocialNetworkSoftware）社交網(wǎng)絡(luò)服務(wù)，便是根據(jù)該理論而創(chuàng)立的一種網(wǎng)絡(luò)傳播的社交模式。從SNS社交網(wǎng)絡(luò)到如今的全媒體社交網(wǎng)路，這個(gè)過(guò)程經(jīng)過(guò)了40年的演變。微博（Micro-blog）的概念最早在2006年由美國(guó)人威廉姆斯（EvanWilliams）提出，他亦是一款社交平臺(tái)的創(chuàng)始人，這個(gè)社交平臺(tái)便是全球知名的——特推（Twitter）。推特這個(gè)集有線網(wǎng)絡(luò)、無(wú)線網(wǎng)絡(luò)和即時(shí)通訊為一體的交流平臺(tái)迅速改變了傳統(tǒng)的網(wǎng)絡(luò)傳播模式并活躍發(fā)展至今，開(kāi)拓了互聯(lián)網(wǎng)社交這片疆土。國(guó)內(nèi)在移動(dòng)互聯(lián)網(wǎng)時(shí)代處于社交應(yīng)用市場(chǎng)領(lǐng)先地位的開(kāi)發(fā)商有網(wǎng)易、騰訊、新浪等，它們也是國(guó)內(nèi)網(wǎng)絡(luò)傳播模式改革的第一批建設(shè)者。新浪微博的出現(xiàn)對(duì)中國(guó)社會(huì)的影響巨大，2010年甚至被稱為中國(guó)的微博元年。通過(guò)分析國(guó)內(nèi)外的社交傳播模式可以得出以下結(jié)論：社交媒體是順應(yīng)時(shí)代發(fā)展的產(chǎn)物，需要人們通過(guò)技術(shù)升級(jí)以及維護(hù)網(wǎng)絡(luò)生態(tài)使其更進(jìn)一步地得到發(fā)展。

研究?jī)?nèi)容本文所述的開(kāi)發(fā)項(xiàng)目是在對(duì)國(guó)內(nèi)外相關(guān)開(kāi)發(fā)技術(shù)進(jìn)行充分研究之后所進(jìn)行的，研究?jī)?nèi)容包括Web應(yīng)用開(kāi)發(fā)所需技術(shù)及其工作原理。本次開(kāi)發(fā)的社交網(wǎng)站運(yùn)用HTML5以及CSS3進(jìn)行靜態(tài)頁(yè)面的搭建，并且采用了主流的Bootstrap框架進(jìn)行網(wǎng)站風(fēng)格統(tǒng)一化以及構(gòu)造響應(yīng)式布局，使界面更加簡(jiǎn)潔、美觀。在選擇后端開(kāi)發(fā)語(yǔ)言時(shí)充分考慮項(xiàng)目的需求和未來(lái)的發(fā)展，對(duì)目前基于MVC設(shè)計(jì)模式的主流開(kāi)發(fā)框架進(jìn)行了多方面的對(duì)比后，選擇使用在Web開(kāi)發(fā)領(lǐng)域占據(jù)較大市場(chǎng)份額PHP語(yǔ)言進(jìn)行服務(wù)端數(shù)據(jù)交互。網(wǎng)站的數(shù)據(jù)庫(kù)使用的是開(kāi)源、強(qiáng)大的MySQL，通過(guò)SQL語(yǔ)句可以對(duì)數(shù)據(jù)進(jìn)行存取操作，并且支持多種查詢方式，方便快捷。本研究將開(kāi)發(fā)一款以社交互動(dòng)為業(yè)務(wù)核心的網(wǎng)絡(luò)社交平臺(tái)，取名為：ON，寓意著“即時(shí)在線、時(shí)刻活躍”，網(wǎng)站具有良好的社交特性，用戶能從中感受到使用價(jià)值。開(kāi)發(fā)目標(biāo)通過(guò)研究多款主流Web社交平臺(tái)的界面、功能、交互等設(shè)計(jì)，分析得出社交平臺(tái)的核心開(kāi)發(fā)要素，確定本次設(shè)計(jì)與開(kāi)發(fā)的社交平臺(tái)具有社會(huì)化屬性，以用戶為核心，創(chuàng)造一個(gè)自由交流的平臺(tái)，強(qiáng)調(diào)分享和個(gè)性化定制的新理念。根據(jù)從社交出發(fā)的思路，融合自媒體和社交互動(dòng)的模式，搭建傳播與交流的平臺(tái)，形成活躍的用戶社區(qū)，在滿足用戶的社會(huì)化需求的同時(shí)，提供保留個(gè)人私密性信息的空間，隱私信息停留在用戶終端上，只有本人可以查看，不會(huì)在其他用戶的界面被獲知。本平臺(tái)不僅具有上述的社交和媒體雙重屬性，也可以作為即時(shí)通訊工具被使用，實(shí)現(xiàn)即時(shí)傳播的效果。利用平臺(tái)的聊天功能不僅可以實(shí)現(xiàn)文字交流，而且可以互相傳遞、接收?qǐng)D片以及短視頻，成為實(shí)用的多媒體通訊工具。在即時(shí)通訊這個(gè)板塊下，構(gòu)建的是以雙向互動(dòng)為中心的對(duì)等網(wǎng)絡(luò)（P2P），加強(qiáng)了個(gè)體之間的直接交流，獲取信息的速度相較于傳統(tǒng)交流方式如：電話、郵件等迥然不同，溝通效率得到顯著提升，充分利用了傳播載體創(chuàng)造社交傳播價(jià)值。本著從“用戶的需求出發(fā)服務(wù)用戶”的設(shè)計(jì)理念，確定平臺(tái)的各項(xiàng)特性。從功能屬性上看，本社交網(wǎng)站不僅是一款即時(shí)通訊工具，而且還是一個(gè)大型交流社區(qū)，具有雙重屬性，能夠互相融合。網(wǎng)站面向的社交網(wǎng)絡(luò)是多面的，既可以構(gòu)建熟人社交網(wǎng)絡(luò)，也可以是陌生人社交網(wǎng)絡(luò)，或是基于興趣愛(ài)好等構(gòu)建特色的社交網(wǎng)絡(luò)。

在這個(gè)追求信息傳輸效率的時(shí)代，社交網(wǎng)站的設(shè)計(jì)初衷并不只局限于提供一個(gè)交友的平臺(tái)，它亦是“微內(nèi)容”的傳播載體。微內(nèi)容是一種新興的內(nèi)容形態(tài)，是傳播環(huán)境碎片化的結(jié)果，更適應(yīng)現(xiàn)代人快節(jié)奏的生活習(xí)慣。信息含量少、主題離散的微內(nèi)容能夠在短時(shí)間內(nèi)獲得大量傳播，離不開(kāi)信息平臺(tái)的聚合與發(fā)布功能，這意味著，信息平臺(tái)能夠?yàn)橛脩籼峁┖Ａ康奈?nèi)容，也可以提供用戶制作微內(nèi)容的工具，用戶閱讀與制作微內(nèi)容所需要的時(shí)間短，制作成本低。微內(nèi)容不僅包含了文字和圖片，還有短視頻以及音頻等多種表現(xiàn)形式，直觀具體，傳播成本低，受眾面廣泛。本社交平臺(tái)項(xiàng)目正是致力于打造新型的信息聚合平臺(tái)，建立一個(gè)開(kāi)放多元的交流空間，用戶可以是讀者，也可以是作者。在這個(gè)平臺(tái)上，用戶可以自行選擇閱讀的內(nèi)容，也可以自由編輯內(nèi)容進(jìn)行發(fā)布，在這個(gè)平臺(tái)中融合多重身份，在互聯(lián)網(wǎng)的虛擬社區(qū)里創(chuàng)造互動(dòng)，打造個(gè)性。以上為本次社交平臺(tái)開(kāi)發(fā)目標(biāo)的詳細(xì)說(shuō)明，目標(biāo)的確定有利于后續(xù)的研究與設(shè)計(jì)，并且制定一個(gè)理想的可持續(xù)發(fā)展模式。網(wǎng)站的核心四大驅(qū)動(dòng)要素為內(nèi)容形式、社交模式、兩類用戶（信息消費(fèi)者、信息生產(chǎn)者），通過(guò)下圖1-2說(shuō)明這四者間的關(guān)系。圖1-2網(wǎng)站核心驅(qū)動(dòng)要素關(guān)系圖

本文組織結(jié)構(gòu)本文共分為7個(gè)章節(jié)，各章節(jié)的主要內(nèi)容如下：第一章緒論，概述本次項(xiàng)目的選題目的和意義，并對(duì)國(guó)內(nèi)外的相關(guān)研究進(jìn)行分析說(shuō)明，并且通過(guò)研究結(jié)果確定開(kāi)發(fā)目標(biāo)。第二章相關(guān)理論與技術(shù)，對(duì)網(wǎng)站開(kāi)發(fā)所用的核心技術(shù)進(jìn)行詳細(xì)地說(shuō)明，分為前端和后端兩部分闡述技術(shù)原理，并對(duì)數(shù)據(jù)庫(kù)技術(shù)加以解釋。第三章網(wǎng)站系統(tǒng)分析，對(duì)網(wǎng)站開(kāi)發(fā)涉及的功能性需求及非功能性需求進(jìn)行全面的分析，確定其可行性。第四章網(wǎng)站的詳細(xì)設(shè)計(jì)，根據(jù)上述幾章的分析，確定網(wǎng)頁(yè)的設(shè)計(jì)，說(shuō)明整體的原型設(shè)計(jì)及思路。并且將數(shù)據(jù)庫(kù)的設(shè)計(jì)以表格的方式進(jìn)行詳細(xì)闡述。第五章網(wǎng)站各項(xiàng)核心功能的實(shí)現(xiàn)，按照開(kāi)發(fā)流程詳細(xì)闡述各功能的實(shí)現(xiàn)方法，并且演示效果。第六章網(wǎng)站測(cè)試，對(duì)開(kāi)發(fā)完成的平臺(tái)進(jìn)行系統(tǒng)全面的功能測(cè)試，并對(duì)測(cè)試結(jié)果進(jìn)行分析。第七章總結(jié)，將對(duì)本次開(kāi)發(fā)的心得及感想作具體的陳述。

相關(guān)理論與技術(shù)前端技術(shù)HTMLHTML是純文本類型的語(yǔ)言，使用HTML編寫(xiě)的網(wǎng)頁(yè)文件也是標(biāo)準(zhǔn)的純文本文件。HTML文件可以直接由瀏覽器解釋執(zhí)行，而無(wú)需編譯。當(dāng)用瀏覽器打開(kāi)網(wǎng)頁(yè)時(shí)，瀏覽器讀取網(wǎng)頁(yè)中的HTML代碼，分析其語(yǔ)法結(jié)構(gòu)，然后根據(jù)解釋的結(jié)果顯示網(wǎng)頁(yè)內(nèi)容[[]雪豐盛.HTML5+CSS3[]雪豐盛.HTML5+CSS3程序設(shè)計(jì)[M].人民郵電出版社,2017.[]吳慶濤,劉超慧,聶榮.HTML5一下一代Web開(kāi)發(fā)標(biāo)準(zhǔn)的核心技術(shù)探討[J].許昌學(xué)院學(xué)報(bào),2012,30(5):61-63.CSSCSS通常稱為CSS樣式或樣式表，在制作網(wǎng)頁(yè)時(shí)采用CSS主要是用于設(shè)置頁(yè)面的文本內(nèi)容，比如版面布局（對(duì)齊方式、邊距、長(zhǎng)寬等）、圖片外形、組件樣式、字體、背景等，對(duì)頁(yè)面整體實(shí)現(xiàn)精準(zhǔn)控制。操作簡(jiǎn)易，只需要在指定頁(yè)面內(nèi)容的代碼中添加對(duì)應(yīng)的規(guī)范語(yǔ)言，即可以實(shí)現(xiàn)網(wǎng)站的風(fēng)格化。在目前較為流行的CSS+DIV（層疊樣式表單元的位置和層次）布局網(wǎng)站中，CSS起到了無(wú)可比擬的美化作用。作為輕量的文本格式，CSS能夠有效地優(yōu)化網(wǎng)頁(yè)速度，開(kāi)發(fā)者可以直接使用其提供的濾鏡效果，不需要大量圖片即可實(shí)現(xiàn)風(fēng)格化設(shè)定，縮小了文件的體積，下載速度進(jìn)而得到提升。BootstrapBootstrap是由Twitter公司基于HTML、CSS、JavaScript開(kāi)發(fā)的前端框架，具有簡(jiǎn)潔、直觀的特點(diǎn)，其規(guī)整的HTML和CSS書(shū)寫(xiě)規(guī)范使得Web開(kāi)發(fā)更加快捷，深受開(kāi)發(fā)者的喜愛(ài)，成為經(jīng)久不衰的熱門(mén)開(kāi)源項(xiàng)目。Bootstrap自帶豐富的CSS

樣式、可重用組件以及多種jQuery插件，均支持開(kāi)發(fā)者進(jìn)行自定義修改，得到符合個(gè)人需求的版本。Bootstrap中自帶的Web組件包括：導(dǎo)航條、按鈕組、下拉菜單、排版、對(duì)話框、媒體對(duì)象等，使用這些組件可以快速地搭建起一個(gè)功能齊全的網(wǎng)站，且不失美感；其自帶的jQuery插件共有13個(gè)，為組件提供了交互支持，包括：菜單下拉選擇、對(duì)話彈出框、滾動(dòng)選擇等。經(jīng)過(guò)開(kāi)發(fā)商的不斷改進(jìn)，Bootstrap不再依賴單一的CSS驅(qū)動(dòng)項(xiàng)目，目前不僅具備完善的組件集、插件集等工具庫(kù)，還擁有靈活的響應(yīng)式柵格系統(tǒng)。后端技術(shù)PHP根據(jù)W3Techs數(shù)據(jù)顯示：在最受歡迎的服務(wù)器端Web編程語(yǔ)言排行榜中，PHP排名第一，使用率為81.9%，遠(yuǎn)遠(yuǎn)領(lǐng)先于其他語(yǔ)言[[]張超.基于PHP[]張超.基于PHP的Web開(kāi)發(fā)框架的設(shè)計(jì)與實(shí)現(xiàn)[D].東北大學(xué),2013.JavaScript使用JavaScript（以下簡(jiǎn)稱JS）對(duì)本次開(kāi)發(fā)的網(wǎng)站進(jìn)行動(dòng)態(tài)行為編程。作為解釋性語(yǔ)言，JS可以直接被嵌入前端頁(yè)面代碼中，即時(shí)編譯且輕量級(jí)，被廣泛運(yùn)用于開(kāi)發(fā)Web端的應(yīng)用。應(yīng)用JS，開(kāi)發(fā)者可以為網(wǎng)頁(yè)增添各種各樣的動(dòng)態(tài)效果以及功能，向用戶提供豐富的人機(jī)交互事件。當(dāng)Web瀏覽器顯示被CSS渲染過(guò)后的HTML標(biāo)記時(shí)，若需要在頁(yè)面中產(chǎn)生交互，例如：驗(yàn)證需提交的服務(wù)器數(shù)據(jù)、行為警告等，都可以通過(guò)JS實(shí)現(xiàn)。常見(jiàn)的用途還包括：響應(yīng)瀏覽器事件、創(chuàng)建和修改cookies等。JS遵從ECMAScript（以下簡(jiǎn)稱ES），以及一些ES的其它實(shí)現(xiàn)版本，比如JScript、ActionScript等等，JS成為了其中最為流行的一種規(guī)范。JS還是一種多規(guī)范式語(yǔ)言，意味著它擁有很多不同的編寫(xiě)代碼方式或范式，既可以采用面向?qū)ο缶幊?，也可以采用函?shù)式編程。

AjaxAjax的全稱為“AsynchronousJavascriptAndXML”，這是一種無(wú)需重新加載整個(gè)頁(yè)面便可通過(guò)局部刷新獲取所需數(shù)據(jù)的技術(shù)。原理是通過(guò)JavaScript中一個(gè)名為XMLHttpRequest（以下簡(jiǎn)稱XHR）的對(duì)象，在避免用戶被阻塞的情況下，與網(wǎng)站服務(wù)器進(jìn)行特定數(shù)據(jù)的交換。在這個(gè)過(guò)程中，瀏覽器和Web服務(wù)器之間進(jìn)行了異步數(shù)據(jù)傳輸，且這個(gè)過(guò)程對(duì)于用戶來(lái)說(shuō)是透明的，因?yàn)樵谟脩艨梢暤慕缑嫔?，看不出任何的變化。但是?dāng)XHR對(duì)象接收了Web服務(wù)器返回的數(shù)據(jù)后，會(huì)對(duì)DOM采用回調(diào)方法繼而在頁(yè)面的特定位置更新數(shù)據(jù)，這種技術(shù)可以使用戶的動(dòng)作更快速地被Web端應(yīng)用回應(yīng)，避免重復(fù)發(fā)送沒(méi)有變化的冗余信息。運(yùn)行原理圖示如下圖2-1所示。圖2-1Ajax運(yùn)行原理數(shù)據(jù)庫(kù)技術(shù)MySQLMySQL是一個(gè)被廣泛運(yùn)用于Web應(yīng)用開(kāi)發(fā)的關(guān)聯(lián)型數(shù)據(jù)庫(kù)管理系統(tǒng)，它最顯著的特點(diǎn)是可以將各種復(fù)雜的數(shù)據(jù)分別保存在不同的表中。MySQL一般在面向客戶端的服務(wù)器或者嵌入系統(tǒng)中進(jìn)行工作，與其他數(shù)據(jù)庫(kù)管理系統(tǒng)相比，更加快速、可靠且易于使用。在需要重負(fù)載生產(chǎn)系統(tǒng)和關(guān)鍵任務(wù)時(shí)，MySQL也能夠有效地發(fā)揮作用，甚至可以在大型配置的軟件中嵌入它。MySQL系統(tǒng)的整體構(gòu)造如圖2-2所示。

圖2-2MySQL系統(tǒng)構(gòu)造MySQL不僅支持多種操作系統(tǒng)，比如MacOS、Windows、Unix等，而且其支持的編寫(xiě)語(yǔ)言也不局限于一種，使用C語(yǔ)言或者C++均可，實(shí)現(xiàn)了數(shù)據(jù)的可移植性，方便開(kāi)發(fā)人員進(jìn)行管理。除了上述的優(yōu)勢(shì)，MySQL還具有多種特性，可以幫助開(kāi)發(fā)人員完成不同的數(shù)據(jù)管理需求，比如：支持多線程；內(nèi)部提供了多種儲(chǔ)存引擎；連接數(shù)據(jù)庫(kù)的方式有多種。在安全性方面，MySQL采用的是加密傳輸密碼的方式，本質(zhì)上就是通過(guò)主機(jī)驗(yàn)證保護(hù)使用者賬號(hào)。MySQL中所使用的SQL語(yǔ)句具有高度完整性，也是其一大亮點(diǎn)。

開(kāi)發(fā)環(huán)境開(kāi)發(fā)工具開(kāi)發(fā)所用工具采用列表詳述，如表2-1所示。表2-1開(kāi)發(fā)工具序號(hào)名稱版本備注1WebStorm2017.2.2前端編譯工具2DreamweaverCS6后端編譯工具3PhotoshopCS6UI設(shè)計(jì)工具4MySQL5.5.8數(shù)據(jù)庫(kù)管理系統(tǒng)5Apache2.2.17網(wǎng)頁(yè)服務(wù)器6phpMyAdmin2.10.3數(shù)據(jù)庫(kù)管理界面7Windows10（64位）操作系統(tǒng)硬件環(huán)境開(kāi)發(fā)所處的硬件環(huán)境采用列表詳述，如表2-2所示表2-2開(kāi)發(fā)硬件環(huán)境序號(hào)名稱配置備注1HPPavilion8G內(nèi)存+1TB主硬盤(pán)筆記本電腦2CPU英特爾Corei5-6300HQ處理器

網(wǎng)站系統(tǒng)分析可行性分析開(kāi)發(fā)項(xiàng)目必須要進(jìn)行可行性分析的原因在于，明確本次項(xiàng)目需要實(shí)現(xiàn)的內(nèi)容，在項(xiàng)目開(kāi)發(fā)的工作中起著至重要的作用，是不能被忽略的前期準(zhǔn)備。經(jīng)濟(jì)效益分析網(wǎng)站面向用戶的客戶前端采用開(kāi)源的Bootstrap前端開(kāi)發(fā)框架，以及免費(fèi)的CSS、jQuery插件、JavaScript等工具庫(kù)。開(kāi)發(fā)工具選擇破解開(kāi)放版的Dreamweaver、WebStorm，無(wú)須支出費(fèi)用。在不影響工作效率的情況下，將網(wǎng)站開(kāi)發(fā)過(guò)程中的技術(shù)、工具成本降到最低。本次開(kāi)發(fā)充分利用了Bootstrap的響應(yīng)式柵格系統(tǒng)，一次開(kāi)發(fā)便可以搭建多終端適用的前端界面，供持有不同終端設(shè)備的用戶使用，無(wú)須耗費(fèi)人力及時(shí)間分別搭建手機(jī)端的和PC端的網(wǎng)站界面，較大程度上降低了對(duì)人力的需求，并且縮減了開(kāi)發(fā)周期縮。網(wǎng)站充分遵循“高內(nèi)聚，低耦合”原則，各功能板塊均使用前后端分離的方式實(shí)現(xiàn)，降低了后期維護(hù)的人力成本，從網(wǎng)站運(yùn)營(yíng)的角度看，這樣不僅可以節(jié)省管理的經(jīng)濟(jì)支出，而且提高了網(wǎng)站本身運(yùn)行的效率。用戶只需要在有網(wǎng)絡(luò)（包括：無(wú)線局域網(wǎng)、蜂窩數(shù)據(jù)）的地方就可以使用本平臺(tái)，其響應(yīng)式界面使其沒(méi)有終端設(shè)備的限制，任何設(shè)備都可以瀏覽，并且支持大部分系統(tǒng)（包括Windows、MacOS）。利用平臺(tái)，用戶可以無(wú)限地拓展自己的交友圈，而平臺(tái)可以從用戶的拓展行為中獲取巨大的流量，以“流量變現(xiàn)”的概念來(lái)看，網(wǎng)站具有比較高的商業(yè)價(jià)值，經(jīng)濟(jì)效益與社會(huì)效益比較可觀。技術(shù)可行性分析本社交平臺(tái)的系統(tǒng)架構(gòu)采用主流的HTML5技術(shù)以及PHP語(yǔ)言，按照BS架構(gòu)進(jìn)行用戶界面的設(shè)計(jì)與開(kāi)發(fā)。充分利用這種模式的優(yōu)勢(shì)，在服務(wù)器上實(shí)現(xiàn)網(wǎng)站的各種核心功能，這樣既簡(jiǎn)化了開(kāi)發(fā)流程，也能夠?yàn)橛脩舻氖褂脦?lái)便利。在實(shí)現(xiàn)動(dòng)態(tài)需求的時(shí)候，還使用了開(kāi)源且熱門(mén)的JavaScript框架——jQuery，配合Bootstrap框架能夠讓網(wǎng)站完美地實(shí)現(xiàn)跨平臺(tái)，這種響應(yīng)式框架為網(wǎng)站提供了多終端建設(shè)的有效

方法。本次開(kāi)發(fā)所用的技術(shù)都是具有多年發(fā)展歷史的優(yōu)秀語(yǔ)言，在發(fā)展的過(guò)程中不斷改進(jìn)，能夠適應(yīng)現(xiàn)代的開(kāi)發(fā)需求和環(huán)境，長(zhǎng)期占據(jù)開(kāi)發(fā)領(lǐng)域的領(lǐng)先地位，多家知名企業(yè)的長(zhǎng)期選擇，PHP語(yǔ)言能夠完美地支持Facebook（臉書(shū)）運(yùn)行，Bootstrap框架被運(yùn)用在美國(guó)有線電視新聞網(wǎng)旗下的BreakingNews網(wǎng)站開(kāi)發(fā)中，這些例子足以證明，本次開(kāi)發(fā)所采用的技術(shù)均是成熟可靠的。操作可行性分析網(wǎng)站采用的是B/S架構(gòu)，增強(qiáng)了平臺(tái)的擴(kuò)展性，而且數(shù)據(jù)傳輸速率快。在對(duì)網(wǎng)站進(jìn)行功能分析時(shí)充分研究了用戶的操作習(xí)慣以及需求，并設(shè)計(jì)了對(duì)應(yīng)的UI（用戶界面），在Web客戶端可以直觀地看到功能的展示，并且有對(duì)應(yīng)的指示性標(biāo)語(yǔ)，引導(dǎo)用戶進(jìn)行操作，用戶能夠獲得良好的體驗(yàn)性，交互感強(qiáng)?？傮w上而言，本社交網(wǎng)站的核心操作是可行的。功能需求分析社交平臺(tái)既要滿足用戶維護(hù)社交圈子的需求，還要滿足獲取信息、發(fā)布信息等一系列需求。在為用戶提供以個(gè)人為中心的社交服務(wù)的同時(shí)，向用戶展示公共信息，分別有其他用戶發(fā)布的公開(kāi)內(nèi)容、官方運(yùn)營(yíng)的話題內(nèi)容等，為用戶的多向信息交互創(chuàng)造條件。社交平臺(tái)的開(kāi)發(fā)不僅需要考慮客戶端的功能需求，也要保證后臺(tái)管理系統(tǒng)的完善?？梢浦残院蛿U(kuò)展性應(yīng)在系統(tǒng)的前期設(shè)計(jì)時(shí)便得到充分考慮，避免因軟件或硬件的更替造成數(shù)據(jù)丟失或其他難以修復(fù)的問(wèn)題。管理界面需要盡可能地可視化，幫助管理員便捷高效地處理問(wèn)題，在滿足需求的同時(shí)積極尋求高效的“平滑升級(jí)”方式，使管理系統(tǒng)能夠更好地承載不斷增加的用戶流量以及數(shù)據(jù)信息。

功能設(shè)計(jì)的核心主要是考慮用戶群體的關(guān)系互動(dòng)，基于此，為本平臺(tái)設(shè)計(jì)了以下功能：（1）具備完善的個(gè)人賬戶資料及關(guān)聯(lián)要素，便于用戶樹(shù)立在網(wǎng)絡(luò)中的特色個(gè)人標(biāo)簽；（2）具備高效溝通的通訊工具，將其打造成一種強(qiáng)有力的活躍方式，維護(hù)社交關(guān)系；（3）隨時(shí)隨地可進(jìn)行內(nèi)容的分享，激發(fā)用戶的表達(dá)欲，以此維護(hù)用戶的活躍度；（4）通過(guò)好友列表賦予用戶管理關(guān)系的權(quán)力，對(duì)話、添加、刪除的行為都由用戶把握；（5）用戶對(duì)個(gè)人動(dòng)態(tài)（空間）的進(jìn)行自定義管理，增強(qiáng)用戶的投入感與歸屬感，為用戶提供私人發(fā)布空間，保護(hù)隱私；（6）用戶首頁(yè)展示大量可供閱覽的即時(shí)信息、新聞、個(gè)人動(dòng)態(tài)等，滿足用戶的群體歸屬需求以及求知欲。本次基于HTML5的社交平臺(tái)的功能設(shè)計(jì)分析如下圖3-1。圖3-1平臺(tái)功能設(shè)計(jì)分析

網(wǎng)站詳細(xì)設(shè)計(jì)網(wǎng)站設(shè)計(jì)原則網(wǎng)站的一切功能的實(shí)現(xiàn)和內(nèi)容的傳播應(yīng)在滿足我國(guó)法律條規(guī)的情況下進(jìn)行。設(shè)置安全有效的身份驗(yàn)證機(jī)制，通過(guò)授予權(quán)限等方法加強(qiáng)平臺(tái)數(shù)據(jù)管理的可靠性，保障用戶在平臺(tái)中存儲(chǔ)的信息不被泄露。界面設(shè)計(jì)應(yīng)該遵循“指示明確”的原則，避免用戶產(chǎn)生解讀歧義。需要充分考慮網(wǎng)站長(zhǎng)期的業(yè)務(wù)發(fā)展，開(kāi)發(fā)過(guò)程中盡可能降低各功能間的耦合度，利于后期對(duì)整體進(jìn)行擴(kuò)展。網(wǎng)站架構(gòu)設(shè)計(jì)網(wǎng)站程序框架本社交平臺(tái)是一個(gè)基于BS架構(gòu)的Web端應(yīng)用程序。BS架構(gòu)的應(yīng)用程序的特點(diǎn)是將平臺(tái)整體的劃分為三層，分別是：展示層、業(yè)務(wù)層和持久層（又稱為數(shù)據(jù)層）。通過(guò)分層，可以直觀地理解項(xiàng)目的開(kāi)發(fā)需要和目標(biāo)，幫助開(kāi)發(fā)者梳理流程，降低代碼編寫(xiě)的難度，避免出現(xiàn)代碼混亂的情況，有利于前后端的分離開(kāi)發(fā)。更好地延續(xù)了網(wǎng)站的擴(kuò)展性。基于BS架構(gòu)的前后端傳輸模式如下圖4-1所示。圖4-1基于BS架構(gòu)的前后端傳輸模式

展示層也就是前端，它的目標(biāo)很直接、簡(jiǎn)單，就是響應(yīng)用戶的輸入，向業(yè)務(wù)層（后端）發(fā)送請(qǐng)求，獲取數(shù)據(jù)并解析，并將結(jié)果輸出，反饋給用戶。輸入是指用戶通過(guò)外接設(shè)備（鼠標(biāo)、鍵盤(pán)等）在平臺(tái)中進(jìn)行的操作，輸出就是應(yīng)用展示用戶操作的結(jié)果。概括地說(shuō)，這一層就是為用戶提供和網(wǎng)站進(jìn)行交互的界面。業(yè)務(wù)層即后端，它的工作內(nèi)容是接收前端的請(qǐng)求后，負(fù)責(zé)校驗(yàn)，再取得數(shù)據(jù)，最后對(duì)數(shù)據(jù)做業(yè)務(wù)的邏輯處理，返回給前端。這個(gè)過(guò)程需要調(diào)用持久層的數(shù)據(jù)，進(jìn)行兩端的數(shù)據(jù)交換，起到了承上啟下的作用。相對(duì)于數(shù)據(jù)訪問(wèn)層（持久層），業(yè)務(wù)邏輯層是調(diào)用者；而對(duì)于表示層（展示層），它是被調(diào)用者[[]季淑微.基于HTML5[]季淑微.基于HTML5的檔案管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].2017.韓安.HTML5WebSocket技術(shù)研究[J].電子世界,2013(20):7-8.季嘉明.基于Bootstrap+SSI的跨平臺(tái)企業(yè)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].季聿階.基于HTML5的多媒體自動(dòng)播放系統(tǒng)的研究與設(shè)計(jì)[D].上海交通大學(xué).林民山.基于HTML5的高職院校互聯(lián)網(wǎng)+課堂教學(xué)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[D].[10]黃悅深.基于HTML5的移動(dòng)WebApp開(kāi)發(fā)[J].圖書(shū)館雜志,2014,33(7).[11]閆曉亮.基于MVC設(shè)計(jì)模式的輕量級(jí)PHP開(kāi)發(fā)框架的研究與實(shí)現(xiàn)[D].[12]李霞.微博儀式互動(dòng)的社會(huì)心理學(xué)研究[D].南開(kāi)大學(xué),2013.[13]吳信東,李毅,李磊.在線社交網(wǎng)絡(luò)影響力分析[J].計(jì)算機(jī)學(xué)報(bào),2014(4):735-752.[14]黃偉.基于PHP技術(shù)的WEB數(shù)據(jù)庫(kù)開(kāi)發(fā)[J].電腦知識(shí)與技術(shù),000(003):8-10.[15]王浩百.基于PHP和MySQL的辦公室網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)[D].吉林大學(xué).致謝始于2016年初秋，終于2020年盛夏，轉(zhuǎn)瞬之間，南海求學(xué)，四載生涯，將告結(jié)束?；仡櫷簦心钣朴七^(guò)往，盡塵埃落定，收筆作終章。在此論文結(jié)束之際，我要向所有期間給予我支持、幫助和鼓勵(lì)的人表達(dá)我最誠(chéng)摯的感謝。在此特別感謝我的指導(dǎo)老師吳志達(dá)老師，論文從選題到完成的整個(gè)過(guò)程中，每一步我都得到了吳老師的熱情幫助和精心指導(dǎo)、糾正。在我的論文經(jīng)過(guò)多次修改后，老師都不厭其煩的給我指正問(wèn)題，吳老師嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度、淵博的專業(yè)知識(shí)、敏銳的學(xué)術(shù)眼光、精益求精的精神給我留下了深刻印象，并對(duì)我的學(xué)習(xí)及未來(lái)工作產(chǎn)生很大的促進(jìn)作用，在此特向吳老師致以崇高的敬意及真摯的感謝！感謝在校四年的傳授給我知識(shí)的每一位老師，是老師們?cè)谡n堂上的循循善誘和詳細(xì)指點(diǎn)，為我的專業(yè)知識(shí)打下了良好的基礎(chǔ)，這能夠讓我在深入學(xué)習(xí)時(shí)，更好地理解與掌握新內(nèi)容。還需要感謝各位進(jìn)行答辯工作的老師，即使在今年無(wú)法返校答辯的情況下，依舊保持高度的學(xué)術(shù)鉆研精神，組織線上進(jìn)行有序的答辯工作，為每位畢業(yè)學(xué)子進(jìn)行學(xué)習(xí)成果的檢閱，在此向各位老師在此表達(dá)感謝，老師，您辛苦了！其次我要感謝我的父母親人。感謝他們的養(yǎng)育及辛苦付出為我營(yíng)造的優(yōu)厚的生活環(huán)境，讓我衣食無(wú)憂的沉浸象牙塔中安心完成學(xué)業(yè)。求學(xué)四載，他們始終操心掛念、默默支持，他們的無(wú)私奉獻(xiàn)是我不斷前進(jìn)的動(dòng)力。祝愿我的家人身體安康、和睦美滿！感謝我們510宿舍的室友，及我所有的朋友們。大學(xué)四年生活是他們給予我溫暖與歡樂(lè)，幫助與支持，人生最青春的時(shí)光，感謝你們都在場(chǎng)。我堅(jiān)信我們每個(gè)人都會(huì)有大好前程，擁有美好未來(lái)。燕過(guò)不先遞信，花飛肯候歸人，幾點(diǎn)余紅藏碧綠，對(duì)看還疑畫(huà)詎真。年年誤好春。半卷海棠艷影，一箋紅杏香魂，若有昆岡終可到，何妨青鳥(niǎo)寄春痕。天知路幾分？時(shí)光荏苒，白駒過(guò)隙，感謝大學(xué)這四年對(duì)我的栽培浸潤(rùn)，這段日子是我人生中最燦爛的時(shí)光，不論時(shí)光如何變幻，都將激勵(lì)我堅(jiān)毅前行。持久層所包含了開(kāi)發(fā)項(xiàng)目數(shù)據(jù)庫(kù)的所有數(shù)據(jù)信息，保證數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行正常的存儲(chǔ)和讀取是它的主要工作內(nèi)容，最常見(jiàn)的為關(guān)系型數(shù)據(jù)庫(kù)，如本次開(kāi)發(fā)使用的MySQL。MySQL需要靠SQL語(yǔ)句與業(yè)務(wù)層進(jìn)行交互，傳遞指令。SQL語(yǔ)句定義了具有特色的一套語(yǔ)法規(guī)則，易于解讀和使用。網(wǎng)站的使用者分為功能用戶和后臺(tái)管理人員，都是通過(guò)展示層參與網(wǎng)站的信息交換，平臺(tái)的體系架構(gòu)如圖4-2所示。圖4-2平臺(tái)的體系架構(gòu)

網(wǎng)站頁(yè)面設(shè)計(jì)ON社交平臺(tái)的開(kāi)發(fā)主要是為了滿足用戶的社交需求，為廣大用戶提供一個(gè)能夠自由交流的空間，前端界面設(shè)計(jì)的核心理念是“簡(jiǎn)潔直觀”，一般的用戶能夠無(wú)障礙使用。用戶進(jìn)行簡(jiǎn)單的操作，比如點(diǎn)擊按鈕和填寫(xiě)文本等，就可以傳送簡(jiǎn)單的交互命令，服務(wù)器可以通過(guò)這些命令進(jìn)行數(shù)據(jù)分析，再將用戶需要的數(shù)據(jù)分離出來(lái)在前端清晰地向用戶展示。頁(yè)面均為兼容多終端的響應(yīng)式設(shè)計(jì)，頁(yè)面會(huì)根據(jù)不同的終端自動(dòng)進(jìn)行分辨率的調(diào)整，使用不同終端的用戶都可以得到良好的使用體驗(yàn)。網(wǎng)站中的每個(gè)頁(yè)面都具備了導(dǎo)航欄，用戶想要切換不同的功能界面只需要使用導(dǎo)航欄便可以方便快捷地轉(zhuǎn)跳。主頁(yè)導(dǎo)航欄具有4個(gè)不同的導(dǎo)航頁(yè)簽，分別是廣場(chǎng)、好友、動(dòng)態(tài)以及個(gè)人，用戶在登陸后首先進(jìn)入的是廣場(chǎng)，廣場(chǎng)中展示的是用戶好友發(fā)布的動(dòng)態(tài)以及官方發(fā)布的話題內(nèi)容或新聞等，在這個(gè)頁(yè)面，用戶可以自由瀏覽各種內(nèi)容，直接點(diǎn)擊頁(yè)面上方的導(dǎo)航欄頁(yè)簽可以直接轉(zhuǎn)跳到其他頁(yè)面，在好友欄頁(yè)面可以查看好友列表，選擇好友進(jìn)行對(duì)話。在個(gè)人頁(yè)面，可以發(fā)布不對(duì)外公開(kāi)的私人動(dòng)態(tài)，并且可以對(duì)已經(jīng)公開(kāi)的動(dòng)態(tài)或者私人動(dòng)態(tài)進(jìn)行刪除，操作簡(jiǎn)單且方便。網(wǎng)站導(dǎo)航結(jié)構(gòu)如圖4-3所示。圖4-3導(dǎo)航結(jié)構(gòu)圖

根據(jù)以上各項(xiàng)功能分析和需求分析，在明確開(kāi)發(fā)目標(biāo)和網(wǎng)站系統(tǒng)結(jié)構(gòu)以后，對(duì)網(wǎng)站原型進(jìn)行設(shè)計(jì)，設(shè)計(jì)需要充分考慮開(kāi)發(fā)原則以及用戶需求，致力打造美觀與實(shí)用并存的平臺(tái)界面。首先對(duì)廣場(chǎng)首頁(yè)進(jìn)行設(shè)計(jì)，需要從多個(gè)角度考慮設(shè)計(jì)的走向。首先要對(duì)信息量的承載程度進(jìn)行考慮，設(shè)計(jì)大小合理的容器盒子，用于容納流動(dòng)的大量信息；其次，需要突出網(wǎng)站的核心功能——?jiǎng)討B(tài)分享，優(yōu)先確定其位置；最后，在突出功能的同時(shí)，要保證網(wǎng)站整體風(fēng)格的協(xié)調(diào)，信息展示的完整性。通過(guò)上述簡(jiǎn)要的分析概括，設(shè)計(jì)出廣場(chǎng)首頁(yè)的原型如下圖4-4.圖4-4首頁(yè)原型圖在好友頁(yè)面需要展示清晰的好友列表，通訊窗口居中，列表可容納一定量的好友數(shù)，并且可以滾動(dòng)列表進(jìn)行查詢。列表與聊天窗口并列展示，便于切換通訊的對(duì)象，方便日常使用，設(shè)計(jì)出的好友頁(yè)原型圖如下圖4-5。

圖4-5好友頁(yè)原型圖收藏頁(yè)主要是對(duì)用戶在網(wǎng)站中的收藏進(jìn)行展示與管理，每項(xiàng)收藏內(nèi)容都采用相同的展示方式，橫向?qū)R排列，使布局整齊，內(nèi)容一目了然。收藏頁(yè)面原型如下圖4-6。圖4-6收藏頁(yè)原型

個(gè)人頁(yè)面向用戶陳列了已發(fā)布的公開(kāi)動(dòng)態(tài)和隱私動(dòng)態(tài)，隱私動(dòng)態(tài)在頁(yè)面中呈折疊狀態(tài)，點(diǎn)擊可展開(kāi)，具友好的隱私承載性質(zhì)。用戶可以在當(dāng)前頁(yè)面編輯發(fā)表隱私信息，也可以對(duì)已發(fā)送的公開(kāi)動(dòng)態(tài)及私人信息進(jìn)行刪除管理。個(gè)人頁(yè)面原型如下圖4-7。圖4-7個(gè)人頁(yè)原型網(wǎng)站功能模塊設(shè)計(jì)網(wǎng)站整體開(kāi)發(fā)流程本社交網(wǎng)站的整體開(kāi)發(fā)流程分為前期、中期、后期三個(gè)流程，每個(gè)流程之間的聯(lián)系緊密，迭代進(jìn)行。前期流程包括：通過(guò)調(diào)研確定需求、網(wǎng)站框架構(gòu)想、頁(yè)面原型設(shè)計(jì)；中期流程包括：頁(yè)面風(fēng)格設(shè)計(jì)、前端技術(shù)開(kāi)發(fā)、后端部署開(kāi)發(fā)；后期流程包括：前后端對(duì)接、內(nèi)容錄入、測(cè)試調(diào)整、發(fā)布驗(yàn)收。開(kāi)發(fā)流程聯(lián)系說(shuō)明如下圖4-8。

圖4-8開(kāi)發(fā)流程聯(lián)系網(wǎng)站注冊(cè)登錄在注冊(cè)與登錄的模塊中，可以新增用戶信息并配置對(duì)應(yīng)的權(quán)限，在登陸時(shí)直接通過(guò)身份驗(yàn)證進(jìn)入網(wǎng)站。賬號(hào)注冊(cè)需要遵守一定的命名規(guī)則，比如：不允許出現(xiàn)空格和符號(hào)等，避免用戶數(shù)據(jù)出現(xiàn)混亂，便于管理。注冊(cè)賬號(hào)名時(shí)使用了錯(cuò)誤字符，平臺(tái)會(huì)向用戶進(jìn)行詳細(xì)的錯(cuò)誤提示，指引完成注冊(cè)。注冊(cè)完成后，系統(tǒng)將會(huì)自動(dòng)轉(zhuǎn)跳至登陸界面，輸入準(zhǔn)確的賬戶密碼，便可以鏈接數(shù)據(jù)庫(kù)，進(jìn)入個(gè)人的網(wǎng)頁(yè)。用戶進(jìn)行注冊(cè)和登陸的流程如下圖4-9。圖4-9注冊(cè)登錄流程

動(dòng)態(tài)發(fā)布個(gè)人在本網(wǎng)站可發(fā)布的信息分為公共動(dòng)態(tài)及私人動(dòng)態(tài)，公共動(dòng)態(tài)直接在首頁(yè)進(jìn)行編輯發(fā)布，私人動(dòng)態(tài)可以在個(gè)人中心進(jìn)行編輯發(fā)布，兩種動(dòng)態(tài)面向的群體不同，前者可供所有好友及使用網(wǎng)站的用戶瀏覽，后者只能由自己查看。動(dòng)態(tài)編輯完畢發(fā)布后，無(wú)需重新刷新整個(gè)頁(yè)面，平臺(tái)可以使用Ajax回調(diào)指令在頁(yè)面中局部刷新，顯示新發(fā)布的信息。動(dòng)態(tài)發(fā)布的流程如圖4-10所示。圖4-10動(dòng)態(tài)發(fā)布流程動(dòng)態(tài)刪除使用JQuery中的刪除函數(shù)，用戶可以即時(shí)對(duì)已發(fā)送的動(dòng)態(tài)的進(jìn)行刪除，刪除后無(wú)需整體刷新頁(yè)面，Ajax能夠與服務(wù)器進(jìn)行部分?jǐn)?shù)據(jù)交換，刪除動(dòng)態(tài)后用戶可以正常進(jìn)行其他操作。使用JQuery.js來(lái)實(shí)現(xiàn)Ajax和dom刪除為平臺(tái)整體的開(kāi)發(fā)帶來(lái)了便捷，后端管理系統(tǒng)中亦運(yùn)用了這種方法進(jìn)行網(wǎng)站內(nèi)容的管理。動(dòng)態(tài)（或信息）刪除的流程如圖4-11所示。圖4-11動(dòng)態(tài)（或信息）刪除流程

動(dòng)態(tài)評(píng)論在評(píng)論頁(yè)面的前端為評(píng)論按鈕添加點(diǎn)擊事件，與Bootstrap的輸入彈窗modalform關(guān)聯(lián)，實(shí)現(xiàn)評(píng)論的PHP方法是，當(dāng)用戶發(fā)表評(píng)論時(shí)，評(píng)論的內(nèi)容將被寫(xiě)進(jìn)數(shù)據(jù)庫(kù)中，并進(jìn)行頁(yè)面的刷新，這時(shí)將用Ajax方法完成對(duì)評(píng)論的讀取，在刷新頁(yè)面時(shí)，將評(píng)論的內(nèi)容讀取出來(lái)，并按時(shí)間在評(píng)論面板依次讀出。后端將會(huì)進(jìn)行評(píng)論數(shù)量的循環(huán)，每寫(xiě)入一條新評(píng)論，數(shù)量顯示加一，評(píng)論的回復(fù)將在最后放進(jìn)新的數(shù)組中。動(dòng)態(tài)評(píng)論的流程如下圖4-12所示。圖4-12評(píng)論動(dòng)態(tài)流程數(shù)據(jù)庫(kù)設(shè)計(jì)概念結(jié)構(gòu)設(shè)計(jì)通過(guò)E-R模型圖對(duì)網(wǎng)站的數(shù)據(jù)庫(kù)結(jié)構(gòu)進(jìn)行描述，一般使用實(shí)體、關(guān)系以及屬性這三個(gè)E-R模型的基本概念進(jìn)行說(shuō)明。在本平臺(tái)的數(shù)據(jù)庫(kù)設(shè)計(jì)中，實(shí)體與聯(lián)系兩者之間的屬性繁多，在本段不逐一描述。平臺(tái)系統(tǒng)的E-R圖如圖4-13所示。圖4-13平臺(tái)系統(tǒng)E-R圖

在平臺(tái)系統(tǒng)的E-R模型中，每個(gè)實(shí)體都具有不一樣的屬性。（1）功能用戶的屬性如圖4-14所示。圖4-14功能用戶實(shí)體屬性圖（2）功能菜單的實(shí)體屬性圖如圖4-15所示。圖4-15功能菜單實(shí)體屬性圖（3）用戶角色的實(shí)體屬性圖如圖4-16所示。圖4-16用戶角色實(shí)體屬性圖

（4）網(wǎng)站管理的實(shí)體屬性圖如圖4-17所示。圖4-17網(wǎng)站管理實(shí)體屬性圖數(shù)據(jù)庫(kù)設(shè)計(jì)思路本平臺(tái)在設(shè)計(jì)數(shù)據(jù)庫(kù)時(shí)主要考慮個(gè)人賬號(hào)信息以及動(dòng)態(tài)信息的存儲(chǔ)，并且需要保證兩者之間的聯(lián)系。信息包括文字、圖片以及視頻，可以將信息與用戶看作兩類實(shí)體。因此，平臺(tái)數(shù)據(jù)庫(kù)分別設(shè)置了news和users兩類實(shí)體集作為信息和用戶信息的存儲(chǔ)容器。其中users用于存放功能用戶的信息，news用于存放用戶發(fā)布的內(nèi)容，news_comment為用戶評(píng)論內(nèi)容的存儲(chǔ)器。本平臺(tái)的數(shù)據(jù)庫(kù)還設(shè)置了存儲(chǔ)管理員信息的admin表，系統(tǒng)可以通過(guò)已經(jīng)存儲(chǔ)的管理員登錄信息，在有人登陸管理后臺(tái)時(shí)，對(duì)登陸者的身份進(jìn)行校驗(yàn)。前后臺(tái)發(fā)布的信息內(nèi)容都有其對(duì)應(yīng)的不同分類屬性，便于管理員分類以及管理信息。后臺(tái)管理員所發(fā)布的公告內(nèi)容使用名為posts的實(shí)體集存儲(chǔ)。本平臺(tái)的數(shù)據(jù)庫(kù)匯總?cè)绫?-1所示。

表4-1數(shù)據(jù)庫(kù)表匯總表名中文名稱描述admin_users管理員存儲(chǔ)系統(tǒng)后臺(tái)管理員的編號(hào)、密碼等信息users用戶存儲(chǔ)用戶的詳細(xì)資料news公開(kāi)動(dòng)態(tài)存儲(chǔ)用戶發(fā)布的公共動(dòng)態(tài)posts公告存儲(chǔ)后臺(tái)公告內(nèi)容news_comment動(dòng)態(tài)評(píng)論存儲(chǔ)用戶的評(píng)論本平臺(tái)中每個(gè)數(shù)據(jù)庫(kù)表的詳細(xì)信息均以表格的方式說(shuō)明。表4-2admin_users管理員信息表列名數(shù)據(jù)類型長(zhǎng)度主鍵允許空說(shuō)明idint11是否編號(hào)usernamevarchar255否否管理員名稱passwordvarchar255否否管理密碼表4-3users用戶信息表列名數(shù)據(jù)類型長(zhǎng)度主鍵允許空說(shuō)明idint11是否編號(hào)usernamevarchar255否否用戶名稱passwordvarchar255否否用戶密碼

表4-4news動(dòng)態(tài)內(nèi)容信息表列名數(shù)據(jù)類型長(zhǎng)度主鍵允許空說(shuō)明idint11是否編號(hào)user_idint11否否用戶名稱contentvarchar200否否動(dòng)態(tài)內(nèi)容create_timetimestamp否是發(fā)布時(shí)間表4-5posts公告內(nèi)容信息表列名數(shù)據(jù)類型長(zhǎng)度主鍵允許空說(shuō)明idint11是否編號(hào)user_idint11否否用戶名稱contentvarchar200否否公告內(nèi)容create_timetimestamp否是發(fā)布時(shí)間表4-6new_comment動(dòng)態(tài)評(píng)論信息表列名數(shù)據(jù)類型長(zhǎng)度主鍵允許空說(shuō)明idint11是否編號(hào)news_idint11否否動(dòng)態(tài)編號(hào)comment_idint11否否評(píng)論編號(hào)user_idint11否否用戶名稱contentvarchar200否否評(píng)論內(nèi)容create_timetimestamp否是評(píng)論時(shí)間

網(wǎng)站主要功能的實(shí)現(xiàn)注冊(cè)登錄實(shí)現(xiàn)方法為前端注冊(cè)頁(yè)面中的信息輸入表單分別命名為“username”和“password”，使用Ajax中的post函數(shù)向后端提交數(shù)據(jù)，當(dāng)后端接收數(shù)據(jù)并進(jìn)行了正確的反饋后，回調(diào)函數(shù)執(zhí)行，跳轉(zhuǎn)至登錄頁(yè)面，即可輸入注冊(cè)的賬號(hào)與密碼登陸。核心代碼如下：function

checkForm(form)

{

var

add_name

=

checkName();

var

add_password

=

checkPassword();

var

upassword

=

checkUpassword();

if

(add_name

&&

add_password

&&

upassword)

{

$.post(location.href,

$(form).serialize(),

function

(data)

{

if

(data.code)

{

Swal.fire({

icon:

'success',

title:

'登陸成功，正在進(jìn)入主頁(yè)',

timer:

5000,

showConfirmButton:

false

});

location.href

=

'../PHP/login.php';

}

else

{

Swal.fire({

icon:

'error',

title:

'無(wú)法注冊(cè)',

text:

'用戶已存在',

footer:

'<a

href>看看昵稱推薦？</a>'

});

}

},

'json');

return

false;

}

else

{

return

false;

}

}

本網(wǎng)站均使用美觀的、響應(yīng)式的JavaScript動(dòng)態(tài)彈窗代替原生的alert彈窗，增強(qiáng)了網(wǎng)站整體的交互體驗(yàn)。為了防止用戶在取賬戶名時(shí)出現(xiàn)大量不規(guī)則、不合法的字符，需要在前端加入對(duì)賬號(hào)名進(jìn)行檢查的函數(shù)方法，用來(lái)限制用戶的取字范疇，規(guī)定合法字符，以便于網(wǎng)站的后期管理。核心代碼如下：function

checkName()

{

var

inputNode

=

document.getElementById("add_name");

var

spanNode

=

document.getElementById("user_name");

var

nameLength

=

document.getElementById("add_name").value.length;

var

content

=

inputNode.value;

var

reg

=

/^[a-zA-Z

]*$/;

if

(content

==

"")

{

spanNode.innerHTML

=

"不能為空".fontcolor("red");

return

false;

}

if

(nameLength

>

15)

{

spanNode.innerHTML

=

"姓名長(zhǎng)度過(guò)長(zhǎng)".fontcolor("red");

return

false;

}

if

(reg.test(content))

{

spanNode.innerHTML

=

"正確".fontcolor("green");

return

true;

}

else

{

spanNode.innerHTML

=

"只允許字母跟空格".fontcolor("red");

return

false;

}

}

后端進(jìn)行數(shù)據(jù)交互的步驟主要是：首先通過(guò)isset函數(shù)判斷是否獲取了表單信息，再通過(guò)mysqli_real_escape_string轉(zhuǎn)義字符函數(shù)向數(shù)據(jù)庫(kù)發(fā)送插入信息的請(qǐng)求命令,連接數(shù)據(jù)的動(dòng)態(tài)文件名為model.php。當(dāng)函數(shù)能夠返回結(jié)果時(shí)，說(shuō)明數(shù)據(jù)庫(kù)中已有相同的賬號(hào)和密碼，此時(shí)，后端將會(huì)向前端返回一段Json字符串，前端通過(guò)解析這段字符串輸出“用戶已存在”的文本提示內(nèi)容，不執(zhí)行注冊(cè)行為。當(dāng)mysqli_num_rows函數(shù)不能返回某個(gè)結(jié)果時(shí)，說(shuō)明數(shù)據(jù)庫(kù)里沒(méi)有相同的賬號(hào)信息，這就意味著這條新的賬號(hào)信息可以被插入數(shù)據(jù)庫(kù)，注冊(cè)新賬號(hào)的前提成立。這時(shí)，前端由Ajax更新注冊(cè)信息后頁(yè)面將自動(dòng)轉(zhuǎn)跳至登錄頁(yè)面。

<?php

header('charset:

utf-8');

require

'model.php';

if

(isset($_POST['add_name'],

$_POST['add_password'],

$_POST['upassword']))

{

$username

=

mysqli_real_escape_string($conn,

$_POST['add_name']);

$password

=

mysqli_real_escape_string($conn,

$_POST['add_password']);

$result

=

mysqli_query($conn,

"SELECT

*

FROM

`users`

WHERE

`username`

=

'$username'

LIMIT

1");

if

(mysqli_num_rows($result))

{

exit(json_encode(array('code'

=>

0,

'msg'

=>

'用戶已存在')));

}

else

{

mysqli_query($conn,

"INSERT

INTO

`users`(`username`,

`password`)

VALUES

('$username','$password')");

exit(json_encode(array('code'

=>

1,

'msg'

=>

'注冊(cè)成功')));

}

}

else

{

require

'../html/register.html';

}

?>

功能演示如下圖5-1、圖5-2、圖5-3所示。圖5-1賬號(hào)密碼字符不合法

圖5-2用戶已存在圖5-3注冊(cè)成功

進(jìn)入注冊(cè)頁(yè)面后，根據(jù)用戶名和密碼查找用戶，找到對(duì)應(yīng)用戶，登錄成功，并設(shè)置登錄標(biāo)識(shí)（cookie），輸出登陸成功的彈窗信息，并轉(zhuǎn)跳至賬號(hào)首頁(yè)。未找到對(duì)應(yīng)用戶時(shí)，將根據(jù)輸入的內(nèi)容判斷錯(cuò)誤的原因，并彈出警示框向用戶進(jìn)行提示。功能演示如下圖5-4、圖5-5所示。圖5-4登錄界面圖5-5賬號(hào)密碼錯(cuò)誤提示

首頁(yè)前端顯示網(wǎng)站整體使用Bootstrap框架搭建，利用了它款式眾多的組件，為前端網(wǎng)頁(yè)開(kāi)發(fā)的工作節(jié)省了大量的時(shí)間及人力。首先在首頁(yè)頂部放置其自帶的默認(rèn)導(dǎo)航欄navbar-default，需要在navbar導(dǎo)航欄下創(chuàng)建一個(gè)裝載導(dǎo)航內(nèi)容的<ul>列表，再將導(dǎo)航內(nèi)容逐一放進(jìn)其下的<li>標(biāo)簽中；其次在導(dǎo)航欄內(nèi)放置默認(rèn)搜索框按鈕btn-default；可以通過(guò)dropdown屬性設(shè)置列表，點(diǎn)擊后可以下拉；在導(dǎo)航欄內(nèi)放置navbar-header容器，并設(shè)置屬性為navbar-brand，可以在其中放置網(wǎng)站的LOGO。網(wǎng)站首頁(yè)所用的HTML結(jié)構(gòu)設(shè)計(jì)的如下圖5-6所示。圖5-6網(wǎng)頁(yè)HTML結(jié)構(gòu)圖網(wǎng)站使用的panel是一種信息面板，可以用來(lái)容納多種形式的內(nèi)容，網(wǎng)站整體采用的是panel-info屬性的面板，維持頁(yè)面的顏色協(xié)調(diào)。網(wǎng)頁(yè)的核心內(nèi)容，如文本編輯框、信息框等，均采用panel-info進(jìn)行容納。Panel的結(jié)構(gòu)如下圖5-7所示：圖5-7Panel結(jié)構(gòu)圖網(wǎng)站主頁(yè)使用了配套的Bootstrap組件，以藍(lán)色和灰色為主題色調(diào)，整體風(fēng)格一致?？蔀g覽圖文信息，以及播放視頻，成品如下圖5-8、圖5-9、圖5-10所示。圖5-8主頁(yè)展示圖

圖5-9瀏覽圖片圖5-10播放視頻

分享功能實(shí)現(xiàn)方法當(dāng)用戶處于首頁(yè)時(shí)，如需發(fā)布動(dòng)態(tài)，可以直接在首頁(yè)的編輯欄里輸入內(nèi)容，用戶在點(diǎn)擊發(fā)送按鈕時(shí)，后端數(shù)據(jù)交互如下：先由isset函數(shù)判斷是否有已登錄的用戶信息被存儲(chǔ)在COOKIE中，然后查找數(shù)據(jù)庫(kù)中的用戶登錄信息，若能夠找到，則登陸有效，如果未找到，則說(shuō)明登陸無(wú)效，系統(tǒng)將會(huì)自動(dòng)返回登錄界面。發(fā)布內(nèi)容時(shí)，首先需要判斷輸入的內(nèi)容是否為空，使用的判斷函數(shù)為isset函數(shù)。其次判斷輸入的內(nèi)容是否合法，若確定合法，mysqli_real_escape_string函數(shù)將對(duì)數(shù)據(jù)庫(kù)發(fā)送的SQL語(yǔ)句中的特殊字符進(jìn)行轉(zhuǎn)義，也就是將用戶需要發(fā)布的內(nèi)容發(fā)送至數(shù)據(jù)庫(kù)對(duì)應(yīng)的表中進(jìn)行存儲(chǔ)。發(fā)送成功后，則向前端輸出Json編碼的新動(dòng)態(tài)，若失敗則返回false，無(wú)法顯示。核心代碼如下所示：<?php

require

'model.php';

if

(isset($_COOKIE['username'],

$_COOKIE['password']))

{

$username

=

mysqli_real_escape_string($conn,

$_COOKIE['username']);

$password

=

mysqli_real_escape_string($conn,

$_COOKIE['password']);

$result

=

mysqli_query($conn,

"SELECT

*

FROM

`users`

WHERE

`username`

=

'$username'

AND

`password`

=

'$password'

LIMIT

1");

if

(mysqli_num_rows($result))

{

$user

=

mysqli_fetch_assoc($result);

}

else

{

header('Location:

./login.php');

exit();

}

}

else

{

header('Location:

./login.php');

exit();

}

if

(!isset($_POST['content'])

||

$_POST['content']

==

'')

{

exit(json_encode(array('code'

=>

0,

'msg'

=>

'內(nèi)容不能為空')));

}

$content

=

mysqli_real_escape_string($conn,

$_POST['content']);

mysqli_query($conn,

"INSERT

INTO

`news`(`user_id`,

`content`)

VALUES

('{$user['id']}','$content')");

exit(json_encode(array('code'

=>

1,

'msg'

=>

'發(fā)布成功')));

?>

在前端獲取用戶的表單信息并向后端提交數(shù)據(jù)的是Ajax的Submit函數(shù)，此函數(shù)是JQuery中的一個(gè)事件觸發(fā)函數(shù)。對(duì)用戶發(fā)起的提交請(qǐng)求進(jìn)行保存后，后端返回的數(shù)據(jù)格式統(tǒng)一為Json，此操作的最后必須返回false，主要是為了阻止表單自動(dòng)提交事件，若沒(méi)有在最后返回false，表單將會(huì)在結(jié)束請(qǐng)求后再做一次提交操作。若判斷輸入的內(nèi)容是空值，將出現(xiàn)彈窗提醒。核心代碼如下：$('#send').submit(function

()

{

$.post(this.action,

$(this).serialize(),

function

(data)

{

if

(data.code)

{

Swal.fire({

icon:

'success',

title:

'發(fā)布成功'

});

location.reload();

}

else

{

Swal.fire({

icon:

'warning',

title:

'內(nèi)容不能為空'

});

}

},

'json');

return

false;

});

功能演示如下圖5-11、圖5-12、圖5-13，發(fā)布成功會(huì)有彈窗提示，點(diǎn)擊確定后，新動(dòng)態(tài)將直接在首頁(yè)動(dòng)態(tài)最前方出現(xiàn)。圖5-11空內(nèi)容輸入提醒

圖5-12發(fā)布成功提醒圖5-13動(dòng)態(tài)在首頁(yè)顯示

刪除動(dòng)態(tài)實(shí)現(xiàn)方法用戶可以在首頁(yè)對(duì)發(fā)送的動(dòng)態(tài)進(jìn)行刪除操作，也可以在個(gè)人中心刪除私人動(dòng)態(tài)。平臺(tái)系統(tǒng)同樣是在確定當(dāng)前登錄信息后，向數(shù)據(jù)庫(kù)發(fā)送刪除請(qǐng)求。以下為后端代碼：<?php

require

'model.php';

if

(isset($_COOKIE['username'],

$_COOKIE['password']))

{

$username

=

mysqli_real_escape_string($conn,

$_COOKIE['username']);

$password

=

mysqli_real_escape_string($conn,

$_COOKIE['password']);

$result

=

mysqli_query($conn,

"SELECT

*

FROM

`users`

WHERE

`username`

=

'$username'

AND

`password`

=

'$password'

LIMIT

1");

if

(mysqli_num_rows($result))

{

$user

=

mysqli_fetch_assoc($result);

}

else

{

header('Location:

./login.php');

exit();

}

}

else

{

header('Location:

./login.php');

exit();

}

if

(!isset($_POST['id'])

||

$_POST['id']

==

'')

{

exit(json_encode(array('code'

=>

0,

'msg'

=>

'請(qǐng)選擇要?jiǎng)h除的內(nèi)容')));

}

$id

=

mysqli_real_escape_string($conn,

$_POST['id']);

mysqli_query($conn,

"DELETE

FROM

`news`

WHERE

`id`

=

'{$id}'");

exit(json_encode(array('code'

=>

1,

'msg'

=>

'刪除成功')));

?>

前端使用Ajax進(jìn)行獲取用戶的刪除指令，并對(duì)后端進(jìn)行部分?jǐn)?shù)據(jù)的傳輸，在確定指令前，彈出詢問(wèn)操作的警示對(duì)話框。數(shù)據(jù)交互完成后，使用location.reload方法，重新載入文件，對(duì)頁(yè)面局部進(jìn)行刷新。前端請(qǐng)求操作的核心代碼如下：<script>

$(document).ready(function

()

{

$('.delete').click(function

()

{

swal({

title:

'確定刪除嗎？?',

type:

'warning',

showCancelButton:

true,

confirmButtonText:

'確定刪除',

cancelButtonText:

'Cancel',

}).then(function(isConfirm)

{

$.post('./admin-id-delete.php',

{id:

this.dataset.id},

function

(data)

{

if

(isConfirm

===

true)

{

swal(

'已刪除',

'success'

);

}

else

if

(isConfirm

===

false)

{

swal(

'已取消',

'error'

);

}

else

{

}

});

});

});

});

</script>

執(zhí)行刪除操作前，系統(tǒng)將會(huì)進(jìn)行彈窗詢問(wèn)，點(diǎn)擊確定刪除后，將會(huì)得到刪除成功的彈窗反饋。個(gè)人動(dòng)態(tài)頁(yè)面如下圖5-14，功能演示如下圖5-15、圖5-16。

圖5-14個(gè)人動(dòng)態(tài)頁(yè)面圖5-15刪除個(gè)人動(dòng)態(tài)

圖5-16刪除已完成評(píng)論動(dòng)態(tài)實(shí)現(xiàn)方法評(píng)論所用的輸入框采用的是Bootstrap模態(tài)框，為評(píng)論的按鈕添加點(diǎn)擊事件的函數(shù)（onclick）。首先需要確定點(diǎn)擊后獲取的組件元素，在函數(shù)中添加JQuery的parent方法，選中panel面板，并找到它的子元素，也就是放置評(píng)論相關(guān)信息的列表，在顯示評(píng)論列表的同時(shí)，彈出評(píng)論輸入框，并獲取此時(shí)數(shù)據(jù)庫(kù)中對(duì)應(yīng)容器表的動(dòng)態(tài)編號(hào)、評(píng)論編號(hào)以及評(píng)論內(nèi)容，再將以上信息顯示在列表中。在后端添加一個(gè)存儲(chǔ)評(píng)論數(shù)的數(shù)組，初始的值為0，當(dāng)在數(shù)據(jù)庫(kù)中取得值時(shí)，意味著有新的評(píng)論發(fā)布，這時(shí)將在數(shù)組中增加1，前端便可以顯示具體的評(píng)論數(shù)量。 以下為實(shí)現(xiàn)評(píng)論功能的核心前端代碼：$('.comment').click(function

()

{

$(this).parents('.panel').find('.comment-list').show(500);

$('[name="news_id"]').val($(this).data('newsid'));

$('[name="comment_id"]').val($(this).data('commentid'));

$('[name="content"]').val('');

$('#comment-modal').modal({show:

true});

});

以下為實(shí)現(xiàn)評(píng)論功能的核心后端代碼：while

($res

=

mysqli_fetch_assoc($result))

{

$res['comment_count']

=

0;

$comment_result

=

mysqli_query($conn,

"此處編寫(xiě)具體的sql語(yǔ)句");

$res['comment']

=

array();

while

($comment_res

=

mysqli_fetch_assoc($comment_result))

{

$sub_result

=

mysqli_query($conn,

"此處編寫(xiě)具體的sql語(yǔ)句");

$comment_res['comment']

=

array();

while

($sub_res

=

mysqli_fetch_assoc($sub_result))

{

$res['comment_count']++;

$comment_res['comment'][]

=

$sub_res;

}

$res['comment_count']++;

$res['comment'][]

=

$comment_res;

}

$news[]

=

$res;

}

功能演示如下圖5-17、圖5-18所示。圖5-17輸入評(píng)論

圖5-18新評(píng)論發(fā)布后顯示在最頂部即時(shí)對(duì)話實(shí)現(xiàn)方法根據(jù)網(wǎng)站的設(shè)計(jì)目標(biāo)并且充分考慮功能的實(shí)用性，采用傳統(tǒng)的方式，即Ajax短連接模式配合PHP語(yǔ)言實(shí)現(xiàn)功能。實(shí)現(xiàn)的方法思路是，在發(fā)送信息時(shí)，Ajax異步傳輸數(shù)據(jù)至服務(wù)器，同時(shí)，需要設(shè)置一個(gè)定時(shí)器用于不斷發(fā)送異步請(qǐng)求以獲取對(duì)話列表中的內(nèi)容，否則，請(qǐng)求結(jié)束后http短連接將會(huì)斷開(kāi)鏈接。為避免服務(wù)器負(fù)載，刷新數(shù)設(shè)不能過(guò)于小，合適的時(shí)間是1至3秒。此方法的優(yōu)勢(shì)在于，無(wú)須與數(shù)據(jù)庫(kù)進(jìn)行信息的存儲(chǔ)與獲取操作，加載信息的速度快，符合網(wǎng)站追求社交效率的理念，大體與目前流行的“閱后即刪”思想相一致。用file_get_contents函數(shù)讀取整個(gè)對(duì)話頁(yè)面的信息文件，在網(wǎng)頁(yè)的文本區(qū)域，也就是對(duì)話區(qū)域，使用fopen函數(shù)將對(duì)話信息文件打開(kāi)，然后再通過(guò)fputs函數(shù)將需要顯示的信息寫(xiě)入文本區(qū)域，可以自行設(shè)置顯示的格式與內(nèi)容。在創(chuàng)建了XMLHttpRequest對(duì)象后，通過(guò)open命令連接服務(wù)網(wǎng)頁(yè)，并將獲取信息的請(qǐng)求發(fā)送至服務(wù)器，當(dāng)請(qǐng)求完成并且響應(yīng)完畢后，便開(kāi)始執(zhí)行刷新消息的任務(wù)。以下為實(shí)現(xiàn)對(duì)話功能的核心前端代碼：

var

xmlobj;

var

count=0;

function

createXMLHttpRequest(){

if(window.ActiveXObject){

xmlobj=new

ActiveXObject("Microsoft.XMLHTTP");

}

else

if(window.XMLHttpRequest){

xmlobj=new

XMLHttpRequest();

}

}

function

Autofresh(){

createXMLHttpRequest();

count=count+1;

xmlobj.open("GET","?id=msg&count="+count,true);

xmlobj.onreadystatechange=doAjax;

xmlobj.send("r="+Math.random());

}

function

doAjax(){

if(xmlobj.readyState==4

&&

xmlobj.status==200){

var

time_span=document.getElementById('msg');

time_span.innerHTML=xmlobj.responseText;

setTimeout("Autofresh()",1000);

}

}

以下為實(shí)現(xiàn)對(duì)話功能的核心后端代碼：<?php

if($_COOKIE['用戶名']==null){

$user=$_POST['username'];

}else{

$user=$_COOKIE['用戶名'];

}

$news=$_POST['news'];

$id=$_GET['id'];

$url="chat.php";

setcookie('用戶名',$user,time()+10*60,'/');

if($id=="send"

&&

$user!=""

&&

$news!=""){

$wenjian=file_get_contents("news.txt");

$a=fopen("news.txt","w

w+");

fputs($a,$news."：".$user."\n\n".$wenjian);

fclose($a);

header("Location:$url");

}else

if($id=="[清除]"){

setcookie("用戶名",

'');

unlink("news.txt");

header("Location:$url");

}

?>

功能演示如下圖5-19、圖5-20所示。圖5-19在對(duì)話框中輸入信息圖5-20信息已發(fā)送

個(gè)人收藏頁(yè)面?zhèn)€人收藏頁(yè)面主要展示個(gè)人在網(wǎng)站中收藏的內(nèi)容，包括音樂(lè)、書(shū)籍及討論的話題等。本網(wǎng)頁(yè)為Bootstrap與自定義CSS搭建的靜態(tài)模型網(wǎng)頁(yè)，用于瀏覽其中包含的多媒體信息。頁(yè)面如下圖5-21所示。圖5-21個(gè)人收藏頁(yè)

后臺(tái)管理系統(tǒng)平臺(tái)的管理人員可以通過(guò)后臺(tái)管理系統(tǒng)，對(duì)網(wǎng)站進(jìn)行數(shù)據(jù)的管理和維護(hù)。界面整體采用的是Bootstrap的開(kāi)源后臺(tái)框架，再根據(jù)網(wǎng)站的需求做對(duì)應(yīng)的更改。界面風(fēng)格與網(wǎng)站整體色調(diào)相同，能夠保持網(wǎng)站整體的調(diào)性。網(wǎng)站管理系統(tǒng)的實(shí)現(xiàn)方法與網(wǎng)站功能的實(shí)現(xiàn)方法一致，降低了開(kāi)發(fā)成本，更有利于提升系統(tǒng)的跨平臺(tái)性，維護(hù)和升級(jí)更加便捷。系統(tǒng)實(shí)現(xiàn)的主要基礎(chǔ)功能如下表5-1所示。表5-1后臺(tái)系統(tǒng)基礎(chǔ)功能表后臺(tái)管理系統(tǒng)功能項(xiàng)描述用戶管理瀏覽所有用戶的信息、刪除指定用戶動(dòng)態(tài)管理瀏覽用戶發(fā)布的動(dòng)態(tài)、刪除指定的動(dòng)態(tài)管理員管理瀏覽所有管理員的信息、刪除指定的管理員公告發(fā)布創(chuàng)建特定的管理信息、管理信息向管理員公開(kāi)管理系統(tǒng)主頁(yè)面在管理系統(tǒng)主頁(yè)面主要顯示待處理的任務(wù)和信息，能夠查看其他的在線管