基于HTML5的社交平臺的設計與開發(fā)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'登陸成功，正在進入主頁',

timer:

5000,

showConfirmButton:

false

});

location.href

=

'../PHP/login.php';

}

else

{

Swal.fire({

icon:

'error',

title:

'無法注冊',

text:

'用戶已存在',

footer:

'<a

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

});

}

},

'json');

return

false;

}

else

{

return

false;

}

}

本網(wǎng)站均使用美觀的、響應式的JavaScript動態(tài)彈窗代替原生的alert彈窗，增強了網(wǎng)站整體的交互體驗。為了防止用戶在取賬戶名時出現(xiàn)大量不規(guī)則、不合法的字符，需要在前端加入對賬號名進行檢查的函數(shù)方法，用來限制用戶的取字范疇，規(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

=

"姓名長度過長".fontcolor("red");

return

false;

}

if

(reg.test(content))

{

spanNode.innerHTML

=

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

return

true;

}

else

{

spanNode.innerHTML

=

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

return

false;

}

}

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

<?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'

=>

'注冊成功')));

}

}

else

{

require

'../html/register.html';

}

?>

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

圖5-2用戶已存在圖5-3注冊成功

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

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

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

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

=>

'內容不能為空')));

}

$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中的一個事件觸發(fā)函數(shù)。對用戶發(fā)起的提交請求進行保存后，后端返回的數(shù)據(jù)格式統(tǒng)一為Json，此操作的最后必須返回false，主要是為了阻止表單自動提交事件，若沒有在最后返回false，表單將會在結束請求后再做一次提交操作。若判斷輸入的內容是空值，將出現(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:

'內容不能為空'

});

}

},

'json');

return

false;

});

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

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

刪除動態(tài)實現(xiàn)方法用戶可以在首頁對發(fā)送的動態(tài)進行刪除操作，也可以在個人中心刪除私人動態(tài)。平臺系統(tǒng)同樣是在確定當前登錄信息后，向數(shù)據(jù)庫發(fā)送刪除請求。以下為后端代碼：<?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'

=>

'請選擇要刪除的內容')));

}

$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進行獲取用戶的刪除指令，并對后端進行部分數(shù)據(jù)的傳輸，在確定指令前，彈出詢問操作的警示對話框。數(shù)據(jù)交互完成后，使用location.reload方法，重新載入文件，對頁面局部進行刷新。前端請求操作的核心代碼如下：<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)將會進行彈窗詢問，點擊確定刪除后，將會得到刪除成功的彈窗反饋。個人動態(tài)頁面如下圖5-14，功能演示如下圖5-15、圖5-16。

圖5-14個人動態(tài)頁面圖5-15刪除個人動態(tài)

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

});

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

($res

=

mysqli_fetch_assoc($result))

{

$res['comment_count']

=

0;

$comment_result

=

mysqli_query($conn,

"此處編寫具體的sql語句");

$res['comment']

=

array();

while

($comment_res

=

mysqli_fetch_assoc($comment_result))

{

$sub_result

=

mysqli_query($conn,

"此處編寫具體的sql語句");

$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輸入評論

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

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);

}

}

以下為實現(xiàn)對話功能的核心后端代碼：<?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在對話框中輸入信息圖5-20信息已發(fā)送

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

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