【基于HTML5的短视频网站的设计8300字（论文）】

基于HTML5的短视频网站的设计目次TOC\o"1-3"\h\u59171引言 1219271.1研究背景 1269521.2研究目的和意义 1312541.3文章内容概述 1307922系统需求分析 2288772．1系统可行性分析 2243522.1.1经济可行性 2145812.1.2技术可行性 2306482.1.3运行可行性 2262612．2系统功能分析 2104282．3系统非功能分析 3177942.3.1交互设计分析 3223262.3.2整体色调分析 3299432.3.3性能需求分析 3169682.3.4安全性需求分析 3186913开发环境介绍 33753．1MySQL数据库介绍 3266543．2SpringBoot介绍 4251723．3HTML5介绍 437473．4BootStrap介绍 421984在线短视频网站模型 4284304．1在线短视频网站程序流程 430394．2视频网站的数据库设计 574664.2.1数据库表的概念结构设计 5268174.2.2数据库表的逻辑结构设计 590985在线视频点播实现 617175.1管理员登陆后对用户进行管理 676925.2用户功能模块的实现 9253945.2.1系统主页面 9187415.2.2视频详情主界面 9127965.2.3管理员主界面 10137335.2.4视频详细信息输入界面 1013765.2.5个人信息界面 1120395.2.6用户端评论管理界面 11258656系统测试 12124835.1管理员登陆后对用户进行管理 12124075.2系统的具体测试 1296347结论 1521112参考文献 161引言1.1研究背景从改革开放以来，网络技术大幅度进步与发展，4G网络已经全面普及，社会已经进入5G时代，这足以证明网络信息日新月异的变化。在这种发展趋势下，短视频行业也迅猛发展，短视频做为一种新型的社交娱乐方式映入群众的生活中。短视频相比长视频内容简洁明了，短则数十秒，长则几分钟，在这个生活节奏日益变快的社会里，短视频更能高效的应用人们的碎片化时间，短视频是时代的产物。普通使用者甚至可以利用手机进行拍摄，大大减少了传播成本。人们可以用设备拍摄生活中的趣事与见闻，然后短视频作为一个载体在视频网站上传播，通过视频网站的筛选与播出，优质的短视频可以在短时间内火速传播，短视频使信息的传播更为便捷。然而，这样快速传播使得多种多样的网站和千奇百怪的内容被快速传播的出现。电子商务是个典型的案例，该系统的建立就是因为大众的需求，视频网站为他们建立了良好的渠道。中国的视频网站平台正在变得更加正规，这些平台大多使用的是简单明了的平台管理系统，而且这个系统是实时变动的，而实现这一功能主要基于其特殊的网络结构，通过这种网络能够实时动态对其他网络中的数据库进行检索访问，以来使用短视频网站。由目前国内外短视频发展状况，网络社交方式中短视频占了举足轻重，它能极大的满足用户，并且管理员也及其方便管理。1.2研究目的和意义在如今的工作生活当中，计算机的普及和网络的便利，使短视频能够高效有序的管理信息成了短视频的重要研究方向。鉴于上述情况，提出一种新颖的短视频网站，在数据交换的过程中运用密匙的方式加密，使得系统更可靠，更具有安全性。短视频网站提供了一个短视频管理和信息管理的平台供用户使用，为用户提供了一个良好的展示平台，使得自己所需要展示的东西，得到高效快速的传播，提高用户传播信息的积极性。本文设计与开发了基于HTML5的短视频网站，目的是为了建造一个现代化、高效化的视频网站，普通用户的信息可以被管理员随时随地的在线更改，实现了他们之间的信息衔接，相互关系在一起，使得人们在使用平台时更加便捷。总而言之，短视频网站具有巨大的发展前景。因此，短视频网站的开发顺应着现代网络的潮流。1.3文章内容概述基于HTML5的短视频网站设计与开发的系统，首先需要明确列明网站所需的功能。列出清单之后，检查与自己想要的有什么不一样或者是遗漏的功能，随后进行系统性分析，系统设计等，系统开发完后，进行系统测试优化该短视频网站信息管理。第一章：查找书籍资料，仔细说明系统的开发背景、系统研究目的和意义等。第二章：开发技术与环境，短视频网站设计所用到的相关技术介绍。第三章：主要是针对系统需求分析中的各个相关功能需求进行分析设计，包括各个功能模块的设计，以及对应不同功能模块的数据库表的设计，分析数据库设计中的结构设计。。第四章：主要是针对系统需求分析中的各个相关功能需求进行分析设计，包括各个功能模块的设计，以及对应不同功能模块的数据库表的设计，分析数据库设计中的结构设计。第五章：介绍系统需求分析中的各种功能需求一一实现，达到需求分析中的运行效果。第六章：对系统测试进行详细描述，介绍系统测试的基本理论和测试方法，并结合该系统的功能实现给出了各个功能点的详细测试用例。第七章：是对整篇论文的总结以及开发过程中的收获和心得。2系统需求分析2．1系统可行性分析2.1.1经济可行性初期短视频网站网站的建设成本不高，随着短视频网站经济的蓬勃发展，未来电子视频的大众化普及程度的提升，短视频网站市场即将和正在不断壮大的商机是不容小觑的，而人工后期对于网站投入的维护成本相比与巨大的利润相比是微不足道的，因此开发短视频网站的可能很大。2.1.2技术可行性我国计算机行业发展日益迅速，电子支付的普及程度越来越高，关于网上支付的技术越来越发达，无论是硬件还是软件方面开发电子商务网站都具有很强的可行性，且本人选择的MySQL数据库，数据安全性高，结合Java技术，打造一个可满足大多数人需求的短视频网站的技术可行性是很强的。2.1.3运行可行性基于HTML5的短视频网站的设计系统界面一目了然，功能明确，用户使用不存在任何操作上的问题。本系统不存在任何触犯法律的地方，因此具有很强的法律可行性。系统编写正常且完整，使用流畅无任何障碍，具有操作可行性。2．2系统功能分析本系统分为管理员和用户两个角色。用户可以登录网站首页，浏览电影列表，查看电影预告与详情，查看收录的短视频网站以及查看最新电影动态等；管理员负责系统的电影预告与详情管理，网址信息的管理，友情链接的管理，收录的电影管理以及最新电影动态的管理。2．3系统非功能分析2.3.1交互设计分析交互设计是以用户为目标的设计，而第二用户是所有交互设计中的最高优先级，所有的设计都是以用户为中心的，通过设计用户的动作，交互设计师能让用户更加方便快捷的完成产品业务目标，让用户能够拥有更好的体验。2.3.2整体色调分析由于本人开发的是视频播放系统，在系统开发的过程中应当重点关注整体色调是否统一，为显示出简洁大气的特点，本网站背景主色调大都采用单一色彩作为背景，并摈弃掉杂乱无章的部分。2.3.3性能需求分析在准确性方面，输入用户名和密码，密码应当被隐藏。页面与页面之间的跳转需要准确。系统处理时间不宜过长。系统界面应当简洁明了，操作简单。用户输入搜索词时，就可以搜索到想要的信息。2.3.4安全性需求分析系统需要有较强的安全性来保证用户和管理员信息的不被泄露，系统安全性的需求是一定要满足的。3开发环境介绍本系统架构为SpringBoot+SpringMVC+Mybatis+Themeleaf+Jpa+html（ssm架构）；数据库：Mysql；开发语言：HTML5前台使用bootstrap框架。本系统的特点：在启动项目时，能够自动建库、建表、建字段，若需要在对象中添加新的属性，则添加字段即可，数据表会自动新增字段。3．1MySQL数据库介绍MySQL是一款安全、跨平台、高效的，并与PHP、Java等主流编程语言紧密结合的数据库系统。该数据库系统是由瑞典的MySQLAB公司开发、发布并支持，由MySQL的初始开发人员DavidAxmark和MichaelMontyWidenius于1995年建立的。MySQL被广泛地应用在中小型网站。因为其拥有体积小、速度快、总体拥有成本低、开放源码的特点，尤其是开放源码这一特点，使得众多公司选择MySQL数据库以降低成本。MySQL具备以下特点：功能强大、支持跨平台、运行速度快、支持面向对象、安全性高、成本低、支持各种开发语言、数据库存储量大、支持强大的内置函数。3．2SpringBoot介绍SpringBoot基于4.0的设计，拥有原版框架所具有的突出特点。同时它还集合了许多其他的框架。结合这些框架，在实现原有功能的基础上完善了因依赖包的版本不一致所导致的矛盾，同时还处理了使用操作不稳定等故障。其运行容易，并且内置tomcat，因此不用再额外地配置tomcat便可启动项目。3．3HTML5介绍该语言具有标识作用。许多标签存在于该语言内，并且这些标签具有至关重要的作用。现如今存在各式各样的文档格式，该工具能够将这些不同的格式保持一致。此外，该语言还具有将散开的资源凝聚成一个更具逻辑性的整体的能力。在开发网页时，大多数情况下都会依靠HTML命令对动态文件，音乐，文档等内容来进行描述。3．4BootStrap介绍Bootstrap被用来开发前端，拥有着精简、强大等优异的特点。具有快速地建立网页的功能。在国内，许多程序员在开发网站时所用到的框架，都是在Bootstrap源码的基础上将其功能方面进行了改良。4在线短视频网站模型4．1在线短视频网站程序流程短视频网站的流程图，如图1所示。首先，打开系统的主界面，并进行登录；如果用户已有账号可直接登录，并进行相关的操作；如果没有账号，就注册并登录；倘若是管理员登录该系统，则进入相对应的系统界面，接下来就可以进行相关的操作。图1短视频网站的程序流程图4．2视频网站的数据库设计4.2.1数据库表的概念结构设计在整个系统设计的过程当中，最关键的便是数据库的结构设计。它关系着程序最终是否能够达到用户满意的结果。由于此系统总体上分为用户端和管理员端两大模块，且这两大模块有公用的数据。出于增加系统的运行速度的目的，同时也要确保用户在操纵时数据的安全和完整。该系统所设想的系统数据库表，主要包括以下五个实体：视频、评论、用户、评论以及社区，每一个实体都表示数据库里的一个表，表与表之间都是有关系的，因此实体之间也是有关系的。4.2.2数据库表的逻辑结构设计在整个系统设计的过程当中，最关键的便是数据库的结构设计。它关系着程序最终是否能够达到用户满意的结果。该系统利用了MySQL来存储用户，视频，评论以及管理员的信息。由于其体积小、速度快、总拥有成本低，为了降低网站的总拥有成本，本系统选择MySQL作为网站数据库，表的具体设计如表1~表4所示。表1用户信息表字段名字段描述字段类型长度userName用户名varchar255password密码varchar 255lastLoginTime上次登陆时间datetimesex性别varchar 255email邮箱varchar 255love爱好varchar 255sign个签varchar 255image头像varchar 255表2管理员的信息表字段名字段描述字段类型长度adminName用户名varchar255password密码varchar 255lastLoginTime上次登陆时间datetime表3评论人信息表字段名字段描述字段类型长度userName评论人varchar 255userId评论人IDlong20image评论人头像varchar 255commentName标题/音乐名varchar 255commentIdIDlong20commentContent内容varchar 255type评论类型varchar 255表4视频的信息表字段名字段描述字段类型长度musicName标题名varchar 255image视频封面varchar 255path视频路径varchar 255musicStyle视频风格varchar 255thumbsNumber点赞数int10fxdate发行日期varchar 255musicLry描述varchar 255thumbsUserName点赞用户idvarchar 2555在线视频点播实现5.1管理员登陆后对用户进行管理部分功能代码如下：packagecom.base.action.manage；importcom.base.config.Global；importcom.github.pagehelper.PageInfo；importjava.util.Arrays；/***CreatedbyAdministratoron2021/9/10.*/publicclassUseControl{@AutowiredprivateUseServiceuseService;@GetMapping(value="/add")publicModelViewadd(ModelViewmv,Stringid){mv.addObject("obj",newUse())；mv.setnewName(Global.manager+"useAdd")；if(id!=null){//编辑Useobj=this.useService.getOne(Long.parseLong(id))；mv.addObject("obj",obj)；}returnmv；}@PostMapping(value="/save")publicModelViewsave(ModelViewmv,Useuse,@RequestParam("imgfile")MultipartFileimgfile){ if(!imgfile.isEmpty()){ StringimagePath=CommUtil.uploadFile(imgfile)； user.setImage(imagePath)； } this.useService.save(use)；StringreturnUrl="/manage/use/List"；mv.setnewName("redirect:/success?url="+returnUrl)；returnmv；}@GetMapping(value="/delete")publicModelViewdelete(Stringids,ModelViewmv){Arrays.asList(ids).stream().forEach((item)->{if(!StringUtils.isEmpty(item))this.userService.delete(Long.parseLong(item))；})；StringreturnUrl="/manager/user/pageList"；mv.setViewName("redirect:/success?url="+returnUrl)；returnmv；}@GetMapping(value="/pageList")publicModelViewList(ModelViewmv,StringcurrentPage,Useruser){mv.setnewName(Global.manage+"useList")；PageInfopageInfo=this.userService.pageList(currentPage,use)；mv.addObject("pageInfo",pageInfo)；returnmv；}/***查看详情**@parammv*@paramid*@return*/@GetMapping(value="/detail")publicModelViewdetail(ModelViewmv,Stringid){StringreturnUrl="/manage/use/List"；mv.setnewName("redirect:/error?url="+returnUrl+"&msg="CommUtil.encodeUtf8("数据不存在"))；if(id==null){returnmv；}Userobj=this.userService.getOne(Long.parseLong(id))；if(obj==null){returnmv；}mv.setViewName(Global.manager+"userDetail")；mv.addObject("obj",obj)；returnmv；}}5.2用户功能模块的实现根据对现实中部分用户的基本需求分析，本系统总体上分为用户端和管理员端两部分，用户使用用户端实现歌曲浏览、下载和点赞，管理者使用管理员端进行歌曲的上传。5.2.1系统主页面用户浏览的视频播放器主界面如图2所示：图2系统主界面此页面的服务对象是所有浏览该页面的用户，因此当用户浏览该页面时，无需注册登录，只需跟随自己的喜好进行浏览，为了提高用户的使用率，增加潜在用户，此系统主页面免费模块的视频可以供所有用户免费浏览观看。5.2.2视频详情主界面用户浏览的视频详情主界面如图3所示：图3视频详情主界面当用户点击视频作品后，该系统即可进入对应视频的概况页面，用户可在该页面观看视频、下载视频、评论视频以及点赞该视频。为了保护已注册系统的用户的利益，系统的视频谈论、下载视频、点赞视频和部分视频观看仅限已注册系统的用户使用。因此为了区分访问者和系统用户，用户在操作此页面时需要登录。为了增加使用该系统的用户数量、提高访问量，该系统为游客提供了注册服务，当游客希望成为该网站的用户时，只需点击注册按钮输入相应数据，即可完成注册。考虑到用户的数量可能会非常庞大，为了便于用户数据储存与使用，系统对用户的身份做了唯一标识，但为了方便用户登录该系统，因为用户在注册时需要注册不同的用户名，以便于系统对用户进行标识。5.2.3管理员主界面管理员主界面如图4所示：图4管理员主界面管理员应当输入准确的账号以及密码，才能成功地登录管理的菜单页面，之后便可以在该页面的系统菜单里进行操作。管理员可在这个界面进行视频详细信息的输入、查看用户的评论是否合理、处理用户的具体消息及其个人账号的处理。当管理员输入的管理员名和密码错误时，则管理员需重新输入，直到页面显示登录成功为止。由于管理员端的主要操作为视频详细信息的输入和用户评论信息的查看两部分，因为其余的设计也较为简单。5.2.4视频详细信息输入界面管理员在管理员端主页面，点击视频添加按钮，即可进入视频详细信息输入主界面，具体页面如图5所示：图5视频详细信息输入界面在这个页面上管理员需输入具体的视频信息，待所有的视频信息输入完成后，管理员通过点击提交按钮即可完成对应视频信息的发布，待数据存入数据库中后，用户可在此系统的主页面上浏览到该视频的信息，若用户喜欢该视频，通过点击该视频进入详情页面，观看管理员最新上传的视频。管理员可以通过点击视频列表按钮，进入视频列表页面，查看刚刚发布的视频中的所有信息，为了方便管理员，系统在页面中设计了视频的删除、修改功能，如果管理员对刚刚发布的视频中的具体信息不满意，单击“修改”按钮并进入“修改”页面。5.2.5个人信息界面用户在登录后可以在个人信息页面修改自己的用户名，邮箱，密码等。具体的页面如图6所示。图6个人信息界面为了便于用户进行注册，用户注册时只需输入用户名、密码、电话以及验证码，即可完成注册。通过数据调查，很多用户在注册完成之后，会对自己的个人信息进行一定的修改，为了提高用户对此程序的使用频率，该系统在总体设计时，也设计了同样的功能模块。5.2.6用户端评论管理界面用户在对应的视频页面下，发布完所编辑的评论后，若无不当评论，即可在评论管理界面看到自己发布的所有评论，具体的页面如图7所示。图7用户端评论管理界面为了方便用户对所观看的视频进行评论，具体的评论框表设计在视频的下端，用户只需在评论框中输入自己想要评论的信息后，只需点击提交按钮，即可发布完成。由于此系统并未在整体编写的代码中编写，自动识别不合语义的评论并显示输入不合法语言，因此用户的评论是否符合当前网络环境规范，均需管理员对其进行查看，待管理员查看完毕，用户的评论无不当，即可显示在视频详情页面之中。6系统测试5.1管理员登陆后对用户进行管理一是保证系统质量。系统测试最主要的目的就是保证系统的总体质量，确保用户的各种需求功能可以正常使用，尽可能避免在用户使用高峰期时，出现服务器被突然挤爆，用户不能正常使用系统的情况。二是确保系统安全。无论用户如何进行操作，外界如何攻击该系统，都要确保该系统的所有用户信息不会被非法盗取。为了提高数据的安全性，系统还对部分数据进行了加密。三是为了降低系统的开发成本。提高用户的使用效率，增加使用该系统的用户数量，此系统目前的所有视频供所有用户和游客观看。为了降低开发的成本，主要是穿插一些小广告在用户浏览的所有页面之中。5.2系统的具体测试此系统以实用性为主要点，功能设计简单明了，便于目前浏览网页观看视频的各种年龄段用户进行使用和操作。由于整体设计简洁，功能模块划分明确，因此目前设计的所有功能均已通过单元测试，出现的软件和硬件错误较少，为了尽可能的减少软件运行时出错的机会，本文对此系统做了一定的测试，以保证使用者的使用，基本的测试流程如下所示：（1）登录注册，对用户登录注册和管理员登录注册的错误和正确性进行测试，检查输入的错误信息是否可以成功登录或注册。（2）通过输入给定的IP网址进入系统首页，查看主页面的菜单栏信息是否显示成功，用户注册与登录按钮是否可以点击成功，视频概况页面是否可以打开。（3）视频详情页面，随意输入评论信息点击提交按钮查看是否可以发布成功；点击点赞按钮是否可以点赞成功；点击下载按钮，视频是否能下载成功。（4）评论界面，用户评论后，管理员端、用户端以及浏览器页面上是否能够查看到具体的评论信息。（5）个人信息界面，用户登录用户端的页面后，是否可以查看到自己输入的个人具体信息。（6）视频详细信息输入主界面，管理员在视频详细信息输入主界面输入具体的视频信息后，用户是否可以在主页面查看到具体的视频信息。根据上述测试流程图，在系统管理员和用户的系统都正确启动的情况下，本文根据现实情况设置了一定的测试用例，具体的测试用例如下：在线短视频网站等价类划分如下表5所示：表5视频网站的等价类划分输入条件有效等价类无效等价类用户输入对应的账户和密码用户名和密码正确（1）用户名和密码错误（2）管理员输入对应的账户和密码用户名和密码正确（3）用户名和密码错误（4）管理员对视频信息的提交填入数据有效（5）填入数据无效（6）用户对评论信息的提交填入数据有效（7）填入数据无效（8）用户对视频的点赞点赞成功（9）点赞失败（10）用户对视频的下载下载成功（11）下载失败（12）管理员对视频的删除删除成功（13）删除失败（14）用户主动点击退出按钮退出有效（15）无管理员主动点击退出按钮退出有效（16）无分别使用管理员账户和用户账户登录成功后，进入视频网站系统，对登录后的界面进行功能测试，具体的测试用例如下表6所示：表6界面功能测试用例功能名称操作的目标信息用例覆盖等价类界面提示操作结果测试结果登录（用户名who）密码：1234567890（1）登录成功登录成功通过登录（用户who）密码：123456（2）登录失败，账号或密码错误登录失败通过登录（管理员admin）密码：1234567890（3）页面跳转，进入主页登录成功通过登录（管理员admin）密码：xxxxxxx（4）登录失败，账号或密码错误登录失败通过添加视频信息添加正确用户信息（5）提交成功增加成功通过添加视频信息不输入任何信息，并点击提交按钮（6）提交失败增加失败通过添加评论信息添加正确垃圾信息（7）提交成功增加成功通过添加评论信息不输入任何信息，并点击提交按钮（8）提交失败增加失败通过点赞点击点赞按钮（9）点赞数量加一点赞成功通过点赞点击点赞按钮（10）点赞数量不变点赞失败通过下载视频点击下载按钮（11）有下载显示下载成功通过下载视频点击下载按钮（12）无下载显示下载失败