动漫社区网站分析与设计

目录10023目录 摘要动漫文化是视觉时代的重要文化形态之一，它是21世纪人文快速发展下科技、艺术、思想的高度融合。一部令人津津乐道的动漫，它的画面，音乐，内容大都是深入人心的。恰如宫崎骏老师的《天空之城》。像大多数的80后甚至90后小的时候接触动漫往往是通过观看电视节目和光盘。由于电脑和网络在我国的普及程度度越来越高，人们可以更快更好的从因特网上获取到自己想要看到的视频。为了跟随潮流，动漫文化自然也应当与互联网向结合。这样，可以进入更多人的视野也更易被获取。动漫文化类型的网站自然应运而生。关键词：动漫；网站；设计

一、引言（一）分析与设计目的目前网络上已经有如天涯、知乎、微博、百度贴吧之类的平台供人们交流讨论着社会上的种种，也有如哔哩哔哩、ACFUN这样的年轻人文化娱乐社区。但少有专为动漫文化爱好者、动漫产业者提供的双向交流平台。本课题则基于此需求，拟设计一个动漫社区网站，为广大动漫人士提供最新的动漫资讯以及动漫文化思想碰撞的平台，这也是本次设计的目的。（二）分析与设计意义动漫社区网站可以加深大家对动漫文化的了解，促进动漫文化的发展，推进动漫产业的进步和升级。在国家机器的政策推动下，随着我国动漫产业整体开花的局面变好，之类的网站将受到更多人的欢迎，创造更多的经济和文化价值。于我个人而言，我本身是个动漫文化爱好者，能完成这类网站的设计和实现对于我而言是一件十分愉悦的事。不仅如此，这次独立自主的完成设计开发，也让我深切体会到了书本上所提到的软件项目开发的种种问题，加深了项目开发的认知。当然，编码技巧上也有了极大的提升，对于如何提高自己的编码质量有了一定的明悟。二、系统功能分析与设计（一）相关技术理论1.SublimeText3SublimeText3是时下H5网站及App开发的先进的文本编辑器。最初的SublimeText是在2008年1月份由程序员JonSkinner开发出来的。SublimeText3不仅具有漂亮，简介，易操作的界面，还向用户提供了许多强大的功能。SublimeText3的主要功能包括多选择，多窗口，自定义键绑定，代码缩略图，即时项目转换等。SublimeText3是一个跨平台的编辑器，同时支持多个操作系统，是项目开发的强有力的工具。2.NavicatforMySqlNavicatforMySql是一款强大的数据库管理，开发及维护的专为MySql设计的软件开发工具。NavicatforMySql在某种意义上可以称为前端开发软件，它不仅功能齐备包含触发器，存储过程，检索，函数，事件等，还提供了直观而强大的图形界面。NavicatforMySql的出现，大大降低了软件开发的成本，提高了开发的效率，一定程度上解放了PHP，J2EE等开发程序员的大脑。（二）可行性研究1.技术可行性分析本网站是使用成熟的H5技术合集来搭建网站页面和功能模块。使用目前广受欢迎的前端框架Bootstrap来架构页面，并且完成部分页面功能。采用AngularJS负责构建部分页面应用程序。使用AJAX+PHP+MySql三者联结的方式完成前端与数据库的信息交互，不仅节约带宽，还可以减轻服务器压力，将一些简单的功能运算移交到客户端。本网站设计关键技术简介如2.2.1，2.2.2及2.2.3所示。（1）JavaScriptJS在最初被创造的时候，本意是希望其能够如java一般，人们比较中意的是语言当中的函数式。可是最后完成的时候，就函数脚本语言的风格角度而言，JS更类似于C语言的风格。就发展到目前而言，JS是时下所有主流浏览器唯一支持的脚本语言。而体现在本网站的开发设计中，JS的作用就是网站可以在一些情况下不与服务器产生数据交流而能动态的改变我们网站的页面内容也就是DOM。（2）H5在这里需要明确一点，本文中说的H5不等于HTML5.HTML5是一个目前网络上应用的最新的也最为广泛的超文本标记语言。本文的H5实际指的是一个web网站开发技术合集，当然，在现实工作中也可被理解为一类产品。而体现在本网站的开发设计中，H5的主要作用就是通过使用其中的与多媒体特性相关的技术也可以说是标签来替代AdobeFlash。（3）PHP在本网站开发中PHP并未有过多复杂的算法逻辑，也没有使用PHP相关框架。本网站主要通过Ajax+PHP+MySql三方联动配合的方式来完成前后端的数据交互，体现网站的动态运行。2.经济可行性分析随着动漫产业在我国的飞速发展，借助互联网这个平台。本类网站足可以吸引到足够的受众。由此，无论是视频会员机制或是广告位机制等一系列时下视频网站获取经济利益的方式在足够的受众群支持下都可以逐步实行。不仅如此，随着网站的运营和升级还可以不断的融入新的元素，诸如线上线下活动，网上购物，虚拟世界，游戏竞技等等。在互联网流量，广告变现，个性化服务等一系列增值服务的盈利模式下，去除视频版权费支出，网站依然可以获得不俗的盈利。3.操作可行性分析本网站的页面提示较为丰富，导航栏，标题，按钮等页面元素命名贴近功能本意。页面的操作简单，快捷，方便。用户可以根据页面的提示和相关小功能即便不使用用户手册也能对页面进行相关许可内的操作。所以本网站具备操作可行性。4.环境可行性分析该站点开发及测试环境为Windows10，谷歌浏览器，SublimeText3，NavicatforMySQL，WampServer64开发成功并测试成功。本网站具备一定的环境可行性。三、数据库及数据表分析和设计（一）用户角色分析根据网站设计需求规划，系统用户主要分为两种角色：网站用户，网站管理员。网站用户可以在网站进行注册登录。用户登入网站后可以浏览不同种类的动漫视频，获取网站最新的推送视频资源。用户在观看完视频后还可以做出点赞，收藏，关注UP主，评论视频等操作。用户拥有属于自己的个人空间，可以在个人空间里发表日志，查看收藏视频，查看关注UP主，查看自己的投稿等。网站管理员主要负责日常的网站运营维护等工作。网站管理员需要审核用户的视频投稿，在确认视频没有违法违纪的内容后将视频加入网站视频库。（二）功能板块划分本网站的功能模块大致分为六个部分。六个功能模块分别是用户登录注册模块，动漫资讯推送功能板块，视频播放功能板块，用户评论区功能板块，视频搜索功能板块，用户个人空间功能板块等。（三）网站用户系统网站用户功能模块主要分为：登录注册，获取推送，观看视频，发表评论，搜索视频，发表日志，进行投稿等。1.登录注册用户注册账号，设置个人id。2.获取推送用户在浏览网站页面内容时，可以根据页面提示获取网站推送的视频资源。3.观看视频用户可以观看自己喜爱的视频资源。4.发表评论用户可以在观看完视频后作出自己的评论，发表感想。5.搜索视频用户可以通过视频名字的关键字查询视频，获取视频资源。。6.发表日志用户拥有自己的个人空间并可以在自己的个人空间里发表日志。7.进行投稿用户可以制作或搬运视频通过网站提供的方法进行视频投稿。8.管理员系统网站管理员主要负责网站的日常运营维护以及审核投稿，更新视频库。管理员需要在确认视频投稿中没有违法违纪的内容之后才可以将视频更新进数据库。（四）数据流图及流程图网站设计系统总流程图如图3.1所示图3.1系统总流程图（2）网站设计顶层数据流图图3.2网站设计顶层数据流图（3）用户功能数据流图如图3.3所示图3.3用户功能数据流图（4）网站管理员功能数据流图如图3.4所示图3.4网站管理员功能数据流图四、界面分析与设计（一）概述本网站使用SublimeText3作为主要开发工具，使用H4相关技术完成前端设计，使用Ajax和PHP完成前后台数据库数据交流，使用Mysql存储数据。（二）登录注册模块登陆注册界面如下图4.1，4.2所示图4.1用户注册界面图4.2用户登陆界面在注册页面中，用户可以在页面使用自己的邮箱地址创建自己的账号密码并且注册自己的独有昵称。注册成功后，用户可以在登陆页面输入邮箱账号和密码经后台验证无误后进入主页面。部分代码如下。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;}}（三）资讯推送模块网站主页面如下图4.3，4.4所示。图4.3网站主界面图4.4网站主界面用户进入网站页面后可以看到丰富的视频推送信息。用户可以通过链接进入动画，娱乐，文章，音乐，游戏，动漫商们等各个页面浏览网站推送。此外，用户可以点击“换一批”按钮来更新推送，获取其他的推送视频。部分代码如下$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视频播放界面用户通过页面传值链接进入视频播放页面。用户可以播放视频，还可以通过提供的按钮来调节视频播放界面。部分代码如下。<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>（五）用户评论模块用户评论页面如下图4.7所示。图4.7用户评论界面用户可以在观看完视频后在播放页面的下面发表自己的观后感言并浏览其他用户的评论。部分代码如下<divid="talk"><divclass="tk1"id="tk4"></div><divid="tk2"><textareaid="tk3"type="text"placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情，暴力，反动的言论"></textarea></div><divid="tk4"onclick="fb()">发表</div></div>（六）视频搜索模块视频搜索页面如下图4.8所示。图4.8视频搜索界面用户可以在页面商的搜索框输入关键字通过关键字查询进入视频搜索页面。在视频搜索页面，用户可以看到在不同视频分类下的与关键字相关的视频。部分代码如下。$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'];}（七）个人空间模块个人空间页面如下图4.9所示。图4.9个人空间界面用户可以个人空间中发表日志以及管理自己的关注区，收藏区，投稿区。部分代码如下<ulid="myTab"class="navnav.tabs"><liclass="active"><ahref="#home"data.toggle="tab">我的空间</a></li><li><ahref="#gz"data.toggle="tab">我的关注</a></li><li>