動(dòng)漫社區(qū)網(wǎng)站分析與設(shè)計(jì)

目錄10023目錄 摘要?jiǎng)勇幕且曈X時(shí)代的重要文化形態(tài)之一，它是21世紀(jì)人文快速發(fā)展下科技、藝術(shù)、思想的高度融合。一部令人津津樂道的動(dòng)漫，它的畫面，音樂，內(nèi)容大都是深入人心的。恰如宮崎駿老師的《天空之城》。像大多數(shù)的80后甚至90后小的時(shí)候接觸動(dòng)漫往往是通過觀看電視節(jié)目和光盤。由于電腦和網(wǎng)絡(luò)在我國(guó)的普及程度度越來越高，人們可以更快更好的從因特網(wǎng)上獲取到自己想要看到的視頻。為了跟隨潮流，動(dòng)漫文化自然也應(yīng)當(dāng)與互聯(lián)網(wǎng)向結(jié)合。這樣，可以進(jìn)入更多人的視野也更易被獲取。動(dòng)漫文化類型的網(wǎng)站自然應(yīng)運(yùn)而生。關(guān)鍵詞：動(dòng)漫；網(wǎng)站；設(shè)計(jì)

一、引言（一）分析與設(shè)計(jì)目的目前網(wǎng)絡(luò)上已經(jīng)有如天涯、知乎、微博、百度貼吧之類的平臺(tái)供人們交流討論著社會(huì)上的種種，也有如嗶哩嗶哩、ACFUN這樣的年輕人文化娛樂社區(qū)。但少有專為動(dòng)漫文化愛好者、動(dòng)漫產(chǎn)業(yè)者提供的雙向交流平臺(tái)。本課題則基于此需求，擬設(shè)計(jì)一個(gè)動(dòng)漫社區(qū)網(wǎng)站，為廣大動(dòng)漫人士提供最新的動(dòng)漫資訊以及動(dòng)漫文化思想碰撞的平臺(tái)，這也是本次設(shè)計(jì)的目的。（二）分析與設(shè)計(jì)意義動(dòng)漫社區(qū)網(wǎng)站可以加深大家對(duì)動(dòng)漫文化的了解，促進(jìn)動(dòng)漫文化的發(fā)展，推進(jìn)動(dòng)漫產(chǎn)業(yè)的進(jìn)步和升級(jí)。在國(guó)家機(jī)器的政策推動(dòng)下，隨著我國(guó)動(dòng)漫產(chǎn)業(yè)整體開花的局面變好，之類的網(wǎng)站將受到更多人的歡迎，創(chuàng)造更多的經(jīng)濟(jì)和文化價(jià)值。于我個(gè)人而言，我本身是個(gè)動(dòng)漫文化愛好者，能完成這類網(wǎng)站的設(shè)計(jì)和實(shí)現(xiàn)對(duì)于我而言是一件十分愉悅的事。不僅如此，這次獨(dú)立自主的完成設(shè)計(jì)開發(fā)，也讓我深切體會(huì)到了書本上所提到的軟件項(xiàng)目開發(fā)的種種問題，加深了項(xiàng)目開發(fā)的認(rèn)知。當(dāng)然，編碼技巧上也有了極大的提升，對(duì)于如何提高自己的編碼質(zhì)量有了一定的明悟。二、系統(tǒng)功能分析與設(shè)計(jì)（一）相關(guān)技術(shù)理論1.SublimeText3SublimeText3是時(shí)下H5網(wǎng)站及App開發(fā)的先進(jìn)的文本編輯器。最初的SublimeText是在2008年1月份由程序員JonSkinner開發(fā)出來的。SublimeText3不僅具有漂亮，簡(jiǎn)介，易操作的界面，還向用戶提供了許多強(qiáng)大的功能。SublimeText3的主要功能包括多選擇，多窗口，自定義鍵綁定，代碼縮略圖，即時(shí)項(xiàng)目轉(zhuǎn)換等。SublimeText3是一個(gè)跨平臺(tái)的編輯器，同時(shí)支持多個(gè)操作系統(tǒng)，是項(xiàng)目開發(fā)的強(qiáng)有力的工具。2.NavicatforMySqlNavicatforMySql是一款強(qiáng)大的數(shù)據(jù)庫管理，開發(fā)及維護(hù)的專為MySql設(shè)計(jì)的軟件開發(fā)工具。NavicatforMySql在某種意義上可以稱為前端開發(fā)軟件，它不僅功能齊備包含觸發(fā)器，存儲(chǔ)過程，檢索，函數(shù)，事件等，還提供了直觀而強(qiáng)大的圖形界面。NavicatforMySql的出現(xiàn)，大大降低了軟件開發(fā)的成本，提高了開發(fā)的效率，一定程度上解放了PHP，J2EE等開發(fā)程序員的大腦。（二）可行性研究1.技術(shù)可行性分析本網(wǎng)站是使用成熟的H5技術(shù)合集來搭建網(wǎng)站頁面和功能模塊。使用目前廣受歡迎的前端框架Bootstrap來架構(gòu)頁面，并且完成部分頁面功能。采用AngularJS負(fù)責(zé)構(gòu)建部分頁面應(yīng)用程序。使用AJAX+PHP+MySql三者聯(lián)結(jié)的方式完成前端與數(shù)據(jù)庫的信息交互，不僅節(jié)約帶寬，還可以減輕服務(wù)器壓力，將一些簡(jiǎn)單的功能運(yùn)算移交到客戶端。本網(wǎng)站設(shè)計(jì)關(guān)鍵技術(shù)簡(jiǎn)介如2.2.1，2.2.2及2.2.3所示。（1）JavaScriptJS在最初被創(chuàng)造的時(shí)候，本意是希望其能夠如java一般，人們比較中意的是語言當(dāng)中的函數(shù)式。可是最后完成的時(shí)候，就函數(shù)腳本語言的風(fēng)格角度而言，JS更類似于C語言的風(fēng)格。就發(fā)展到目前而言，JS是時(shí)下所有主流瀏覽器唯一支持的腳本語言。而體現(xiàn)在本網(wǎng)站的開發(fā)設(shè)計(jì)中，JS的作用就是網(wǎng)站可以在一些情況下不與服務(wù)器產(chǎn)生數(shù)據(jù)交流而能動(dòng)態(tài)的改變我們網(wǎng)站的頁面內(nèi)容也就是DOM。（2）H5在這里需要明確一點(diǎn)，本文中說的H5不等于HTML5.HTML5是一個(gè)目前網(wǎng)絡(luò)上應(yīng)用的最新的也最為廣泛的超文本標(biāo)記語言。本文的H5實(shí)際指的是一個(gè)web網(wǎng)站開發(fā)技術(shù)合集，當(dāng)然，在現(xiàn)實(shí)工作中也可被理解為一類產(chǎn)品。而體現(xiàn)在本網(wǎng)站的開發(fā)設(shè)計(jì)中，H5的主要作用就是通過使用其中的與多媒體特性相關(guān)的技術(shù)也可以說是標(biāo)簽來替代AdobeFlash。（3）PHP在本網(wǎng)站開發(fā)中PHP并未有過多復(fù)雜的算法邏輯，也沒有使用PHP相關(guān)框架。本網(wǎng)站主要通過Ajax+PHP+MySql三方聯(lián)動(dòng)配合的方式來完成前后端的數(shù)據(jù)交互，體現(xiàn)網(wǎng)站的動(dòng)態(tài)運(yùn)行。2.經(jīng)濟(jì)可行性分析隨著動(dòng)漫產(chǎn)業(yè)在我國(guó)的飛速發(fā)展，借助互聯(lián)網(wǎng)這個(gè)平臺(tái)。本類網(wǎng)站足可以吸引到足夠的受眾。由此，無論是視頻會(huì)員機(jī)制或是廣告位機(jī)制等一系列時(shí)下視頻網(wǎng)站獲取經(jīng)濟(jì)利益的方式在足夠的受眾群支持下都可以逐步實(shí)行。不僅如此，隨著網(wǎng)站的運(yùn)營(yíng)和升級(jí)還可以不斷的融入新的元素，諸如線上線下活動(dòng)，網(wǎng)上購(gòu)物，虛擬世界，游戲競(jìng)技等等。在互聯(lián)網(wǎng)流量，廣告變現(xiàn)，個(gè)性化服務(wù)等一系列增值服務(wù)的盈利模式下，去除視頻版權(quán)費(fèi)支出，網(wǎng)站依然可以獲得不俗的盈利。3.操作可行性分析本網(wǎng)站的頁面提示較為豐富，導(dǎo)航欄，標(biāo)題，按鈕等頁面元素命名貼近功能本意。頁面的操作簡(jiǎn)單，快捷，方便。用戶可以根據(jù)頁面的提示和相關(guān)小功能即便不使用用戶手冊(cè)也能對(duì)頁面進(jìn)行相關(guān)許可內(nèi)的操作。所以本網(wǎng)站具備操作可行性。4.環(huán)境可行性分析該站點(diǎn)開發(fā)及測(cè)試環(huán)境為Windows10，谷歌瀏覽器，SublimeText3，NavicatforMySQL，WampServer64開發(fā)成功并測(cè)試成功。本網(wǎng)站具備一定的環(huán)境可行性。三、數(shù)據(jù)庫及數(shù)據(jù)表分析和設(shè)計(jì)（一）用戶角色分析根據(jù)網(wǎng)站設(shè)計(jì)需求規(guī)劃，系統(tǒng)用戶主要分為兩種角色：網(wǎng)站用戶，網(wǎng)站管理員。網(wǎng)站用戶可以在網(wǎng)站進(jìn)行注冊(cè)登錄。用戶登入網(wǎng)站后可以瀏覽不同種類的動(dòng)漫視頻，獲取網(wǎng)站最新的推送視頻資源。用戶在觀看完視頻后還可以做出點(diǎn)贊，收藏，關(guān)注UP主，評(píng)論視頻等操作。用戶擁有屬于自己的個(gè)人空間，可以在個(gè)人空間里發(fā)表日志，查看收藏視頻，查看關(guān)注UP主，查看自己的投稿等。網(wǎng)站管理員主要負(fù)責(zé)日常的網(wǎng)站運(yùn)營(yíng)維護(hù)等工作。網(wǎng)站管理員需要審核用戶的視頻投稿，在確認(rèn)視頻沒有違法違紀(jì)的內(nèi)容后將視頻加入網(wǎng)站視頻庫。（二）功能板塊劃分本網(wǎng)站的功能模塊大致分為六個(gè)部分。六個(gè)功能模塊分別是用戶登錄注冊(cè)模塊，動(dòng)漫資訊推送功能板塊，視頻播放功能板塊，用戶評(píng)論區(qū)功能板塊，視頻搜索功能板塊，用戶個(gè)人空間功能板塊等。（三）網(wǎng)站用戶系統(tǒng)網(wǎng)站用戶功能模塊主要分為：登錄注冊(cè)，獲取推送，觀看視頻，發(fā)表評(píng)論，搜索視頻，發(fā)表日志，進(jìn)行投稿等。1.登錄注冊(cè)用戶注冊(cè)賬號(hào)，設(shè)置個(gè)人id。2.獲取推送用戶在瀏覽網(wǎng)站頁面內(nèi)容時(shí)，可以根據(jù)頁面提示獲取網(wǎng)站推送的視頻資源。3.觀看視頻用戶可以觀看自己喜愛的視頻資源。4.發(fā)表評(píng)論用戶可以在觀看完視頻后作出自己的評(píng)論，發(fā)表感想。5.搜索視頻用戶可以通過視頻名字的關(guān)鍵字查詢視頻，獲取視頻資源。。6.發(fā)表日志用戶擁有自己的個(gè)人空間并可以在自己的個(gè)人空間里發(fā)表日志。7.進(jìn)行投稿用戶可以制作或搬運(yùn)視頻通過網(wǎng)站提供的方法進(jìn)行視頻投稿。8.管理員系統(tǒng)網(wǎng)站管理員主要負(fù)責(zé)網(wǎng)站的日常運(yùn)營(yíng)維護(hù)以及審核投稿，更新視頻庫。管理員需要在確認(rèn)視頻投稿中沒有違法違紀(jì)的內(nèi)容之后才可以將視頻更新進(jìn)數(shù)據(jù)庫。（四）數(shù)據(jù)流圖及流程圖網(wǎng)站設(shè)計(jì)系統(tǒng)總流程圖如圖3.1所示圖3.1系統(tǒng)總流程圖（2）網(wǎng)站設(shè)計(jì)頂層數(shù)據(jù)流圖圖3.2網(wǎng)站設(shè)計(jì)頂層數(shù)據(jù)流圖（3）用戶功能數(shù)據(jù)流圖如圖3.3所示圖3.3用戶功能數(shù)據(jù)流圖（4）網(wǎng)站管理員功能數(shù)據(jù)流圖如圖3.4所示圖3.4網(wǎng)站管理員功能數(shù)據(jù)流圖四、界面分析與設(shè)計(jì)（一）概述本網(wǎng)站使用SublimeText3作為主要開發(fā)工具，使用H4相關(guān)技術(shù)完成前端設(shè)計(jì)，使用Ajax和PHP完成前后臺(tái)數(shù)據(jù)庫數(shù)據(jù)交流，使用Mysql存儲(chǔ)數(shù)據(jù)。（二）登錄注冊(cè)模塊登陸注冊(cè)界面如下圖4.1，4.2所示圖4.1用戶注冊(cè)界面圖4.2用戶登陸界面在注冊(cè)頁面中，用戶可以在頁面使用自己的郵箱地址創(chuàng)建自己的賬號(hào)密碼并且注冊(cè)自己的獨(dú)有昵稱。注冊(cè)成功后，用戶可以在登陸頁面輸入郵箱賬號(hào)和密碼經(jīng)后臺(tái)驗(yàn)證無誤后進(jìn)入主頁面。部分代碼如下。mysqli_select_db($con,"$BB");mysqli_query($con,"setnamesutf8");$res=mysqli_query($con,"selectnamefromusersinfo");while($row=mysqli_fetch_array($res)){if($row['name']==$User){$AA=1;echo$AA;}}（三）資訊推送模塊網(wǎng)站主頁面如下圖4.3，4.4所示。圖4.3網(wǎng)站主界面圖4.4網(wǎng)站主界面用戶進(jìn)入網(wǎng)站頁面后可以看到豐富的視頻推送信息。用戶可以通過鏈接進(jìn)入動(dòng)畫，娛樂，文章，音樂，游戲，動(dòng)漫商們等各個(gè)頁面瀏覽網(wǎng)站推送。此外，用戶可以點(diǎn)擊“換一批”按鈕來更新推送，獲取其他的推送視頻。部分代碼如下$res=mysqli_query($con,"selectUP,browse,praise,link,pic,titlefrommore");$data1=array();$res=mysqli_query($con,"selectUPfrommore");while($row=mysqli_fetch_array($res)){$data1[]=$row['UP'];}（四）視頻播放模塊視頻播放頁面如下圖4.4，4.6所示。圖4.4視頻播放界面圖4.6視頻播放界面用戶通過頁面?zhèn)髦垫溄舆M(jìn)入視頻播放頁面。用戶可以播放視頻，還可以通過提供的按鈕來調(diào)節(jié)視頻播放界面。部分代碼如下。<divid="watch"><videoid="video1"src="../videos/entertainment/movie.ogg"width="1000"height="600"controls="controls">Yourbrowserdoesnotsupportthevideotag.</video><br/><br/><buttononclick="playPause()"class="mb">播放/暫停</button><buttononclick="makeBig()"class="mb">大</button><buttononclick="makeNormal()"class="mb">正常</button><buttononclick="makeSmall()"class="mb">小</button></div>（五）用戶評(píng)論模塊用戶評(píng)論頁面如下圖4.7所示。圖4.7用戶評(píng)論界面用戶可以在觀看完視頻后在播放頁面的下面發(fā)表自己的觀后感言并瀏覽其他用戶的評(píng)論。部分代碼如下<divid="talk"><divclass="tk1"id="tk4"></div><divid="tk2"><textareaid="tk3"type="text"placeholder="請(qǐng)自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴(yán)禁發(fā)布色情，暴力，反動(dòng)的言論"></textarea></div><divid="tk4"onclick="fb()">發(fā)表</div></div>（六）視頻搜索模塊視頻搜索頁面如下圖4.8所示。圖4.8視頻搜索界面用戶可以在頁面商的搜索框輸入關(guān)鍵字通過關(guān)鍵字查詢進(jìn)入視頻搜索頁面。在視頻搜索頁面，用戶可以看到在不同視頻分類下的與關(guān)鍵字相關(guān)的視頻。部分代碼如下。$data1=array();$res=mysqli_query($con,"selecttufromspwherenamelike'%$Key%'");while($row=mysqli_fetch_array($res)){$data1[]=$row['tu'];}$data2=array();$res=mysqli_query($con,"selectupfromspwherenamelike'%$Key%'");while($row=mysqli_fetch_array($res)){$data2[]=$row['up'];}（七）個(gè)人空間模塊個(gè)人空間頁面如下圖4.9所示。圖4.9個(gè)人空間界面用戶可以個(gè)人空間中發(fā)表日志以及管理自己的關(guān)注區(qū)，收藏區(qū)，投稿區(qū)。部分代碼如下<ulid="myTab"class="navnav.tabs"><liclass="active"><ahref="#home"data.toggle="tab">我的空間</a></li><li><ahref="#gz"data.toggle="tab">我的關(guān)注</a></li><li>