動漫社區(qū)網(wǎng)站設(shè)計和實現(xiàn)網(wǎng)絡(luò)工程專業(yè)

動漫社區(qū)網(wǎng)站設(shè)計與實現(xiàn)動漫社區(qū)網(wǎng)站設(shè)計摘 要本動漫社區(qū)網(wǎng)站共有用戶登錄注冊板塊，動漫資訊推送功能板塊，視頻播放功能板塊，用戶評論區(qū)功能板塊，視頻搜索功能板塊，用戶個人空間功能板塊等六大板塊。用戶登錄注冊模塊實現(xiàn)了網(wǎng)站用戶的信息管理；動漫資訊推送功能模塊方便用戶獲取最新最熱的動漫資訊，并可選擇自己喜愛的資訊種類；視頻播放功能模塊是網(wǎng)站的核心功能之一，用戶可以方便快捷的觀看視頻；用戶評論區(qū)功能模塊既能使得用戶在觀看完視頻后作出自己的評價也可以看到其他用戶的評價，并作出收藏視頻，對視頻點贊，關(guān)注UP主等一系列操作；視頻搜索功能模塊使得用戶可以更為自由的獲取自己喜愛的視頻，用戶可以通過關(guān)鍵字查詢在各種視頻分類中獲取自己想要觀看的動漫視頻；用戶個人空間功能模塊，用戶可以進入自己的個人空間，發(fā)表自己的日常動態(tài)，并管理自己的關(guān)注區(qū)，收藏區(qū)以及投稿區(qū)等。本網(wǎng)站界面設(shè)計注重頁面架構(gòu)，交互方式，視覺布局等的一致性，給予用戶簡單方便且實用的操作空間。本網(wǎng)站設(shè)計綜合了當前國內(nèi)具有一些代表性的動漫視頻網(wǎng)站的用戶需求及相關(guān)功能，可以較好的滿足普通用戶對視頻網(wǎng)站的功能需求。關(guān)鍵詞：動漫網(wǎng)站 H5 PHPThe Design of Animation community websiteAbstractThe animation community website includes six modules: a user login registration module，Animation information push module，Video playback module，User comment module，Video search function module，User personal space function module. The user registration module is used to manage the information of the website user； Push module for anime information allows users to access the latest and hottest animation information and choose their favorite types of information. Video playback module is one of the core functions of the site, users can quickly and easily watch videos；User comment module allows users to watch videos after making their own evaluation and look through evaluations from other users. and users can also put video link to their collection area, give the video a praise, concern about the UP users.；The video search module allows users to get their favorite videos more freely, users can get these video that they want to watch by querying in a variety of video categories using keyword.；User personal space module allows user to enter their own personal space, publish their daily activities, and manage their own areas they concern about, collection area and submission area etc. The interface design of this website focus on the page structure and interactive mode，Visual layout and so o, which can give users a simple, convenient and practical operating space. This website design combines some representative functions from other animation video , and can meet functional requirements which user want.Key Words: Anime website H5 PHP目 錄摘 要IAbstractII目 錄III圖清單V表清單VI1 概述11.1 課題研究背景及意義11.2 國內(nèi)外研究狀況以及現(xiàn)發(fā)展水平11.3項目創(chuàng)新點21.4開發(fā)環(huán)境31.5 本章小結(jié)32 可行性研究42.1 技術(shù)可行性分析42.3 操作可行性分析52.4 環(huán)境可行性分析53 需求分析63.1用戶角色分析63.2功能板塊劃分63.3數(shù)據(jù)流圖及流程圖73.4數(shù)據(jù)字典93.5本章小結(jié)104 概要設(shè)計114.1模塊層次圖114.2子系統(tǒng)功能模塊114.3數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計124.4數(shù)據(jù)庫表設(shè)計155 詳細設(shè)計195.1概述195.2登錄注冊模塊205.3資訊推送模塊215.4視頻播放模塊225.5用戶評論模塊245.6視頻搜索模塊255.7個人空間模塊266 結(jié)論27參考文獻29致謝31圖清單圖序號圖名稱頁碼圖3-1系統(tǒng)總流程圖7圖3-2網(wǎng)站設(shè)計頂層數(shù)據(jù)流圖8圖3-3用戶功能設(shè)計流圖8圖3-4網(wǎng)站管理員功能數(shù)據(jù)流圖8圖4-1總系統(tǒng)層次圖11圖4-2用戶子系統(tǒng)層次圖12圖4-3管理員總系統(tǒng)層次圖12圖4-4網(wǎng)站用戶實體屬性圖13圖4-5網(wǎng)站管理員屬性圖13圖4-6視頻實體屬性圖14圖4-7評論實體屬性圖14圖4-8日志實體屬性圖15圖4-9收藏實體屬性圖15圖4-10關(guān)注實體屬性圖15圖5-1用戶注冊界面20圖5-2用戶登陸界面20圖5-3網(wǎng)站主界面21圖5-4網(wǎng)站主界面22圖5-5視頻播放界面23圖5-6視頻播放界面23圖5-7用戶評論界面24圖5-8視頻搜索界面25圖5-9個人空間界面26表清單表序號表名稱頁碼表4.1視頻表16表4.2推送表16表4.3關(guān)注表17表 4.4空間表17表 4.5 收藏表17表 4.6投稿表18表 4.7用戶表18表 4.8管理員表18表 4.9 關(guān)注表19表 4.10點贊表19表 4.11收藏表19表 4.12評論表19301 概述動漫文化是視覺時代的重要文化形態(tài)之一，它是21世紀人文快速發(fā)展下科技、藝術(shù)、思想的高度融合。一部令人津津樂道的動漫，它的畫面，音樂，內(nèi)容大都是深入人心的。恰如宮崎駿老師的天空之城。像大多數(shù)的80后甚至90后小的時候接觸動漫往往是通過觀看電視節(jié)目和光盤。由于電腦和網(wǎng)絡(luò)在我國的普及程度度越來越高，人們可以更快更好的從因特網(wǎng)上獲取到自己想要看到的視頻。為了跟隨潮流，動漫文化自然也應(yīng)當與互聯(lián)網(wǎng)向結(jié)合。這樣，可以進入更多人的視野也更易被獲取。動漫文化類型的網(wǎng)站自然應(yīng)運而生。1.1 課題研究背景及意義目前網(wǎng)絡(luò)上已經(jīng)有如天涯、知乎、微博、百度貼吧之類的平臺供人們交流討論著社會上的種種，也有如嗶哩嗶哩、ACFUN這樣的年輕人文化娛樂社區(qū)。但少有專為動漫文化愛好者、動漫產(chǎn)業(yè)者提供的雙向交流平臺。本課題則基于此需求，擬設(shè)計一個動漫社區(qū)網(wǎng)站，為廣大動漫人士提供最新的動漫資訊以及動漫文化思想碰撞的平臺。動漫社區(qū)網(wǎng)站可以加深大家對動漫文化的了解，促進動漫文化的發(fā)展，推進動漫產(chǎn)業(yè)的進步和升級。在國家機器的政策推動下，隨著我國動漫產(chǎn)業(yè)整體開花的局面變好，之類的網(wǎng)站將受到更多人的歡迎，創(chuàng)造更多的經(jīng)濟和文化價值。于我個人而言，我本身是個動漫文化愛好者，能完成這類網(wǎng)站的設(shè)計和實現(xiàn)對于我而言是一件十分愉悅的事。不僅如此，這次獨立自主的完成設(shè)計開發(fā)，也讓我深切體會到了書本上所提到的軟件項目開發(fā)的種種問題，加深了項目開發(fā)的認知。當然，編碼技巧上也有了極大的提升，對于如何提高自己的編碼質(zhì)量有了一定的明悟。1.2 國內(nèi)外研究狀況以及現(xiàn)發(fā)展水平歐美動漫產(chǎn)業(yè)發(fā)展已經(jīng)有100多年的歷史，歐美的動漫文化中有著許多出色且深入人心的動漫主題人物諸如米老鼠，唐老鴨，湯姆貓等。其二，歐美國家的互聯(lián)網(wǎng)產(chǎn)業(yè)的發(fā)展和普及也領(lǐng)先國內(nèi)?；谏鲜龅膬蓚€原因，歐美國家產(chǎn)生了具有大量優(yōu)秀的動漫主題網(wǎng)站。舉個例子，迪士尼網(wǎng)站就是個非常成熟的以動漫為主題的網(wǎng)站。隨著迪士尼產(chǎn)業(yè)的升級和擴大，迪士尼網(wǎng)站已經(jīng)不單單局限于視頻播放，更是涵蓋了線上活動，新聞，信息，購物，比賽等諸多功能。在成為一個成功的商業(yè)化動漫文化主題網(wǎng)站前進了好幾步。是一個非常好的范例。除了商業(yè)化用途，也有其他優(yōu)秀的貫徹推廣動漫文化的視頻網(wǎng)站。如知名的AnimeFreak TV網(wǎng)站，是一個可以在線觀看動漫電影，劇集的免費視頻網(wǎng)站，動漫視頻資源極其豐富。如果說AnimeFreak TV網(wǎng)站代表著動漫視頻網(wǎng)站的橫向發(fā)展中佼佼者的話，那么蓋亞互動網(wǎng)站就是縱向發(fā)展的領(lǐng)軍者?，F(xiàn)如今的蓋亞互動網(wǎng)站已經(jīng)演變成了一個在線社區(qū)網(wǎng)站。蓋亞互動將游戲世界，虛擬世界，“論壇論劍”，社交網(wǎng)絡(luò)等等融合到了一起，是一個起于動漫文化，又將動漫文化帶到更多更深的地方的一個網(wǎng)站。反觀國內(nèi)動漫文化方興未艾。繼前年的大圣歸來上映數(shù)月內(nèi)斬獲9.56億票房，一舉創(chuàng)下我國國產(chǎn)動漫產(chǎn)業(yè)票房的紀錄后，去年7月上映的大魚海棠，首日票房便已經(jīng)突破了7460萬元，再次刷新了國產(chǎn)動漫產(chǎn)業(yè)票房?！皣?fù)興”的種子正在逐漸發(fā)芽，越來越多的人試著去接受動漫文化，感受動漫文化的魅力，享受觀看動漫帶來的那份喜悅。隨著時下我國的互聯(lián)網(wǎng)產(chǎn)業(yè)高速發(fā)展，“互聯(lián)網(wǎng)+”概念的提出。國內(nèi)早先涌現(xiàn)的已動漫文化為主體的視頻網(wǎng)站也變得越來越火熱。諸如，嗶哩嗶哩，AcFun等網(wǎng)站。但相較之下還是略顯匱乏，一些動漫視頻網(wǎng)站的制度也存在一定的缺陷。不僅如此，因為越來越多的人涌入ACG網(wǎng)站，也引起了網(wǎng)站的整體用戶素質(zhì)水平下滑。新舊用戶之間的價值觀問題以及年齡差異帶來的交流問題等等日漸浮現(xiàn)。如何更好的解決無謂的爭端，營造良性的網(wǎng)站交流氛圍，國內(nèi)的ACG網(wǎng)站還有不短的一段路要走。文化差異問題是一個任何以某文化為中心的網(wǎng)站都要面對的問題，是根的問題。國內(nèi)的ACG網(wǎng)站只能一邊解決這個問題，一邊緩步的發(fā)展更多的網(wǎng)站功能。總結(jié)下來，盡管國外的動漫網(wǎng)站相對成熟完善，但國內(nèi)的動漫網(wǎng)站正在不斷的發(fā)展，正在逐步形成具有中國特色動漫文化的主題網(wǎng)站。1.3 項目創(chuàng)新點本課題采用HTML5中新的多媒體元素如視頻標簽<video>來設(shè)計動漫視頻播放板塊。采用了AJAX這種交互性強的Web應(yīng)用程序技術(shù)，可以在不重載頁面的情況下與Web服務(wù)器交換數(shù)據(jù)，即在不需要刷新頁面的情況下，就可以產(chǎn)生局部刷新的效果，更小、更快、更友好。該網(wǎng)站將通過H5、CSS3、原生JS、相關(guān)插件等工具將各模塊更緊密的銜接在一起，在頁面上力求簡潔與美觀并重，各模塊分工明確、細致，減少各種bug的出現(xiàn)。而在功能上。本課題不止是如傳統(tǒng)的觀影，人與動漫的“交融”，亦著重于人與人的交流。在這里，受眾與受眾的交流，受眾與動漫方的交流，動漫產(chǎn)業(yè)之間的競爭和合作也可以體現(xiàn)。1.4 開發(fā)環(huán)境Sublime Text 3Sublime Text 3 是時下H5網(wǎng)站及App開發(fā)的先進的文本編輯器。最初的Sublime Text是在2008年1月份由程序員Jon Skinner開發(fā)出來的。Sublime Text 3不僅具有漂亮，簡介，易操作的界面，還向用戶提供了許多強大的功能。Sublime Text 3的主要功能包括多選擇，多窗口，自定義鍵綁定，代碼縮略圖，即時項目轉(zhuǎn)換等。Sublime Text 3是一個跨平臺的編輯器，同時支持多個操作系統(tǒng)，是項目開發(fā)的強有力的工具。Navicat for MySqlNavicat for MySql是一款強大的數(shù)據(jù)庫管理，開發(fā)及維護的專為MySql設(shè)計的軟件開發(fā)工具。Navicat for MySql在某種意義上可以稱為前端開發(fā)軟件，它不僅功能齊備包含觸發(fā)器，存儲過程，檢索，函數(shù)，事件等，還提供了直觀而強大的圖形界面。Navicat for MySql的出現(xiàn)，大大降低了軟件開發(fā)的成本，提高了開發(fā)的效率，一定程度上解放了PHP，J2EE等開發(fā)程序員的大腦。1.5 本章小結(jié)本章節(jié)主要是對網(wǎng)站設(shè)計與實現(xiàn)的初步階段的簡要介紹，對網(wǎng)站開發(fā)的背景，意義及國內(nèi)外的發(fā)展狀況做出了一定的闡述。此階段可以使我們更加明確課題研究開發(fā)的方向，方法。2 可行性研究2.1 技術(shù)可行性分析本網(wǎng)站是使用成熟的H5技術(shù)合集來搭建網(wǎng)站頁面和功能模塊。使用目前廣受歡迎的前端框架Bootstrap來架構(gòu)頁面，并且完成部分頁面功能。采用AngularJS負責構(gòu)建部分頁面應(yīng)用程序。使用AJAX+PHP+MySql三者聯(lián)結(jié)的方式完成前端與數(shù)據(jù)庫的信息交互，不僅節(jié)約帶寬，還可以減輕服務(wù)器壓力，將一些簡單的功能運算移交到客戶端。本網(wǎng)站設(shè)計關(guān)鍵技術(shù)簡介如2.2.1，2.2.2及2.2.3所示。2.2.1 JavaScriptJS在最初被創(chuàng)造的時候，本意是希望其能夠如java一般，人們比較中意的是語言當中的函數(shù)式?？墒亲詈笸瓿傻臅r候，就函數(shù)腳本語言的風格角度而言，JS更類似于C語言的風格。就發(fā)展到目前而言，JS是時下所有主流瀏覽器唯一支持的腳本語言2。而體現(xiàn)在本網(wǎng)站的開發(fā)設(shè)計中，JS的作用就是網(wǎng)站可以在一些情況下不與服務(wù)器產(chǎn)生數(shù)據(jù)交流而能動態(tài)的改變我們網(wǎng)站的頁面內(nèi)容也就是DOM。2.2.2 H5在這里需要明確一點，本文中說的H5不等于HTML5.HTML5是一個目前網(wǎng)絡(luò)上應(yīng)用的最新的也最為廣泛的超文本標記語言。本文的H5實際指的是一個web網(wǎng)站開發(fā)技術(shù)合集，當然，在現(xiàn)實工作中也可被理解為一類產(chǎn)品。而體現(xiàn)在本網(wǎng)站的開發(fā)設(shè)計中，H5的主要作用就是通過使用其中的與多媒體特性相關(guān)的技術(shù)也可以說是標簽來替代Adobe Flash。2.2.3 PHP在本網(wǎng)站開發(fā)中PHP并未有過多復(fù)雜的算法邏輯，也沒有使用PHP相關(guān)框架。本網(wǎng)站主要通過Ajax+PHP+MySql三方聯(lián)動配合的方式來完成前后端的數(shù)據(jù)交互，體現(xiàn)網(wǎng)站的動態(tài)運行。 2.2經(jīng)濟可行性分析隨著動漫產(chǎn)業(yè)在我國的飛速發(fā)展，借助互聯(lián)網(wǎng)這個平臺。本類網(wǎng)站足可以吸引到足夠的受眾。由此，無論是視頻會員機制或是廣告位機制等一系列時下視頻網(wǎng)站獲取經(jīng)濟利益的方式在足夠的受眾群支持下都可以逐步實行。不僅如此，隨著網(wǎng)站的運營和升級還可以不斷的融入新的元素，諸如線上線下活動，網(wǎng)上購物，虛擬世界，游戲競技等等。在互聯(lián)網(wǎng)流量，廣告變現(xiàn)，個性化服務(wù)等一系列增值服務(wù)的盈利模式下，去除視頻版權(quán)費支出，網(wǎng)站運營升級支出，網(wǎng)站依然可以獲得不俗的盈利。2.3 操作可行性分析本網(wǎng)站的頁面提示較為豐富，導(dǎo)航欄，標題，按鈕等頁面元素命名貼近功能本意。頁面的操作簡單，快捷，方便。用戶可以根據(jù)頁面的提示和相關(guān)小功能即便不使用用戶手冊也能對頁面進行相關(guān)許可內(nèi)的操作。所以本網(wǎng)站具備操作可行性。2.4 環(huán)境可行性分析該站點開發(fā)及測試環(huán)境為Windows 10，谷歌瀏覽器，Sublime Text3，Navicat for MySQL，WampServer64開發(fā)成功并測試成功。本網(wǎng)站具備一定的環(huán)境可行性。3 需求分析3.1用戶角色分析根據(jù)網(wǎng)站設(shè)計需求規(guī)劃，系統(tǒng)用戶主要分為兩種角色：網(wǎng)站用戶，網(wǎng)站管理員。網(wǎng)站用戶可以在網(wǎng)站進行注冊登錄。用戶登入網(wǎng)站后可以瀏覽不同種類的動漫視頻，獲取網(wǎng)站最新的推送視頻資源。用戶在觀看完視頻后還可以做出點贊，收藏，關(guān)注UP主，評論視頻等操作。用戶擁有屬于自己的個人空間，可以在個人空間里發(fā)表日志，查看收藏視頻，查看關(guān)注UP主，查看自己的投稿等。網(wǎng)站管理員主要負責日常的網(wǎng)站運營維護等工作。網(wǎng)站管理員需要審核用戶的視頻投稿，在確認視頻沒有違法違紀的內(nèi)容后將視頻加入網(wǎng)站視頻庫。3.2功能板塊劃分本網(wǎng)站的功能模塊大致分為六個部分。六個功能模塊分別是用戶登錄注冊模塊，動漫資訊推送功能板塊，視頻播放功能板塊，用戶評論區(qū)功能板塊，視頻搜索功能板塊，用戶個人空間功能板塊等。3.2.1網(wǎng)站用戶系統(tǒng)網(wǎng)站用戶功能模塊主要分為：登錄注冊，獲取推送，觀看視頻，發(fā)表評論，搜索視頻，發(fā)表日志，進行投稿等。(1） 登錄注冊用戶注冊賬號，設(shè)置個人id。(2） 獲取推送用戶在瀏覽網(wǎng)站頁面內(nèi)容時，可以根據(jù)頁面提示獲取網(wǎng)站推送的視頻資源。(3） 觀看視頻用戶可以觀看自己喜愛的視頻資源。(4） 發(fā)表評論用戶可以在觀看完視頻后作出自己的評論，發(fā)表感想。(5） 搜索視頻用戶可以通過視頻名字的關(guān)鍵字查詢視頻，獲取視頻資源。(6） 發(fā)表日志用戶擁有自己的個人空間并可以在自己的個人空間里發(fā)表日志。(7） 進行投稿用戶可以制作或搬運視頻通過網(wǎng)站提供的方法進行視頻投稿。3.2.2管理員系統(tǒng)網(wǎng)站管理員主要負責網(wǎng)站的日常運營維護以及審核投稿，更新視頻庫。管理員需要在確認視頻投稿中沒有違法違紀的內(nèi)容之后才可以將視頻更新進數(shù)據(jù)庫。3.3數(shù)據(jù)流圖及流程圖（1） 網(wǎng)站設(shè)計系統(tǒng)總流程圖如圖3-1所示 圖3-1系統(tǒng)總流程圖（2）網(wǎng)站設(shè)計頂層數(shù)據(jù)流圖 圖3-2網(wǎng)站設(shè)計頂層數(shù)據(jù)流圖（3）用戶功能數(shù)據(jù)流圖如圖3-3所示 圖3-3用戶功能數(shù)據(jù)流圖（4）網(wǎng)站管理員功能數(shù)據(jù)流圖如圖3-4所示 圖3-4網(wǎng)站管理員功能數(shù)據(jù)流圖3.4數(shù)據(jù)字典主要的數(shù)據(jù)字典如圖3-5所示：名字：身份信息別名：用戶，管理員描述：網(wǎng)站管理員以及網(wǎng)站用戶的賬號，名稱以及密碼定義：身份信息用戶信息+管理員信息名字：視頻信息別名：無描述：用戶觀看視頻，點贊，收藏，關(guān)注以及評論。定義：視頻信息視頻源地址+視頻播放量+視頻點贊量+視頻收藏量+視頻評論名字：空間信息別名：個人空間描述：用戶進入自己的個人空間，發(fā)表日志，查看收藏，關(guān)注以及投稿定義：空間信息日志信息+收藏+關(guān)注+投稿+基礎(chǔ)信息名字：視頻搜索別名：關(guān)鍵字查找描述：用戶根據(jù)相關(guān)視頻名中的關(guān)鍵字在數(shù)據(jù)庫中索引查找自己喜愛的視頻 定義：視頻搜索=關(guān)鍵字+數(shù)據(jù)庫查找名字：視頻推送別名：獲取更多描述：用戶根據(jù)頁面提示按鈕刷新推送視頻的信息定義：視頻推送=頁面提示+數(shù)據(jù)庫推送3.5本章小結(jié)本章對網(wǎng)站的需求進行了詳細的分析，明確了開發(fā)網(wǎng)站所需用戶種類以及每一類用戶所需求的功能模塊，確認了網(wǎng)站設(shè)計所需要劃分出的子系統(tǒng)。最后對網(wǎng)站開發(fā)所需要的數(shù)據(jù)流圖以及數(shù)據(jù)字典做出了詳細的設(shè)計和分析介紹。4 概要設(shè)計4.1模塊層次圖動漫社區(qū)網(wǎng)站主要分為兩個子系統(tǒng)：網(wǎng)站用戶子系統(tǒng)，網(wǎng)站管理員子系統(tǒng)。整個動漫社區(qū)網(wǎng)站的系統(tǒng)功能模塊如圖4-1所示。 圖4-1總系統(tǒng)層次圖4.2子系統(tǒng)功能模塊（1）網(wǎng)站用戶子系統(tǒng)網(wǎng)站用戶子系統(tǒng)的主要登錄的是一般的網(wǎng)站用戶。用戶在登入后可以通過頁面提示來瀏覽推送視頻信息，觀看視頻，發(fā)表評論，關(guān)鍵字搜索相關(guān)視頻以及進入個人空間進行一些操作等。如圖4-2所示。 圖4-2用戶子系統(tǒng)層次圖（2）管理員子系統(tǒng)管理員子系統(tǒng)的主要登錄對象是網(wǎng)站管理員。網(wǎng)站管理員除了需要對網(wǎng)站進行一些日常的運維操作之外還要審核用戶的投稿視頻。當網(wǎng)站管理員確認視頻中沒有違法違紀的內(nèi)容后，管理員會將視頻更新進網(wǎng)站視頻庫，如圖4-3所示。 圖4-3管理員子系統(tǒng)層次圖4.3數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計本網(wǎng)站的實體主要有網(wǎng)站用戶實體，網(wǎng)站管理員實體，視頻實體，評論實體，日志實體，收藏實體，關(guān)注實體，投稿實體等（1）網(wǎng)站用戶實體屬性圖，用戶實體由登錄郵箱，日志，收藏，登錄密碼，關(guān)注，用戶昵稱，用戶頭像，投稿組成。如圖4-4所示。 圖4-4網(wǎng)站用戶實體屬性圖 （2）網(wǎng)站管理員屬性圖，網(wǎng)站管理員主要有三個屬性，管理員昵稱，郵箱以及管理員登錄的密碼等。如圖4-5所示。 圖4-5網(wǎng)站管理員實體屬性圖 （3）視頻實體屬性圖，視頻實體由UP主，簡圖，評論，點贊，收藏，簡介，名稱以及播放組成。如圖4-6所示。 圖4-6視頻實體屬性圖（4）評論實體屬性圖，評論實體共有用戶頭像，用戶，點贊，評論信息以及發(fā)表時間組成。如圖4-7所示。 圖4-7評論實體屬性圖（5）日志實體屬性圖，日志實體由用戶頭像，用戶，評論信息，發(fā)表時間，點贊組成。如圖4-8所示。 圖4-8日志實體屬性圖（6）收藏實體屬性圖，收藏實體由視頻名，簡介，視頻源組成。如圖4-9所示。 圖4-9收藏實體屬性圖（7）關(guān)注實體屬性圖，關(guān)注實體由UP名，簡介，鏈接組成如圖4-10所示。 圖4-10關(guān)注實體屬性圖4.4數(shù)據(jù)庫表設(shè)計根據(jù)以上章節(jié)的介紹，設(shè)計數(shù)據(jù)庫及表如下所示。（1）動畫視頻庫視頻表視頻表主要用于存儲視頻庫中的視頻信息，網(wǎng)站用戶可以通過關(guān)鍵字查找功能在視頻庫中找到自己喜愛的視頻。tu表示視頻封面圖，up表示該視頻的投稿人，name表示視頻名稱，bf表示視頻表量，dz表示視頻點贊量。如表4.1所示。表4.1 視頻表字段名數(shù)據(jù)類型長度備注tuupnamebfdz varcharvarcharvarcharvarcharvarchar3232323232NOT NULL(Key)NOT NULL NOT NULL NOT NULLNOT NULL （2）娛樂區(qū)視頻推送庫視頻表娛樂區(qū)視頻推送庫視頻表主要用于用戶通過頁面提示，如點擊按鈕等來獲取新的視頻源。UP表示視頻投稿人，browse表示播放量，praise表示視頻點贊量，link表示視頻源地址，pic表示視頻封面圖，title表示視頻標題。如表4.2所示。表 4.2 推送表字段名數(shù)據(jù)類型長度備注UPbrowsepraiselinkpic titlevarcharvarcharvarcharvarcharvarcharvarchar323232323232NOT NULL (Key)NOT NULLNOT NULL NOT NULL NOT NULL NOT NULL（3）用戶個人空間庫及各個表用戶個人空間庫由用戶昵稱命名，建有四個表。四個表分別為關(guān)注表，空間表，收藏表以及投稿表等。關(guān)注表用于顯示用戶所關(guān)注UP的信息。tu表示所關(guān)注UP主的頭像，name表示所關(guān)注up主昵稱，content表示該up的簡介。如表4.3所示。表 4.3 關(guān)注表字段名數(shù)據(jù)類型長度備注tunamecontentvarcharvarcharvarchar323232NOT NULLNOT NULL (Key)NOT NULL空間表用于記錄用戶所發(fā)表的日志。pic表示所關(guān)注UP主的頭像，name表示所關(guān)注up主昵稱，pl表示該up的日志，dz表示點贊量，sj表示日志發(fā)表時間。如表4.4所示。表 4.4 空間表字段名數(shù)據(jù)類型長度備注picnamepldzsjvarcharvarcharvarcharvarcharvarchar3232323232NOT NULLNOT NULLNOT NULLNOT NULLNOT NULL (Key)收藏表用于記錄用戶所收藏的視頻信息。tu表示所收藏的視頻的封面，name表示所關(guān)注up主昵稱，content表示所收藏的視頻的簡介。如表4.5所示。表 4.5 收藏表字段名數(shù)據(jù)類型長度備注tunamecontentvarcharvarcharvarchar323232NOT NULLNOT NULL (Key)NOT NULL投稿表用于記錄用戶的投稿的信息。tu表示用戶投稿的視頻的封面，name表示投稿視頻的名稱，content表示用戶投稿視頻的簡介。如表4.6所示。表 4.6 投稿表字段名數(shù)據(jù)類型長度備注tunamecontentvarcharvarcharvarchar323232NOT NULLNOT NULL (Key)NOT NULL（4）用戶數(shù)據(jù)庫用戶表用戶數(shù)據(jù)庫用戶表主要用于記錄用戶的注冊信息。name表示用戶昵稱，user表示用戶郵箱，password表示用戶密碼，pic表示用戶頭像。如表4.7所示。表 4.7 用戶表字段名數(shù)據(jù)類型長度備注nameuserpasswordpicvarcharvarcharvarcharvarchar32323232NOT NULL(Key)NOT NULL(Key)NOT NULLNOT NULL（5） 管理員表網(wǎng)站管理員數(shù)據(jù)庫網(wǎng)站管理員表主要負責記錄網(wǎng)站運維人員的ID，密碼以及郵箱賬號。name表示管理員名稱，user表示管理員郵箱，password表示管理員密碼，pic表示管理員頭像。如表4.8所示。表 4.8 管理員表字段名數(shù)據(jù)類型長度備注nameuserpasswordpicvarcharvarcharvarcharvarchar32323232NOT NULL(Key)NOT NULL(Key)NOT NULLNOT NULL（6）具體視頻數(shù)據(jù)庫本站對每一個視頻均設(shè)有相關(guān)的數(shù)據(jù)庫。數(shù)據(jù)庫中建有四個表，分別為評論表，關(guān)注表，點贊表以及收藏表等。關(guān)注表用以記錄關(guān)注投稿UP的用戶，點贊表用以記錄對視頻點贊的用戶，收藏表用以記錄收藏視頻的用戶，評論表用以記錄用戶觀看視頻后的感想。四表如下。表 4.9 關(guān)注表字段名數(shù)據(jù)類型長度備注namevarchar32NOT NULL(Key)表 4.10 點贊表字段名數(shù)據(jù)類型長度備注namevarchar32NOT NULL(Key)表 4.11 收藏表字段名數(shù)據(jù)類型長度備注namevarchar32NOT NULL(Key)表 4.12 評論表字段名數(shù)據(jù)類型長度備注picnamepldzsjvarcharvarcharvarcharvarcharvarchar3232323232NOT NULLNOT NULLNOT NULLNOT NULLNOT NULL (Key)5 詳細設(shè)計5.1概述本網(wǎng)站使用Sublime Text 3 作為主要開發(fā)工具，使用H5相關(guān)技術(shù)完成前端設(shè)計，使用Ajax和PHP完成前后臺數(shù)據(jù)庫數(shù)據(jù)交流，使用Mysql存儲數(shù)據(jù)。5.2登錄注冊模塊登陸注冊界面如下圖5-1，5-2所示 圖5-1用戶注冊界面 圖5-2用戶登陸界面 在注冊頁面中，用戶可以在頁面使用自己的郵箱地址創(chuàng)建自己的賬號密碼并且注冊自己的獨有昵稱。注冊成功后，用戶可以在登陸頁面輸入郵箱賬號和密碼經(jīng)后臺驗證無誤后進入主頁面。部分代碼如下。 mysqli_select_db($con,"$BB"); mysqli_query($con,"set names utf8"); $res = mysqli_query($con,"select name from usersinfo"); while ($row = mysqli_fetch_array($res) if ($row'name' = $User) $AA = 1; echo $AA; 5.3資訊推送模塊網(wǎng)站主頁面如下圖5-3，5-4所示。 圖5-3網(wǎng)站主界面 圖5-4網(wǎng)站主界面用戶進入網(wǎng)站頁面后可以看到豐富的視頻推送信息。用戶可以通過鏈接進入動畫，娛樂，文章，音樂，游戲，動漫商們等各個頁面瀏覽網(wǎng)站推送。此外，用戶可以點擊“換一批”按鈕來更新推送，獲取其他的推送視頻。部分代碼如下$res=mysqli_query($con,"select UP,browse,praise,link,pic,title from more"); $data1 =array(); $res = mysqli_query($con,"select UP from more"); while ($row = mysqli_fetch_array($res) $data1 = $row'UP' 5.4視頻播放模塊視頻播放頁面如下圖5-5，5-6所示。圖5-5視頻播放界面 圖5-6視頻播放界面用戶通過頁面?zhèn)髦垫溄舆M入視頻播放頁面。用戶可以播放視頻，還可以通過提供的按鈕來調(diào)節(jié)視頻播放界面。部分代碼如下。 <div id="watch"> <video id="video1" src="./videos/entertainment/movie.ogg" width="1000" height="600" controls="controls"> Your browser does not support the video tag. </video> <br /> <br /> <button onclick="playPause()" class="mb">播放/暫停</button> <button onclick="makeBig()" class="mb">大</button> <button onclick="makeNormal()" class="mb">正常</button> <button onclick="makeSmall()" class="mb">小</button> </div>5.5用戶評論模塊用戶評論頁面如下圖5-7所示。圖5-7用戶評論界面用戶可以在觀看完視頻后在播放頁面的下面發(fā)表自己的觀后感言并瀏覽其他用戶的評論。部分代碼如下 <div id="talk"> <div class="tk1" id="tk5"></div> <div id="tk2"> <textarea id="tk3" type="text" placeholder="請自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴禁發(fā)布色情，暴力，反動的言論"></textarea> </div> <div id="tk4" onclick="fb()">發(fā)表</div> </div>5.6視頻搜索模塊視頻搜索頁面如下圖5-8所示。圖5-8視頻搜索界面用戶可以在頁面商的搜索框輸入關(guān)鍵字通過關(guān)鍵字查詢進入視頻搜索頁面。在視頻搜索頁面，用戶可以看到在不同視頻分類下的與關(guān)鍵字相關(guān)的視頻。部分代碼如下。$data1 =array(); $res = mysqli_query($con,"select tu from sp where name like '%$Key%'"); while ($row = mysqli_fetch_array($res) $data1 = $row'tu' $data2 =array(); $res = mysqli_query($con,"select up from sp where name like '%$Key%'"); while ($row = mysqli_fetch_array($res) $data2 = $row'up' 5.7個人空間模塊個人空間頁面如下圖5-9所示。圖5-9個人空間界面用戶可以個人空間中發(fā)表日志以及管理自己的關(guān)注區(qū)，收藏區(qū)，投稿區(qū)。部分代碼如下 <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> 我的空間 </a> </li> <li><a href="#gz" data-toggle="tab">我的關(guān)注</a></li> <li><a href="#sc" data-toggle="tab">我的收藏</a></li> <li><a href="#tg" data-toggle="tab">我的投稿</a></li> </ul>6 結(jié)論本網(wǎng)站的開發(fā)設(shè)計到此可以算是告一段落了。算算時間的話，從開始到結(jié)束大概三個月左右。大學四年來學生從老師們身上學到了很多，但是一直沒有抽出一個整段的時間區(qū)花心思做出一個屬于自己的開發(fā)設(shè)計。在大四下的最后一個學期，在指導(dǎo)老師細心的教導(dǎo)和指引下，學生也算是完滿的圓了一樁心愿。最初選擇這個課題是出于自己的愛好。學生小的時候就喜愛動漫，而做一個以動漫為主題中心的網(wǎng)站也是因為這個愛好。網(wǎng)站的開發(fā)技術(shù)涉及到H5技術(shù)合集，PHP，Mysql等。網(wǎng)站的前端設(shè)計采用了BooStrap框架結(jié)合CSS3與HTML5的方式來設(shè)計架構(gòu)頁面。整體頁面看上去美觀，大方，簡介；網(wǎng)站采用jQuery，AngularJS與原生js結(jié)合的方式來完成頁面功能的開發(fā)設(shè)計，諸如頁面間的傳值跳轉(zhuǎn)，注冊登錄的表單驗證以及輪播圖等等；網(wǎng)站采用Ajax，PHP，Mysql三方聯(lián)動的方式進行前端與數(shù)據(jù)庫之間的數(shù)據(jù)交流與數(shù)據(jù)傳值。通過這個三方聯(lián)動的方式可以降低服務(wù)器后臺壓力，利用客戶端的閑余能力完成部分網(wǎng)站部分功能。通過這一次完整的設(shè)計開發(fā)，也使得我對課堂上老師所講的軟件開發(fā)流程有了更為深刻的理解。代碼的設(shè)計完成只是整個過程的一部分，前期的需求分析以及設(shè)計也至關(guān)重要。需求分析總結(jié)的好與壞直接影響了代碼的質(zhì)量。在之后的開發(fā)工作中，只有更好更全面的理解需求分析以及更好的把握整體思路才能減少開發(fā)過程中的錯誤，提升我們的代碼質(zhì)量。在軟件開發(fā)過程中，耐心和細心是必不可缺的。要知道軟件開發(fā)過程中總會有各種各樣的問題和麻煩發(fā)生，有時候甚至需要我們大面積的返工，所以，我們需要細心且耐心的去投入軟件的設(shè)計與開發(fā)。參考文獻1 Adam Freeman. HTML5權(quán)威指南.人民郵電出版社20142 (美)弗拉納根.Javascript權(quán)威指南.機械工業(yè)出版社,20073 陸凌牛.HTML 5與CSS 3權(quán)威指南.機械工業(yè)出版社，20114 張恩民.PHP開發(fā)實戰(zhàn)權(quán)威指南.清華大學出版社,20125 陸汝鈐,金芝,陳剛.面向本體的需求分析J.軟件學報,2000(08)6 周亮.軟件工程的安全檢測與維護D.東南大學,20167 (美)RickD.Craig,(美)StefanP.Jaskiel.系統(tǒng)的軟件測試M.電子工業(yè)出版社 20038 武時龍,宇平安.計算機課程在線考試系統(tǒng)設(shè)計J.赤峰學院學報(自然科學版),20159 畢建忠.數(shù)據(jù)庫新聞網(wǎng)絡(luò)傳播新概念J.中國傳媒科技.2001(12) 10 (加) 克尼亞萬.Servlet和JSP學習指南M. 機械工業(yè)出版社, 2013 11 Multi-Fuzzy Complex Nilpotent MatricesJ. Asit Dey,Madhumangal Pal.  International Journal of Fuzzy System Applications (IJFSA). 2016(4)12 The induced intuitionistic fuzzy Einstein aggregation and its application in group decision-makingJ. Yejun Xu,Yuanyuan Li,Huimin Wang.  Journal of Industrial and Production Engineering. 2013(1)13 Interval-valued intuitionistic fuzzy multi-criteria decision making based on the generalized Shapley geometric Choquet integralJ. Hao Cheng,Jie Tang.  Journal of Industrial and Production Engineering. 2016(1)14 The structure and value of modularity in software design. Sullivan K J,Griswold W G,Cai Y et al. Proc. the 8th Eu- ropean Software Engineering Conference held jointly with the 9th ACM SIGSOFT International Symposium on Founda- tions of Software Engineering . 200115Software engineering: A roadmap. Boehm B W,Sullivan K. Proc. International Conference on Software Engineering . 200016 Runtime recovery and manipulation of software architecture of component-based systemsJ . Gang Huang,Hong Mei,Fu-Qing Yang.  Automated Software Engineering . 2006 (2)17 Specification, implementation, and deployment of componentsJ. Ivica Crnkovic,Brahim Hnich,Torsten Jonsson,Zeynep Kiziltan.  Communications of the ACM. 2002(10)18 Component-basedsoftware engineeringJ. Ivica Crnkovic,Stig Larsson,Judith Stafford.  ACM SIGSOFT Software Engineering Notes. 2002(3)19 Component-based Development Process and Component LifecycleJ. Michel Chaudron,Stig Larsson,Ivica Crnkovic.  Journal of Computing and Information Technology. 2005(4) 20 Web-centred end-user component modellingJ. David Lizcano,Fernando Alonso,Javier Soriano,Genoveva López.  Future Generation Computer Systems致謝有句話說得好，只有當失去，才會回首，才會懷念。時光荏苒，大學四年就過去了，這四年里同學們一起學習，一起玩耍。細細想想，大一剛進校門時的情景仿佛還在昨天，那時的大家懵懂而青澀。在指導(dǎo)老師的認真指導(dǎo)下，我完成了這次的畢業(yè)設(shè)計，內(nèi)心喜悅之時也意識到了別離的時刻要到了。這是第二段文字，而我寫完第一段文字是在半小時前。耳朵里塞著耳機聽著課，明明有好多話想說，可落在鍵盤上又總是一次次的刪去重來。不過既然是致謝環(huán)節(jié)，還是先感謝一波，感謝中一些話也就跟著出來了。感謝四年來老師們的教導(dǎo)，老師們是過來人，走過了風風雨雨，見慣了潮起潮落，很多時候都能寬容我們的錯誤我們的懶惰，一遍遍的教導(dǎo)我們。對老師們，我有兩句話，一句對不起，一句感謝您。感謝四年來同學們的陪伴，有你們的陪伴才有我四年來的笑與淚，才有我一步步的成長。不會忘記大家一起壓馬路的時光，不會忘記一起在圖書館刷題的日子，不會忘記省運會五禽操時的一起灑下的汗水，我怎敢忘記大家。對同學們我只想說，感謝一路有你。