基于HTML5技術(shù)的動漫宣傳介紹網(wǎng)站的設(shè)計與實現(xiàn)

1、基于HTML5技術(shù)的動漫宣傳介紹網(wǎng)站的設(shè)計與實現(xiàn)Design and implementation of animation publicity website based on HTML5 Technology摘要基于HTML5技術(shù)的動漫宣傳介紹網(wǎng)站的設(shè)計與實現(xiàn)，主要是通過HTML5和PHP技術(shù)實現(xiàn)的，使用了B/S結(jié)構(gòu)，也就是常用的Browser/Server（中文名全稱為“瀏覽器/服務(wù)器”）結(jié)構(gòu)。此次項目中的系統(tǒng)的前臺部分，主要是：人物介紹、作品介紹、視頻播放、壁紙圖冊、新聞資訊、用戶的登錄與注冊、以及用戶的留言板，后臺部分則能夠讓管理員有效地管理用戶的留言。因為是為了宣傳介紹動漫，所以我

2、選擇了自己較為感興趣的動漫作品來展現(xiàn)。系統(tǒng)盡可能地突出動漫的風(fēng)格個性和特點，以視覺效果為切入點，讓用戶初步感受到動漫作品的基調(diào)。此次項目中的系統(tǒng)還最大程度地為用戶提供動漫相關(guān)的信息與資訊，將動畫資源和資訊整合在一起，便利用戶獲取信息，提高滿足感。此次項目中的系統(tǒng)設(shè)計簡潔、頁面清晰、系統(tǒng)所提供的內(nèi)容比較全面、有作品的獨特特征，能給用戶帶來良好的感受。此次項目中的系統(tǒng)的設(shè)計與實現(xiàn)，主要目的是滿足廣大動漫愛好者的需求，也是為了適應(yīng)動漫產(chǎn)業(yè)、動漫文化不斷發(fā)展的潮流，使動漫這種亞文化能被更多的人了解和喜愛。關(guān)鍵詞：動漫宣傳和介紹網(wǎng)站、HTML5、PHP、MySQLAbstractThe design a

3、nd realization of the animation promotion website based on HTML5 technology is mainly implemented through HTML5 and PHP technology, using the B / S structure, which is the commonly used Browser / Server (Chinese name is called browser / server) structure . The front part of the system in this projec

4、t is mainly: character introduction, work introduction, video playback, wallpaper album, news information, user login and registration, and user message board, and the background part allows administrators to effectively Manage user messages. Because it is for the purpose of publicizing and introduc

5、ing anime, I chose the animation works that I am more interested in to show. The system highlights the style personality and characteristics of anime as much as possible, with visual effects as the starting point, allowing users to initially feel the tone of anime works. The system in this project a

6、lso provides users with animation-related information and information to the greatest extent, integrating animation resources and information to facilitate users access to information and improve satisfaction. The system design in this project is simple, the page is clear, the content provided by th

7、e system is relatively comprehensive, and has the unique characteristics of the works, which can bring good feelings to the users. The main purpose of the design and implementation of the system in this project is to meet the needs of the majority of animation lovers, but also to adapt to the contin

8、uous development of the animation industry and animation culture, so that this subculture of animation can be understood and loved by more people .Keywords: Animation promotion and introduction website, HTML5, PHP, MySQL目錄第1章緒論11.1 課題背景11.2 課題研究意義11.3 課題研究現(xiàn)狀1第2章系統(tǒng)開發(fā)工具和技術(shù)簡介32.1 Visual Studio Code簡介32

9、.2 phpStudy簡介32.3 HTML5簡介32.4 CSS簡介42.5 JavaScript簡介42.6 jQuery簡介42.7 PHP 簡介42.8 MySQL數(shù)據(jù)庫簡介5第3章系統(tǒng)分析63.1 系統(tǒng)可行性分析63.1.1 經(jīng)濟可行性63.1.2 技術(shù)可行性63.1.3 運行可行性63.2 系統(tǒng)功能性需求分析63.2.1 前臺功能性需求73.2.2 后臺功能性需求73.3 系統(tǒng)非功能性需求分析83.4 系統(tǒng)運行環(huán)境8第4章系統(tǒng)總體設(shè)計94.1 系統(tǒng)架構(gòu)設(shè)計94.2 系統(tǒng)功能模塊設(shè)計94.3 系統(tǒng)流程設(shè)計104.4 數(shù)據(jù)庫設(shè)計114.4.1 e-r圖114.4.2 數(shù)據(jù)表12第5章系

10、統(tǒng)實現(xiàn)145.1 數(shù)據(jù)庫連接設(shè)計實現(xiàn)145.2 用戶的登錄與注冊功能設(shè)計實現(xiàn)145.3 前臺功能模塊設(shè)計實現(xiàn)155.3.1 首頁模塊155.3.2 作品介紹模塊195.3.3 人物介紹模塊205.3.4 番劇播放模塊205.3.5 精美壁紙模塊215.3.6 動畫資訊模塊215.3.7 用戶留言板模塊235.4 后臺功能模塊設(shè)計實現(xiàn)23第6章系統(tǒng)測試246.1 測試概述246.2 功能測試246.3 安全測試246.4 可用性測試256.5 兼容性測試256.6 測試結(jié)果分析25第7章系統(tǒng)特色與創(chuàng)新267.1 系統(tǒng)的特色267.2 系統(tǒng)的創(chuàng)新28總結(jié)30參考文獻31致謝32廣東東軟學(xué)院本科畢業(yè)

11、設(shè)計（論文）第1章緒論1.1 課題背景隨著科技的進步、時代的發(fā)展，互聯(lián)網(wǎng)在各個領(lǐng)域得到普及，計算機行業(yè)也已經(jīng)涉及到了現(xiàn)代社會生活的各方各面，人們的衣食住行、休閑娛樂都離不開各式各樣的信息。在互聯(lián)網(wǎng)及信息技術(shù)飛速發(fā)展的今天，信息傳播越來越方便快捷，人們對信息的追求也越來越迫切，網(wǎng)站上實時更新的信息則是人們所需信息的主要來源。網(wǎng)站是一種獲取信息和溝通交流的工具，是網(wǎng)絡(luò)信息的主要表現(xiàn)形式和主要承者，它在互聯(lián)網(wǎng)的發(fā)展中具有極其重要的地位，并發(fā)揮著極其重要的作用。網(wǎng)站綜合使用了靜態(tài)和動態(tài)的表現(xiàn)形式，靜態(tài)表現(xiàn)形式如文本、圖像、形狀等，動態(tài)表現(xiàn)形式如聲音、動畫和視頻等，這樣的動靜結(jié)合，能夠使網(wǎng)站具有豐富的多

12、媒體表現(xiàn)形式與互動特點，網(wǎng)站以一種生動直觀，而且非常形象的方式，向人們提供了他們所需要的資訊與信息。基于網(wǎng)站的重要性考慮，各行各業(yè)都投入到網(wǎng)站的建設(shè)與發(fā)展之中。1.2 課題研究意義各類網(wǎng)站紛紛出現(xiàn)，其中自然也包括動漫網(wǎng)站。動漫自產(chǎn)生以來已有百年歷史，動漫行業(yè)的發(fā)展日益興盛，產(chǎn)業(yè)鏈也逐步完善，動漫網(wǎng)站更是層出不窮。但傳統(tǒng)的視頻播放網(wǎng)站和論壇討論網(wǎng)站，只能面向?qū)ο嚓P(guān)動漫已有一定程度了解的動漫愛好者，既不能滿足動漫愛好者迫切獲取信息的需求，也使得動漫仍然僅局限于亞文化的窄小圈子之中，無法沖破束縛，走向大眾。當(dāng)前國內(nèi)有關(guān)動漫文化的網(wǎng)站極為稀缺。于是，關(guān)于動漫宣傳介紹的網(wǎng)站的出現(xiàn)，已成為大勢所趨。1.3

13、 課題研究現(xiàn)狀動漫的產(chǎn)生迄今已有百年歷史，動漫作為一種新的文化表現(xiàn)形式，逐漸從過去的低年齡層向全年齡層方向發(fā)展。動漫不再是小孩子們的“專利”，它也成為許多成年人在學(xué)習(xí)工作之外放松身心的娛樂活動之一。由于國情的不同，各國動漫的發(fā)展水平和程度不一，但從整體來看，動漫產(chǎn)業(yè)如今已經(jīng)發(fā)展成了一個相當(dāng)龐大的產(chǎn)業(yè)，其中以日本為最盛。中國動漫產(chǎn)業(yè)起步的時間比較早，大致是于上世紀(jì)五六十年代起步的。到了二十世紀(jì)八十年代，日本動漫開始傳入中國，吸引了廣大的觀眾。隨著動漫愛好者的激增，各式各樣的動漫網(wǎng)站也應(yīng)運而生。日本動漫不斷傳入，國內(nèi)的動漫產(chǎn)業(yè)、動漫文化再次發(fā)展起來。國內(nèi)的動漫網(wǎng)站現(xiàn)狀：目前國內(nèi)最大的動漫娛樂網(wǎng)站是

14、bilibili（嗶哩嗶哩動畫），有著最及時的動漫新番與豐富的動漫同人創(chuàng)作。截止至2019年，該網(wǎng)站活躍用戶有1.5億人，而網(wǎng)站內(nèi)較熱門動畫的播放量平均數(shù)千萬，多則上億，可見國內(nèi)動漫愛好者的數(shù)量之大，忠實用戶之多。與之相似的動漫網(wǎng)站還有acfun。此外還有櫻花動漫、風(fēng)車動漫、騰訊動漫等專注于動畫更新和漫畫連載的網(wǎng)站，這些網(wǎng)站擁有海量的完結(jié)動漫，并且一直保持著更新，資源非常豐富。國外的動漫網(wǎng)站現(xiàn)狀：動漫產(chǎn)業(yè)居于龍頭地位的日本，既有與國內(nèi)“嗶哩嗶哩動畫”類似的“niconico”，也有許多具體的動漫宣傳介紹網(wǎng)站，網(wǎng)站內(nèi)既有該動漫的劇情、人物與制作人員的相關(guān)介紹，也有周邊、音樂、DVD等的相關(guān)推廣。

15、其網(wǎng)站功能相當(dāng)完善，定位清晰，便利了許多想了解某部動漫具體情況的動漫愛好者，加強了對動漫的宣傳與介紹。但是缺少動漫及動漫相關(guān)的資源分享。雖然國內(nèi)的動漫網(wǎng)站豐富，但多為動畫與漫畫的資源網(wǎng)站或者動漫愛好者的交流網(wǎng)站，幾乎沒有真正意義上的具體動漫相關(guān)的宣傳介紹類網(wǎng)站，而國外的網(wǎng)站則缺少相關(guān)動畫資源。無論是國內(nèi)還是國外的動漫宣傳網(wǎng)站，都有其不足之處。因此，根據(jù)國內(nèi)動漫相關(guān)網(wǎng)站中存在的不足，針對動漫文化和產(chǎn)業(yè)的相關(guān)宣傳與介紹具有實際的研究意義。第2章系統(tǒng)開發(fā)工具和技術(shù)簡介2.1 Visual Studio Code簡介Visual Studio Code是一種開源代碼編輯器，由微軟公司開發(fā)而成。它能夠在

16、Windows系統(tǒng)、Linux系統(tǒng)以及macOS系統(tǒng)等操作系統(tǒng)上運行。它支持多種編程語言，集成終端。Visual Studio Code內(nèi)還有許多功能，比如：語法高亮、支持正則表達(dá)式、安裝擴展、創(chuàng)建 snippet 等，這是現(xiàn)代文本編輯器所應(yīng)該實現(xiàn)的功能。2.2 phpStudy簡介phpStudy是一個windows下的Apache/Ngnix+PHP+MySQL的集成開發(fā)環(huán)境，可以用于調(diào)試PHP。phpStudy能夠在windows系統(tǒng)、Linux系統(tǒng)下，快速地配置出一個web開發(fā)環(huán)境。它的優(yōu)點主要有：它有PHP調(diào)試環(huán)境，在安裝和配置方面都是比較方便的；還能夠?qū)Ψ?wù)器的版本進行轉(zhuǎn)換；而且很

17、多好用的開發(fā)工具都能在此集成；另外還包括了開發(fā)手冊。2.3 HTML5簡介HTML的中文翻譯為超文本標(biāo)記語言。它是一種語言描述方式，能夠構(gòu)建Web內(nèi)容。后來，HTML發(fā)展為HTML5。在2014年10月，萬維網(wǎng)聯(lián)盟制定好了HTML5的有關(guān)標(biāo)準(zhǔn)，現(xiàn)代Web產(chǎn)品基本都按照這份標(biāo)準(zhǔn)開發(fā)。它相較于歷代版本，有著不一樣的發(fā)展，增加了很多新的語法特征。2.4 CSS簡介CSS的中文翻譯為層疊樣式表。它是一種計算機語言。CSS是網(wǎng)頁中的樣式，既能靜態(tài)表現(xiàn)，也能動態(tài)表現(xiàn)，甚至能夠和JavaScript聯(lián)動使用。不過它不能夠像其他代碼一樣單獨拿出來使用，需要和HTML或XML聯(lián)動使用。現(xiàn)在，CSS的許多功能能夠

18、在現(xiàn)代大多數(shù)的瀏覽器上運行。2.5 JavaScript簡介JavaScript，人們將JS定為它的簡要名稱。JavaScript是一種高級的解釋型編程語言。JavaScript為頁面提供更多功能，是頁面交互功能的基礎(chǔ)語言。不管是在瀏覽器，還是在服務(wù)端，JavaScript都是可以執(zhí)行的。如果所用的設(shè)備中搭載了JavaScript 引擎，它也能夠執(zhí)行。目前，全球大多數(shù)網(wǎng)站都在使用它，并且全球許多的主流瀏覽器，如Chrome、Internet Explorer、Firefox、Safari、Opera等都支持它在其上運行。2.6 jQuery簡介jQuery是一個非常優(yōu)秀的JavaScript庫

19、，它有著快速、簡潔的特點。它封裝了JavaScript的常用功能代碼，讓我們開發(fā)項目變得更加便捷容易，讓我們更加方便的去操作dom，并有良好的瀏覽器兼容性。2.7 PHP 簡介PHP的中文翻譯為超文本預(yù)處理器。它是一種開源的通用計算機腳本語言。它不僅能夠在web后臺開發(fā)使用，還能夠內(nèi)嵌在前臺的HTML代碼內(nèi)。它的語法中，包含有很多計算機編程語言的優(yōu)點。在設(shè)計方面，它也相當(dāng)適合Web系統(tǒng)的開發(fā)，程序員在使用的過程中會明顯感覺到非常方便，所以這是PHP能夠在Web開發(fā)中得到廣泛應(yīng)用的一個重要原因。2.8 MySQL數(shù)據(jù)庫簡介MySQL數(shù)據(jù)庫是一個關(guān)系數(shù)據(jù)庫管理系統(tǒng)。在Mysql數(shù)據(jù)庫中，數(shù)據(jù)被不同

20、的表所存儲著。這樣做的好處就是，速度和靈活性有效地提高了。MySQL數(shù)據(jù)庫是基于WEB的管理系統(tǒng)，而且體積小巧，還擁有著較高的性能，較低的成本，以及較高的可靠性，這些優(yōu)點都使得它在很多中小型網(wǎng)站被普遍使用。后來，MySQL得到更大的發(fā)展，漸漸地被一些大型網(wǎng)站和程序所使用。第3章系統(tǒng)分析3.1 系統(tǒng)可行性分析3.1.1 經(jīng)濟可行性此次項目中的系統(tǒng)在研發(fā)上，對經(jīng)濟上的需求極低。一是系統(tǒng)研發(fā)時僅有極少量的資源需要購買才能使用；二是系統(tǒng)研發(fā)時不需要昂貴的器械，僅需一臺普通電腦就可以完成整個系統(tǒng)的開發(fā)工作。此外，此次項目中的系統(tǒng)主要是為了宣傳介紹，給用戶帶來便利。雖然沒有直接快速的經(jīng)濟收益，但是有很大的

21、發(fā)展空間，在系統(tǒng)研發(fā)成功后，能夠帶來間接深遠(yuǎn)的經(jīng)濟效益。所以，在經(jīng)濟方面，此次項目中的系統(tǒng)有很強的可行性。3.1.2 技術(shù)可行性此次項目中的系統(tǒng)分為前、后臺，前臺由HTML5、CSS、JavaScript編寫而成，可以多設(shè)備跨平臺，有很強的兼容性，是進行web前端網(wǎng)頁開發(fā)離不開的三要素。后臺則由PHP和MySQL編寫而成。PHP是常用的網(wǎng)站后臺開發(fā)語言，在 Web后臺開發(fā)領(lǐng)域被廣泛使用。使用的開發(fā)工具為Visual Studio Code和phpStudy，兩個開發(fā)工具都是時下應(yīng)用較為廣泛、輕量級、方便好用的工具，Visual Studio Code還支持多系統(tǒng)運行、多語言開發(fā)。所以無論是系統(tǒng)

22、所使用的技術(shù)，還是開發(fā)工具，都有很強的技術(shù)可行性。3.1.3 運行可行性此次項目中的系統(tǒng)是基于HTML5和PHP而開發(fā)的一個動漫宣傳介紹類系統(tǒng)，資源耗費小，不受位置和設(shè)備的限制，市面上的多種瀏覽器都能兼容、支持此次項目中的系統(tǒng)。且操作簡單，技術(shù)要求不高，用戶僅需通過普通的個人電腦、筆記本電腦就能訪問此次項目中的系統(tǒng)，進行網(wǎng)站瀏覽或者系統(tǒng)管理。綜上所述，無論是在經(jīng)濟上、技術(shù)上還是外部的運行環(huán)境上，此次項目中的系統(tǒng)的設(shè)計與開發(fā)都是在可以承受的范圍內(nèi)。3.2 系統(tǒng)功能性需求分析系統(tǒng)功能性需求分析是開發(fā)系統(tǒng)非常重要的一個環(huán)節(jié)，直接關(guān)系到系統(tǒng)的功能是否完善，是否能達(dá)到預(yù)期目標(biāo)。本課題要求實現(xiàn)動漫的宣傳與

23、介紹，系統(tǒng)要開發(fā)面向用戶的前臺與面向管理員的后臺，并確定好各個模塊的主要功能。前臺部分，有主頁、用戶的登錄與注冊、用戶留言、作品介紹、人物介紹、番劇播放、精美壁紙、動漫資訊等功能模塊。后臺主要是管理留言功能模塊。3.2.1 前臺功能性需求（1）主頁： 用戶通過主頁模塊大致了解此次項目中的系統(tǒng)所提供的功能。本模塊是用戶訪問系統(tǒng)最開始的門戶，簡要羅列了其他模塊的功能，包含導(dǎo)航和輪播圖、作品介紹、壁紙圖冊、人物介紹、新聞預(yù)覽、劇情介紹、底部七個部分。（2）作品介紹：用戶通過“作品介紹”模塊初步了解作品。本模塊介紹該動漫作品的創(chuàng)作背景、創(chuàng)作經(jīng)過和創(chuàng)作成果，分為“關(guān)于黑巖射手”、“世界觀”、“劇情介紹”

24、三部分。（3）人物介紹：用戶通過“人物介紹”模塊初步了解作品中的重要人物。本模塊介紹該動漫作品中的主要人物，用戶選擇人物，查看該人物的詳細(xì)介紹。（4）番劇播放： 用戶通過“番劇播放”模塊觀看該動漫。本模塊能讓用戶更直觀地感受到該動漫的魅力。（5）精美壁紙： 用戶通過“精美壁紙”模塊欣賞該動漫相關(guān)的精美壁紙。本模塊將壁紙分為四個類別，分別是“全部”、“動畫”、“官方”、“手辦”，用戶根據(jù)自己的需求對類別進行篩選查看，也可以選擇查看全部。（6）動漫資訊： 用戶通過“動漫資訊”模塊了解動漫相關(guān)的資訊，本模塊將該動漫相關(guān)資訊分為三個類別，分別是“最新資訊”、“動畫”、“游戲”。為用戶提供。（7）資訊詳

25、情： 用戶通過“資訊詳情”模塊了解資訊的詳細(xì)情況。用戶點擊資訊列表中的具體一則資訊的標(biāo)題后，會轉(zhuǎn)到資訊的詳情頁面。（8）用戶的登錄與注冊： 用戶點擊用戶的登錄與注冊圖標(biāo)進入到用戶的登錄與注冊界面。注冊界面需填寫用戶名、密碼和電子郵箱，注冊的數(shù)據(jù)符合填寫要求且數(shù)據(jù)庫內(nèi)沒有該用戶，則注冊成功，返回登錄界面。在用戶的登錄界面中，用戶需要填寫用戶名和密碼，成功登錄后可以進入留言板。（9）用戶留言板： 用戶通過自己已注冊的賬號登錄后，進入到留言板界面，給管理員留下系統(tǒng)建設(shè)的建議，以便更好地完善系統(tǒng)。3.2.2 后臺功能性需求（1）管理員登錄功能： 只有系統(tǒng)管理員擁有管理員賬號。在登錄界面，系統(tǒng)管理員在文

26、本輸入框內(nèi)，輸入管理員專用的用戶名和密碼，進到用戶留言管理界面。（2）用戶留言管理功能： 管理員成功登錄后，可以進入到用戶留言管理界面，可以看到前臺的用戶向后臺管理員發(fā)送的留言，管理員可以對用戶的留言進行管理刪除等功能。3.3 系統(tǒng)非功能性需求分析系統(tǒng)非功能性需求分析也是關(guān)鍵的一步，這關(guān)系到系統(tǒng)的視覺效果和布局結(jié)構(gòu)是否合理。（1） 頁面風(fēng)格：契合動漫作品黑巖射手的風(fēng)格，彰顯個性。（2） 素材：使用作品相關(guān)的素材。（3） Logo：使用系統(tǒng)自身專屬的logo。（4） 色調(diào)：采用冷色，黑白藍(lán)灰配色。3.4 系統(tǒng)運行環(huán)境運行環(huán)境：CPU：Inter Core i5-7200U CPU 2.50GHZ

27、內(nèi)存：8G以上硬盤：500G操作系統(tǒng)：Windows 10開發(fā)工具：Visual Studio Code、phpStudy數(shù)據(jù)庫：MySQL30第4章系統(tǒng)總體設(shè)計4.1 系統(tǒng)架構(gòu)設(shè)計此次項目中的系統(tǒng)的架構(gòu)設(shè)計分為前、后臺兩個部分。前臺面向用戶，用戶可以直接瀏覽使用系統(tǒng)各個功能，也可以選擇從用戶的登錄與注冊界面進入到留言板界面，給管理員后臺發(fā)送留言。后臺面向管理員，管理員通過管理員賬號進入到留言板后臺管理界面，對用戶的留言進行管理。其系統(tǒng)架構(gòu)設(shè)計圖如下圖4.1所示：圖4.1系統(tǒng)架構(gòu)設(shè)計圖4.2 系統(tǒng)功能模塊設(shè)計此次項目中的系統(tǒng)是基于HTML5和PHP開發(fā)的動漫宣傳介紹系統(tǒng)，系統(tǒng)是分為前、后臺兩個

28、模塊來設(shè)計的。前臺部分主要包括登錄、注冊、主頁、作品介紹、人物介紹、番劇播放、精美壁紙、動漫資訊、留言板等功能模塊；后臺部分則是用戶留言管理功能模塊。其功能結(jié)構(gòu)圖如下圖4.2所示：圖4.2系統(tǒng)功能模塊結(jié)構(gòu)圖4.3 系統(tǒng)流程設(shè)計流程圖是使用圖形來表示算法的思路的方法，外文名全稱為Flow Chart，它是一種可以用來表示算法、流程的圖。目前，流程圖在很多領(lǐng)域都得到了極為廣泛的應(yīng)用。此次項目中的系統(tǒng)流程設(shè)計如下圖4.3所示。圖4.3系統(tǒng)流程設(shè)計圖4.4 數(shù)據(jù)庫設(shè)計4.4.1 e-r圖此次項目中的系統(tǒng)使用MySQL數(shù)據(jù)庫和PHP語言。此次項目中的系統(tǒng)E-R模型圖如下圖4.4-4.6所示：（1）系統(tǒng)用

29、戶實體屬性如圖4.4所示。圖4.4用戶實體屬性圖（2）用戶留言類實體屬性如圖4.5所示。圖4.5用戶留言類實體屬性圖（3）系統(tǒng)管理員實體屬性如圖4.6所示。圖4.6系統(tǒng)管理員實體屬性圖4.4.2 數(shù)據(jù)表此次項目中的系統(tǒng)中建立的數(shù)據(jù)庫名為management，使用MySQL數(shù)據(jù)庫管理系統(tǒng)。系統(tǒng)中主要使用到的數(shù)據(jù)表分別有users表和message表。具體表結(jié)構(gòu)如表4-1、表4-2：表4-1 users表名稱類型大小是否為空 備注userNamevarchar20否passwordvarchar30否emailvarchar60否 表4-2 message表名稱類型大小是否為空 備注idint11

30、否namechar20是emailchar50是contentvarchar200是第5章系統(tǒng)實現(xiàn)5.1 數(shù)據(jù)庫連接設(shè)計實現(xiàn)采用PHP連接MySQL數(shù)據(jù)庫中的mysqli（面向?qū)ο螅┻M行數(shù)據(jù)庫連接配置。實現(xiàn)代碼圖5.1如下：圖5.2數(shù)據(jù)庫連接代碼圖5.2 用戶的登錄與注冊功能設(shè)計實現(xiàn)當(dāng)用戶訪問系統(tǒng)的登錄頁面時，可以選擇賬號的登錄或者注冊。登錄時需要輸入已經(jīng)注冊成功的用戶信息（用戶名、密碼），如果填寫的格式或者信息不符，系統(tǒng)都會輸出相應(yīng)的提示。如果格式正確，用戶點擊登錄后，系統(tǒng)會將用戶填寫的表單數(shù)據(jù)發(fā)送給后臺相應(yīng)的數(shù)據(jù)庫，驗證用戶信息是否存在且正確。如果驗證成功，則進入一個留言板頁面，否則提示登

31、錄失敗。注冊時需要輸入用戶信息（用戶名、密碼、電子郵箱），用戶點擊注冊后，系統(tǒng)會判斷填寫格式是否正確，如果正確則將表單數(shù)據(jù)發(fā)送給后臺的數(shù)據(jù)庫，檢測用戶的賬號存在與否。如果不存在，則說明用戶此次注冊的賬號注冊成功，返回登錄界面。如果存在，就提示用戶此次注冊的賬號注冊失敗。用戶的登錄與注冊的設(shè)計實現(xiàn)，如下圖5.2-5.4所示：圖5.2 系統(tǒng)登錄界面圖5.3 系統(tǒng)注冊界面圖5.4系統(tǒng)用戶的登錄與注冊流程設(shè)計圖5.3 前臺功能模塊設(shè)計實現(xiàn)前臺模塊主要包含了首頁、作品介紹、人物介紹、番劇播放、精美壁紙、動漫資訊模塊，以及用戶的登錄與注冊、用戶留言模塊。5.3.1 首頁模塊首頁模塊包含導(dǎo)航和輪播圖、作品介

32、紹、壁紙圖冊、劇情介紹、人物介紹、新聞預(yù)覽、底部七個部分。系統(tǒng)首頁各個部分運行界面如圖5.5-5.11所示。圖5.5導(dǎo)航和輪播圖部分圖5.6作品介紹部分圖5.7人物介紹部分圖5.8劇情介紹部分圖5.9精美壁紙部分圖5.10動畫資訊部分圖5.11主頁底部部分5.3.2 作品介紹模塊作品介紹模塊向用戶介紹了動漫黑巖射手的出處和世界觀設(shè)計。作品介紹實現(xiàn)界面如圖5.12所示。圖5.12作品介紹模塊實現(xiàn)界面5.3.3 人物介紹模塊人物介紹模塊向用戶介紹了動漫黑巖射手中的主要出場人物。點擊人物頭像時，圖片會變?yōu)椴噬?，并有相對?yīng)的人物的介紹；未點擊則為灰色，人物介紹不顯示。人物介紹實現(xiàn)界面如圖5.13所示。

33、圖5.13人物介紹實現(xiàn)界面5.3.4 番劇播放模塊番劇播放模塊為用戶提供了視頻的觀看。點擊右側(cè)播放列表中的集數(shù)，可以切換至相對應(yīng)的集數(shù)。番劇播放實現(xiàn)界面如圖5.14所示。圖5.14番劇播放實現(xiàn)界面5.3.5 精美壁紙模塊精美壁紙模塊向用戶展示了從官方、動畫和手辦收集而來的壁紙。點擊按鈕可以選擇查看相對應(yīng)的壁紙。精美壁紙實現(xiàn)界面如圖5.15所示。圖5.15精美壁紙實現(xiàn)界面5.3.6 動畫資訊模塊動畫資訊模塊向用戶介紹了黑巖射手的相關(guān)資訊，分為最新資訊、動畫、游戲三個部分。點擊新聞時，能跳轉(zhuǎn)到該新聞的詳情頁面。也可以通過上方的位置鏈接從新聞詳情頁面跳轉(zhuǎn)回資訊列表頁面。動畫資訊實現(xiàn)界面如圖5.16-

34、5.17所示。圖5.16動畫資訊實現(xiàn)界面圖5.17動畫資訊詳情頁面實現(xiàn)界面5.3.7 用戶留言板模塊在用戶留言板模塊，用戶可以通過成功登錄來進入到留言板界面。留言時需輸入用戶名、電子郵箱和留言內(nèi)容，輸入完畢即可點擊提交發(fā)送至后臺管理員。用戶留言板實現(xiàn)界面如圖5.18所示。圖5.18用戶留言板實現(xiàn)界面5.4 后臺功能模塊設(shè)計實現(xiàn)管理員對用戶留言進行增刪查改等操作是此模塊主要實現(xiàn)的功能。該模塊的頁面實現(xiàn)如圖5.19所示：圖5.19房產(chǎn)信息管理模塊界面第6章系統(tǒng)測試6.1 測試概述系統(tǒng)測試是在指定條件下操作和測試系統(tǒng)以發(fā)現(xiàn)系統(tǒng)錯誤，測量系統(tǒng)質(zhì)量并評估其是否滿足設(shè)計要求的過程。此次項目中的系統(tǒng)的測試項

35、目分為功能測試、安全測試、可用性測試和兼容性測試。6.2 功能測試功能測試是指測試系統(tǒng)的各個功能是否可以正常運行。系統(tǒng)的功能測試如表6-1所示：表6-1 系統(tǒng)功能測試測試內(nèi)容測試結(jié)果用戶界面正常頁面鏈接正常用戶的登錄與注冊正常信息匹配正常用戶留言正常管理留言正常賬號注銷正常6.3 安全測試安全測試是指測試系統(tǒng)是否有潛在的安全問題。此次項目中的系統(tǒng)的安全測試如表6-2所示：表6-2 安全測試測試內(nèi)容測試結(jié)果系統(tǒng)登錄安全系統(tǒng)數(shù)據(jù)安全用戶認(rèn)證安全系統(tǒng)管理權(quán)限安全6.4 可用性測試可用性測試是產(chǎn)品上一組用戶的典型操作，而觀察者和開發(fā)人員則觀察，收聽和記錄。此次項目中的系統(tǒng)的可用性測試如表6-3所示：表

36、6-3 可用性測試測試內(nèi)容測試結(jié)果導(dǎo)航測試滿意圖形測試滿意內(nèi)容測試滿意整體界面測試較為滿意6.5 兼容性測試兼容性測試是指能否在用戶設(shè)備上有效運行。此次項目中的系統(tǒng)的兼容性測試如表6-4所示：表6-4 兼容性測試測試內(nèi)容測試結(jié)果平臺測試正常瀏覽器測試正常視頻測試正常6.6 測試結(jié)果分析通過對此次項目中的系統(tǒng)的分析測試，此次項目中的系統(tǒng)在功能測試、安全測試、可用性測試和兼容性測試上，均能達(dá)到預(yù)期的目標(biāo)，能夠交付用戶使用。第7章系統(tǒng)特色與創(chuàng)新7.1 系統(tǒng)的特色響應(yīng)式布局：響應(yīng)式布局是一種能夠在不同分辨率下自動變換界面的布局和結(jié)構(gòu)的布局方式，并且能夠合理分配系統(tǒng)內(nèi)容，以簡潔、有序為目標(biāo)，不會因為用戶

37、設(shè)備上不同的分辨率或者對窗口進行縮放時，界面顯得雜亂無章。在不同的分辨率下，用戶依然能夠得到較好的布局體驗。此次項目中的系統(tǒng)的響應(yīng)式布局如圖7.1-7.4所示：圖7.1 響應(yīng)式主頁輪播圖圖7.2 響應(yīng)式主頁人物介紹圖7.3 響應(yīng)式圖冊頁面圖7.4 響應(yīng)式新聞詳情頁面7.2 系統(tǒng)的創(chuàng)新現(xiàn)有的動漫宣傳網(wǎng)站在實際針對現(xiàn)有的動漫宣傳介紹網(wǎng)站類型單一、內(nèi)容繁復(fù)、重點不突出的情況，本網(wǎng)站主要在設(shè)計方面和功能方面進行了加強和改進。設(shè)計方面，界面簡單，提高響應(yīng)速度，但系統(tǒng)內(nèi)容豐富，重點突出；功能方面，增加了傳統(tǒng)動漫宣傳介紹網(wǎng)站所沒有的介紹、播放功能，并支持多種瀏覽器模式。1、系統(tǒng)的設(shè)計方面：（1）架構(gòu)設(shè)計：系

38、統(tǒng)首頁的架構(gòu)清晰明了，保持較好的通透性，減少用戶的瀏覽成本。（2）風(fēng)格設(shè)計：比較簡潔而且沒有阻礙的界面，這樣可以增強用戶對系統(tǒng)提供的信息內(nèi)容和服務(wù)的關(guān)注。（3）信息排布：減少資訊信息，增強系統(tǒng)的用戶體驗感受，讓用戶順暢瀏覽。（4）視覺順序：有順序的引導(dǎo)用戶瀏覽，增加頁面的視覺效果。2、系統(tǒng)的功能方面：（1）用戶的登錄與注冊功能：實現(xiàn)用戶登錄、注冊的功能，并檢測用戶賬號是否存在；（2）用戶的留言功能：實現(xiàn)前臺用戶對后臺管理員的留言功能；（3）用戶的留言管理功能：實現(xiàn)管理員根據(jù)需要對用戶的留言進行管理的功能；（4）在線播放功能：實現(xiàn)對視頻的在線播放功能；總結(jié)基于HTML5技術(shù)的動漫宣傳介紹網(wǎng)站的設(shè)計與實現(xiàn)，前臺運用到HTML5、CSS、JavaScript，后臺運用到PHP、MySQL。這是個人相對滿意的作品，系統(tǒng)簡潔不繁雜、操作簡單，但內(nèi)容豐富，能很好地起到宣傳介紹的作用。在前臺的配色和布局上，盡可能地還原了動漫原作的基調(diào)。但也有很多不足之處，比如因時間限制和選題限制，前臺方面，在特效上不夠酷炫；后臺方面，在功能上和界面上都顯得不夠完善。在完成此系統(tǒng)前，其實我