欢迎来到淘文阁 - 分享文档赚钱的网站! | 帮助中心 好文档才是您的得力助手!
淘文阁 - 分享文档赚钱的网站
全部分类
  • 研究报告>
  • 管理文献>
  • 标准材料>
  • 技术资料>
  • 教育专区>
  • 应用文书>
  • 生活休闲>
  • 考试试题>
  • pptx模板>
  • 工商注册>
  • 期刊短文>
  • 图片设计>
  • ImageVerifierCode 换一换

    基于HTML5技术的娱乐资讯追星网站设计与实现.docx

    • 资源ID:48544398       资源大小:1.72MB        全文页数:47页
    • 资源格式: DOCX        下载积分:28金币
    快捷下载 游客一键下载
    会员登录下载
    微信登录下载
    三方登录下载: 微信开放平台登录   QQ登录  
    二维码
    微信扫一扫登录
    下载资源需要28金币
    邮箱/手机:
    温馨提示:
    快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。
    如填写123,账号就是123,密码也是123。
    支付方式: 支付宝    微信支付   
    验证码:   换一换

     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    基于HTML5技术的娱乐资讯追星网站设计与实现.docx

    本科毕业设计(论文)基于HTML5技术的娱乐资讯追星网站设计与实现Design and implementation of entertainment information tracking website based on HTML5 technology院 (系)计算机科学与技术系专 业数字媒体技术班 级数媒技术4班学 号16210320432学生姓名梁洁森指导教师李志中提交日期2020年 4 月 13 日摘要本网站制作主要使用HTML5语言结合Java程序设计语言、MySQL数据库和Mybatis技术进行动态网站的设计与开发,采用流行的B/S系统模式和Tomcat服务器。该网站的设计开发实现模块化,前台与后台明确分开,网站页面实现和业务逻辑实现均要在服务器运行实现。对之后网站的维护或者二次开发提供了方便的条件。在开发过程中,对数据库的连接、后台数据的处理和管理、网页的设计以及相关工具和网站的整体运行的环境配置,都体现了在大学专业课上所学到的大部分基础知识的重要性。该网站的前台的功能有:用户的登录注册、首页的信息浏览、分享评论、留言等面向客户的功能;而后台功能主要是面向网站前后端的管理员,后台功能有:后台的权限管理、用户登录注册管理、评论管理、留言管理等等。为使用的用户提供一个方便、简捷的信息获取以及可互动交流的娱乐资讯网站,简单易用。本文撰写该网站的设计与开发与实现过程。关键词:娱乐资讯 HTML5 JAVA MySQL TomcatAbstractThis website mainly uses HTML5 language combined with Java programming language, MySQL database and Mybatis technology to design and develop, and adopts the popular B/S system mode and Tomcat server .The design and development of the website is modular, the front-end and the back-end are clearly separated, and the data logic used for the website page is implemented in the background of the server.It provides a convenient condition for the maintenance or secondary development of the website.In the process of development , the connection of database , the processing and the management of background data , the web page design as well as the related tools and the website overall movement environment disposition, all reflect the importance of most of the basic knowledge learned in the course of college major.The front-end functions of the website include: user login and registration, home page information browsing, sharing comments, comments and other customer-oriented functions;the background functions are mainly for the front and back end of the site administrator, background functions include: Backstage Permission Management, user login management, comments management, message management, and more.For the user to provide a convenient, simple access to information and interactive entertainment news website, simple and easy to use.This paper describes the process of the design, development and implementation of the website.Keywords:Entertainment news HTML5 Java MySQL Tomcat目录第1章 绪论11.1 选题背景及意义11.2 课题研究的目的11.3 设计方法与实施方案2第2章 开发工具和技术简介32.1 Eclipse简介32.2 HTML5及JSP32.3 MySQL数据库及其可视化工具简介42.4 B/S结构42.5 SSM框架6第3章 网站系统需求分析73.1 可行性分析73.1.1 经济可行性73.1.2 技术可行性73.1.3 运行可行性73.2 网站系统功能需求分析73.3 网站系统流程设计93.4 网站系统运行环境11第4章 网站系统设计124.1 系统架构设计概述124.2 系统技术架构设计124.3 网站系统边界图134.4 数据库设计144.4.1 e-r图144.4.2 物理结构设计16第5章 网站系统实现185.1 系统主要功能185.2 系统各个功能模块实现185.2.1 数据库连接设计实现185.2.2 登录设计实现195.2.3 前台功能模块设计实现205.2.4 后台功能模块设计实现22第6章 网站系统测试246.1 功能测试246.2 安全测试246.3 用例测试256.4 测试结果分析26第7章 网站特色和创新277.1 网站特色277.2创新功能27第8章 结论29参考文献31致谢32广东东软学院本科毕业设计(论文)第1章 绪论1.1 选题背景及意义网络和信息科技的发展迅猛,如今绝大多数人都会用互联网进行信息的获取,在有网络的地方,我们通过身边的智能终端就能随时随地,可以快速浏览各种新闻资讯及数不尽的其他信息。同时信息技术在生活的方方面面都有很多的应用,也随着生活水平的提升,人们会有更多的精神需求和追求。从二十几年前简陋设计和功能的HTML网页网站开始,一步步演变转换扩展,不断进步,都是为创建良好的用户体验,现在的网站变得越来越多样,开发技术越来越好。信息技术在各种行业资讯输出的利用和人们对资讯获取的需求,随之各种资讯平台层出不穷;同时随着国内外明星娱乐行业的不断发展,粉丝获取自己喜欢的明星偶像及一些娱乐资讯也成了生活的重要组成部分。现在追星现象是很普遍的,在身边的同学朋友多少都有自己喜爱的明星偶像,会使用手机、电脑等电子设备通过不同渠道去关注他们的资讯,通过微博、微信和今日头条等平台获取。开发该网站是因为目前很少网站只专注于娱乐资讯并有用户交流模块。因此,开发一个针对用户对娱乐资讯获取和用户可以进行交流的娱乐资讯平台具有实际的研究意义。网络上的资源在早期只有静态的Html技术实现的静态页面,后来能够通过PHP、Jsp和Asp的动态web资源开发技术实现可交互的动态网页。通过浏览器/服务器结构模式和Web动态网站开发技术,让用户能获取信息同时能进行分享交流的交互体验。娱乐资讯追星网站页面布局设计清晰,以用户为中心,为用户提供娱乐资讯和明星偶像的信息获取 ,同时也提供用户分享交流。做出一个能快速阅览明星娱乐资讯,给用户提供一个便捷的体验。通过基于HTML5及其他技术开发的资讯网站,为用户推送明星娱乐资讯,给予用户一个方便的娱乐资讯获取和交流的平台,同时倡导用户理智追星!1.2 课题研究的目的现在是信息技术时代,互联网的普及,网络科技的高速发展,绝大部分的人都会通过电脑手机等终端获取信息,与传统信息传播媒体相比,更方便、快捷,环保,也满足人们对快速变化的信息的好奇心。生活水平的不断提高,人民对精神娱乐的追求也不断增加,同时还有娱乐文化发展相关,通过网上进行本课题相关的问卷调查,人们追星现象也越普遍化,对明星的新闻资讯花边信息需求增加;即便不追星,在茶余饭后无聊时也可能聊一下明星娱乐八卦的。在进行了问卷调查结果的对象里学生占86%左右,还有网上的一些有效调查数据显示,追星也多在18-25年龄阶段,结合身边的情况可以得到结论,因为多数在校留宿,很少看电视播放的资讯,他们通过笔记本、电脑和手机等上网,而学生也是网络高使用率人群,同时也是追星、或喜欢看娱乐新闻或爱看八卦的人群,为了解相关的明星近况或娱乐资讯,有这方面的心思和时间进行资讯浏览。为此,也针对资讯类网站的发展趋势,为用户开发一个方便的娱乐资讯追星网站是可行的。很多资讯网站都是以客户接收信息为主,而开发该网站不仅能进行资讯的浏览查阅,设计一个好的网站该有的特点:交互;互动性和交流性是现在动态网站开发重要特性;不能只是提供用户单一的资讯浏览,可以更新,还要能交互,所以本网站会实现用户可进行评论和分享交流的留言功能。浏览信息后可以在分享页面分享图文信息或发表评论,体现网站可扩充性:用户可以进行内容输入,大量的数据要对数据库输入。资讯会通过聚合数据的api随机更新,开放平台,让用户也能进行信息更新,让网站呈现出一种动态的变化之中,响应式和互动型的网页会给用户一个不错的体验,这样才能够跟好地吸引人气。1.3 设计方法与实施方案网站结构设计方案:使用Eclipse软件进行编程。在设计方案中采用B/S模式(浏览器/服务器模式),该结构在后期功能的拓展和运营维护中比较简单、快捷,只需要增加或更改网页;该模式还统一了客户端,核心的部分集中在服务器上,简化了系统的开发、维护和使用。操作系统:Windows 10家庭版操作系统数据库:MySQL,用该数据库进行数据存储,运行速度快且体积小,小型的数据管理系统适用于个人开发的小网站,而且该数据库具有很高的安全性。开发工具:Eclipse。开发语言:HTML5、Css、Java、JavaScript、SQL语言。开发技术:HTML5、JSP、mybatis。服务器:Tomcat。第2章 开发工具和技术简介2.1 Eclipse简介Eclipse是基于Java的可扩展开发平台,是Java的集成开发环境,就其本身来讲,它只是一个框架和一组服务的自由IDE开发环境,也可以支持如C#/C+等的编程语言的集成插件,它对Java环境具备针对性的功能优势,可以在其开放源码的基础上,还可以使用其他需要和下载好的开发语言的插件,灵活性高。安装Eclipse之前要先在电脑安装了JDK,配置好开发环境,因为JDK是Java语言的软件开发工具包,包含Java的运行环境和Java工具,是java开发的核心。还要部署tomcat服务器,程序项目运行在tomcat容器中。2.2 HTML5及JSPHTML5是HTML的第五次重大修改,可跨平台运行的超文本标记语言,支持桌面平台,也支持移动平台,是web前端开发的重要一部分。H5版本基于html、css、dom以及Javascript,实际是在HTML4基础上扩充了一些新特征,同时改进了Java Script的控件,CSS3与以前版本相比也升级了部分模块,有了功能强大的选择器、多栏布局和媒体查询等新特性,在Java开发中变得越来越无缝化。现在支持H5的浏览器已经不限于火狐谷歌IE主流浏览器,360浏览器、搜狗浏览器、QQ浏览器等都具备支持Html5的条件。在前端开发会引用目前流行的bootstrap前端框架,是一个简洁直观又强悍的开发框架。虽说该设计课题写着是基于与HTML5,但是开发一个动态网站,只用H5技术是不能够完成的,它只是前端开发技术,生成静态网页,运行在浏览器端,需要结合其他的动态编码程序。所以本系统用了JSP技术,其本质就是在HTML文件中加入的Java语言程序段实现动态网页的程序,Java语言是实现动态网页的编程语言之一,跨平台性最为突出。用户使用网站时,JSP页面向服务器发送访问请求,服务器将文件转译成servlet程序,然后再编译成class文件执行,最后执行返回结果;若用户需要将提交一些数据,那么这些数据JSP获取到后通过某种方式保存到后台。JSP突出的组件技术让修改内容而不影响逻辑或修改逻辑但不影响内容变得容易实现,易于维护和管理,脚本语言很好地服务于小的应用程序。2.3 MySQL数据库及其可视化工具简介能够进行后台数据管理的功能是动态网站开发要首先考虑到的。数据库在网站设计开发里用来处理用户和信息的数据是很重要的、不可缺少的动态网站组成部分。数据库能很大程度保证大量数据的独立性、一致性、可存储性和安全性。目前有Oracle、DB2、Microsoft SQL Server、SyBase等的数据库系统。各种类型的数据库都有自己的优势所在,就不详说了。而MySQL和Microsoft SQL Server是我们学生接触比较多的数据库系统,所以会会首先考虑这两个。本次开发使用的是MySQL,MySQL数据库是一个关系型数据存储和管理的软件系统,支持多线程,可以在不同平台上工作,支持C、PHP、Java、Python等多种编程语言。在WEB应用方面,MySQL可以说是很流行的关系数据库管理系统。在资源利用、运行速度方面有很大的优势。该数据库还提供TCP/IP、ODBC和JDBC等多种数据库连接途径,还是免费的,结合该网站开发的功能并不多,所以对后台数据管理有足够支持。数据是以表格的形式表现,行记录字段名,列记录字段名所对应的数据,若干行列组成一张表单,而创建的全部表单组成一个数据库。采用MySQL建立该网站系统的数据库,方便在前期对数据的管理,而且在后期对网站系统的二次开发,对数据进行扩展时具有很大的帮助。数据库通常不会被直接使用,而是由编程语言SQL语句来调用的,经过MySQL的处理并返回执行结果。为更方便快速开发,用到了MySQL数据库的可视化工具Navicat for Navicat,一款强大的MySQL管理和开发工具,为开发者提供了一套强大的工具,对新手也易于上手。它是基于Windows平台,为MySQL量身定做,支持3.21或以上的任何MySQL数据库服务器,解放了程序员的大脑,降低了开发的成本,同时提高了开发效率。还有无缝数据迁移、多元化操作工具、简单的SQL编辑、安全连接和可跨平台使用等的功能,使用Navicat for MySQL直观和设计完善的图形界面对本次提供了很大的方便,简化了对数据库的管理和开发,真的是个很不错的工具。2.4 B/S结构B/S(Brower/Server)结构是web兴起后的一种网络结构模式,web浏览器是客户端最主要使用的应用软件。相对C/S,在开发、安装、部署和维护方面都比较简单,用户只需要一个浏览器,输入不同的网址进入便可访问不同的服务器端程序。B/S架构工作流程是:客户端发送请求服务器端处理请求服务器端发送响应,返回请求的数据给浏览器呈现界面。工作原理如图2.1。图2.1 B/S架构工作原理其中服务器与浏览器沟通的协议是HTTP,处理流程:建立连接客户端浏览器发送请求信息web服务器解析请求并找到相应的资源将文件及其他信息转换成HTTP响应返回客户端关闭连接。B/S架构不用什么特别的安装,只要有web浏览器就行,占用资源小,也无需更新,显示逻辑通过web浏览器处理,主要业务逻辑处理是在服务器端,在服务器上安装数据库,浏览器通过web server和数据库来进行数据交互,加上不断成熟的web浏览器技术和多种的脚本语言和Active技术,节省了开发的成本。B/S架构还可以直接放在广域网上,在一定的权限中控制实现用户访问的目的,交互性强,但在跨浏览器上不太尽人意,维护简单但不够安全,也受网速影响。对用户来说,它最大的优势在于“零客户端、零维护”。表现层,逻辑层,数据层是B/S的三个层架构。三层是相对独立又相互关联,以下是三个层的主要作用:1.表现层,用于展现内容给用户的界面,为用户提供交互操作发出请求,就是html、css、js等编写的视图显示的前端页面。2.业务逻辑层,也可以说是中间层,用java、php、c或python等编写的层,接收用户请求,并与数据库连接,根据具体问题操作,进行数据业务逻辑处理。3.数据层,由mysql和oracle等数据库存储数据,数据层主要负责数据库的访问,利用服务器接收到的请求运行相对应的程序去对数据库进行增、删、查、改等的操作。最后被处理过的结果交给Web服务器发送返回给用户。用户与服务器就能进行交互了。2.5 SSM框架Spring(开源框架)、Spring MVC和mybatis这三个部分为SSM框架的整合,是标准的MVC模式,主要通过Spring管理mybatis和handle等,对服务器端的三层体系架构的每一层都提供了技术支持,将各层进行整合。Spring是实现业务对象管理,它的核心思想是控制反转(IoC),不需要程序人员去显示地new一个对象,这个框架会帮忙完成。Spring MVC负责请求的转发和视图管理,它的核心是Servlet承担中介和前台的职责,将用户的请求匹配到controller执行具体的对应请求操作。mybatis则是作为数据对象的持久化引擎,它是对jdbc的封装,让数据库底层操作变得透明。SSM执行流程如图2.2所示。图2.2 SSM 执行流程第3章 网站系统需求分析3.1 可行性分析 3.1.1 经济可行性本网站系统开发是在个人的电脑上就可以满足整个的开发需求工作,所用到的开发工具和资源等都是免费的,所需的软件都可以有免费版本下载。用户使用该网站也不需要产生经济费用。而且后期还可以通过添加广告位来获取盈利。该网站系统是将大学所学习的专业知识与技能的一个汇总体现,开发过程中用到的开发技术与知识是重点,对于个人项目开发有一个很好的实践经验,因此本网站系统在经济可行性分析作为毕业设计来说很合适。3.1.2 技术可行性该网站系统用Eclipse编辑器进行开发,编辑语言主要是HTML、CSS、JS和java;采用浏览器/服务器模式,用户不用安装客户端,保证网络连接正常即可访问操作。Web应用服务器选择轻量级开源的Tomcat,是开发和调试JSP程序的首先。JSP技术是目前主流的网站开发技术之一,在传统的网页HTML文件中插入Java程序段和JSP标记,形成动态网页文件,其本质是一个java程序,有java的所有特征,完全的面向对象。数据库是体积小、成本低、速度快的MySQL,支持多线程,多种连接途径,而且借助其可视化工具让开发变得更方便。因此该网站系统在技术可行性上是可行的。3.1.3 运行可行性该毕业设计使用到的数据库、编辑器、服务器及环境配置都可以在一台电脑安装设置好,用到的所有开发工具都是免费的,非常小的资源消耗,可能对于图片来说消耗大一点。将编辑好项目程序放在服务器上,电脑配置好运行环境,并连接好网络就能支持网站系统的运行。所以该网站系统在运行可行性的分析结果是可行的。综上所述,无论是在经济上、技术上或者是运行环境上,本网站系统的设计与开发都是在可以承受的范围内。3.2 网站系统功能需求分析使用调查问卷和个人主观分析对该网站系统进行需求分析。调查问卷结果显示,学生占调查对象比为87.18%,表示除了常用的微博和个别的资讯网站能浏览后评论或留言的网站比较少,所以确定了该网站系统的需求,基本定位为以下的功能:网站系统分为用户使用的前端和管理员使用的后台,明确开发前端与后台这两个部分面向的功能及用例。前端主要是页面视图功能,主要包括娱乐资讯浏览、登录注册、评论和留言等功能模块。后台主要是管理员管理数据的,其主要的功能有管理员信息管理和用户管理、娱乐资讯信息管理、评论管理、留言管理的功能模块。这里主要分析管理员与后台系统的交互,以下是后台管理系统的用例分析:(1) 管理员信息管理表3-1 管理员信息管理用例分析(2)用户信息管理表3-2 用户信息管理用例分析(3)娱乐新闻管理表3-3娱乐新闻管理用例分析(4) 评论、留言管理表3-4评论、留言管理用例分析3.3 网站系统流程设计流程图是将一个操作的各个顺序步骤按照一定的逻辑展示出来的一个图形,其实也是思维导图的一种表现。只要有操作过程,那么肯定就有一个操作流程。流程图就是用来描述这个操作的解释。本网站系统操作流程设计如下,图3.1-3.2所示。图3.1用户操作流程设计图图3.2管理员操作流程设计图3.4 网站系统运行环境操作系统:Windows10家庭版Intel(R) Core(TM) i5-4200H CPU 2.80GHz 2.79GHz内存:8G 硬盘:500G开发工具:Eclipse数据库:MySQL(Navicat for MySQL可视化工具)运行环境:Tomcat 8.540第4章 网站系统设计4.1 系统架构设计概述1可操作性。可操作性是基本的,本网站系统易操作交互性,用户简单的操作即可,管理员后台管理信息操作也简单。2可靠性。对于开发者和用户来说,一个网站系统的可靠性是很重要的考虑因素,可靠的网站才能吸引和留住用户,开发者才能更好维护扩展,因此网站系统的架构设计必须具备强可靠性。3安全性。随着网站的被使用,存储了大量用户数据和信息数据,用户数据的保障很重要,也有其他数据的关联,以及后台数据的管理至关重要。因此设计网站系统的时候,还需要考虑数据存储的管理和安全问题,只有管理员可以对数据进行管理,会进行信息审查处理的相关管理。4可维护性。随着网站的使用与使用方式的增加,必然会出现各种各样未考虑到的错误,因此在系统的架构设计时将可维护性考虑进去是必然的,方便处理使用过程中出现未知错误。5可扩展性。在网站的运行过程中,必然伴随着有新的技术产生,新的需求出现,所以网站系统的扩展也必不可少,与时俱进,增加新的功能与技术是不可缺的属性。4.2 系统技术架构设计如下为网站系统的架构设计,用户界面层、业务层逻辑、数据访问层为系统架构的三层分层(图4.1所示)。包图是一种维护和描述系统整体结构的建模工具,为程序中对用到的类进行分组机制设计,方便处理不同类、接口和节点等。系统架构包图如图4.2。图4.1 系统技术架构图图4.2 系统模块包图4.3 网站系统边界图系统边界图入图4.3所示。图4.3系统边界图4.4 数据库设计4.4.1 e-r图e-r图也称实体-联系图,用于描述现实世界的概念图。关系型数据库(本网站系统采用MySQL数据库存储数据,是一种轻量级关系型数据库,也是目前应用市面上的系统中使用比较频繁的一种数据库。)数据库的E-R模型图如下图4.4所示:图4.4 数据库E-R图根据网站系统的功能的设计,下面的的实体-关系模型是细化系统中的e-r图后的实体属性图:(1)管理员实体类的属性,如图4.5所示。图4.5用户实体属性图(2)用户实体类的属性,如图4.6所示。图4.6新闻咨询类实体属性图(3)娱乐资讯实体类属性,如图4.7所示。图4.7娱乐资讯类实体属性图(4)评论实体类属性,如图4.8所示。图4.8评论类实体属性图(5) 留言实体类属性,如图4.9所示。图4.9 留言类实体属性图4.4.2 物理结构设计根据实体属性分析,在数据库中创建数据库,名为entertainsnewsweb,使用MySQL数据库管理系统及Navicat for MySQL可视化工具进行设计。分别创建的数据表有nadmins表、ncomments表、nleamsgs表、nnews表、nusers表,根据需要设定字段类型和长度。具体表结构如下:表4-1 nadmins表该表为存储管理员信息的表,管理员的ID类型为int,不允许为空且设为主键,管理员的名称(name)、密码(password)和手机号(tel)的类型是varchar,允许为空。如表4-1.表4-2 nnews表 该表为存储娱乐资讯信息的表,资讯的ID类型为int,不允许为空且设为主键,其他分别为新闻标题、发布时间、发布作者、图片和新闻链接。如表4-2.表4-3 nleamsgs表该表为存储留言信息的表,留言的ID类型为int,不允许为空且设为主键,留言内容(Nlcont)的类型是varchar,不允许为空;与用户表关联,其他还有内容和日期。如表4-3.表4-4 ncomments表该表为存储评论数据的表,评论信息的ID类型为int,不允许为空且设为主键,评论的内容(Nccont)的类型是varchar,长度设置大一点,不允许为空;与用户表和资讯表关联。如表4-4.表4-5 nusers表该表为存储用户信息的表,用户的ID类型为int,不允许为空且设为主键,用户的名称(name)、密码(password)和手机号(tel)的类型是varchar,允许为空。如表4-5.第5章 网站系统实现5.1 系统主要功能对本网站功能系统的需求进行了详细的了解,分析了调查问卷的结果。本系统功能页面实现主要基于HTML5和JSP技术和SSM技术框架开发,划分为前台和后台,前台主要提供使用网站的用户的登录和注册、新闻资讯展示、用户信息浏览评论、用户留言、后台登录等功能模块;后台则是管理员的业务管理,对管理员信息、用户信息、新闻信息、评论信息和留言信息进行管理操作。网站系统功能结构图如下图5.1所示:图5.1系统功能结构图5.2 系统各个功能模块实现5.2.1 数据库连接设计实现数据库连接是用JDBC进行连接,JDBC是java与数据库之间的桥梁;关系数据库是动态内容的来源之一,用于存储相关的信息:文本,图像等资料。 配置的代码如下图5.2。图5.2数据库连接代码图5.2.2 登录设计实现用户在浏览器输入网站前台登录页面的url地址访问时,用户要进行评论或留言的情况下需要输入已成功注册的账号和密码信息,用户输入完相应信息后,点击登录按钮,系统会将用户填写的表单信息发送到后台数据库进行比对验证,如果该用户已注册则直接进入网站首页。否则登陆失败,跳回登录界面,注册后再进行登录。如下图5.3-5.5所示。而后台的登录,没有注册功能,设计只设置一个管理员,管理员登录成功进入后台系统对各类信息进行管理操作。图5.3 用户注册实现界面图5.4后台登录界面图5.5用户登录流程设计图5.2.3 前台功能模块设计实现前台主要包含了用户进行最新的娱乐资讯浏览页面的首页、用户登录与注册、新闻列表页面、留言页面留言分享和其他页面。(1) 首页浏览模块(如图5.6)首页是热点和最新的娱乐资讯浏览模块,可查看新闻详情,可以搜索关键字查询到网站内相应的娱乐资讯。图5.6前台首页界面(2)评论模块的实现在新闻列表评论操作的界面,用户可以选择浏览新闻详情,账户登录的情况下可点击添加评论,在弹出的评论框内输入评论信息并确认提交,提示添加成功;在对应的新闻资讯的查看更多评论里可以看到评论信息。评论实现界面如图5.7所示。图5.7新闻评论模块界面(3)留言功能模块的实现用户在平台留言页面,可以浏览其他用户的留言信息,页面还是用了audio标签放入音乐播放器,用户可以选择暂停播放。点击留言分享按钮,在弹出的留言框内输入想要分享的图文信息,点击提交按钮,则留言成功。留言界面如图5.8所示。图5.8新闻评论模块界面留言功能操作流程如图5.9所示。图5.9留言管理流程图(4)其他页面模块的实现其他信息页面,除了主要的娱乐资讯页面,还有其他信息页面浏览,选择点击相应的明星图像,可跳转到对应的idol个人界面。如图5.10所示。图5.10新其他页面模块界面5.2.4 后台功能模块设计实现后台功能模块包括对前台的娱乐资讯管理、用户信息的管理、用户提交的评论信息管理和用户留言信息管理。以下主要介绍娱乐资讯管理和留言管理模块。(1)娱乐资讯管理模块管理员对新闻信息可进行关键字查询、删除信息条和翻页的操作是此模块主要功能实现。界面如图5.11所示:图5.11娱乐资讯管理界面娱乐资讯管理流程如图5.12所示。图5.12评论管理流程图(2)留言管理模块管理员对用户的留言信息进行管理,对信息的内容进行审核,判断是否需要删除,正常、绿色信息可以留存;随着信息的不断增加,为了方便管理,分页。留言管理模块界面如图5.13所示。图5.13留言管理模块界面第6章 网站系统测试测试的目的是发现错误,进而找到解决方案后修改,改进使用的准确性。完成开发的最后一步是对网站系统进行整体测试,测试是为检测功能性,可用性,操作性等是不是符合预期的目标,同时找到在设计过程中未发现的错误和不足。通过有逻辑性地测试过程去进行更多提升软件的使用性,并且检测其中的异常,有效降低在运行时的出错率。本网站系统测试主要检测了每个功能模块的实现情况,确保和预期的需求分析对上和实用性。其实在开发时会对网站系统有不断地测试,编写对应模块功能后都要运行程序,通过结果反映,继续修改继续开发。本次系统测试主要是以黑盒测试进行,通过测试各个模块的功能实现情况。6.1 功能测试功能测试是对开发需求描述的功能进行测试,是否符合功能分析的需求。进行的主要功能测试包括适用性、准确性、互操作性、安全性。本网站系统功能测试如表6-1所示:表6-1 系统功能测试6.2 安全测试安全测试主要是对权限的的测试,在登录时对无效的数据和错误的数据的测试。具体测试方面如表6-2所示。表6-2安全测试6.3 用例测试具体测试方面如下表所示。表6-3 系统可用性测试表6-4 系统用例测试6.4 测试结果分析在编码过程中有不断对网页程序的运行测试,到最后对整个项目进行运行测试分析,本网站针对用户可进行娱乐资讯浏览与简单互动业务而开发的功能的基本实现,并且测试后没有特别的异常,符合预期的需求,并且操作简单,资讯信息实现定时更新。但功能模块不够全面,需要继续更多的改善和扩展。在测试完后,网站系统可以投入使用了,后期的系统维护也很重要,也是持久的工作,对更新的信息进行及时的管理,同时还需要保证网站的使用体验,按照更多需要更新系统内容等。第7章 网站特色和创新7.1 网站特色本网站系统的特色是前端的响应式布局,有的页面使用了当前流行的bootstrap前端框架为基础进行前端开发,对开发者来说可以节省一些前端开发时间也可以得到比较美观的排版;简单灵活,可适应不同分辨率的设备,使得网站可以在不同的终端被使用,让更多人愿意访问网站,吸引用户。同时使用了H5部分新特性新标签,用于回放的video和audio元素、新的特殊内容元素等,让用户有一个更好的使用体验。7.2 创新功能该网站系的创新型功能是用户留言,用户可以浏览网站资讯之余,不仅可以对相关新闻进行评论,还可以分享自己的内容,可以说它也有信息更新的作用,让网站信息可以持续更新,增加用户与网站的互动性。点击留言分享按钮(登录之后),系统获取到用户id了,在留言窗口页面输入要分享的内容后并点击提交按钮,内容和对应的图片信息也同步到数据库留言表和后台管理系统中,留言成功,在留言页面就可以看到信息。当然内容以偶像明星、娱乐的信息为主。管理员也会定期对发布的留言分享筛选留存。实现的留言功能页面以及主要代码如下,图7.1-7.2所示。图7.1功能页面图图7.2实现代码第8章 结论本人根据自己的兴趣和个人知识支持选择了本次的毕业设计选题,在毕业设计开发这几个月的时间里,在指导老师和同学朋友的帮助和支持下,顺利完成了项目的制作。开始觉得应该可以很快完成,可是过程中也遇到不少问题,学习的相关专业课程完成也已经有段时间,所以还要不断查漏补缺地进行。期间,接受了指导老师在我毕业设计开发和毕业论文编写时对我的指导。完成过程中查阅了很多网站开发的资料,翻阅了一些与网站开发的相关书籍,还有JavaWeb、jsp、spring、ssm、mybatis等相关框架的知识,再结合自己之前的网页项目开发和面向对象及数据库的学习;这次的毕业设计的制作和毕业论文的制作过程,使我对大学里所学的相关知识有了一个系统的认识。在动态网站开发技术相关方面,花了很多的时间与精力再去学习和熟悉以前未学习过和未熟练掌握的知识。正所谓学海无涯,这次设计实践,认识到自己学识的匮乏,让我更加觉得了学无止境的重要性。更多的收获是通过本次毕业设计,将之前学习的知识整理了起来,并且了解到作为一个网站开发者完全自己去编程开发一个完整的动态网站的的步骤和方法,属实不容易;要了解分析开发需求,每个模块的实现,整理逻辑关系等问题,思考每次调试的结果,解决问题等等。在这个过程中认识到自己的一些不足、巩固了在大学期间所学的网站开发方面知识。通过这次网站的设计与实现,我学会了很多,也了解到之前没有学习到的,对网站开发有了较系统的理解。本网站从需求调查分析、设计,再到开发和最后的调试,一步一步地去完成每个模块和功能,将所学的知识都用在了其中,网站的制作开发过程不容易,但最后也做出了一个简单网站。随着技术的发展,web开发、系统软件的开发流程也越来越成熟,开发一个实用的网站系统也会随之更容易上手,但功能是会更加强大,具有分享性、互动交流性也是基本的了,不然很难继续发展。本设计也基本实现了一个可交互网站的一些特点;学习是循序渐进、从易到难,会更系统,到更多知识的集合,网站的开发也是从每一个简单页面部分开始,环境配置,结合后端编程,最后组成一个复杂的动态网站系统。总体的设计、数据库设计连接、各个模块设计和效果实现一步一步实践下来,网站的基本功能开发已实现。由于时间上和本人学习能力的限制,这个娱乐资讯网站还有很多需要改进和完善的地方,如果有相关需求,会在之后的工作和学习生活中对其进行二次开发。本网站系统容易操作、信息能更新,用户可分享

    注意事项

    本文(基于HTML5技术的娱乐资讯追星网站设计与实现.docx)为本站会员(温桑)主动上传,淘文阁 - 分享文档赚钱的网站仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知淘文阁 - 分享文档赚钱的网站(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    关于淘文阁 - 版权申诉 - 用户使用规则 - 积分规则 - 联系我们

    本站为文档C TO C交易模式,本站只提供存储空间、用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。本站仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知淘文阁网,我们立即给予删除!客服QQ:136780468 微信:18945177775 电话:18904686070

    工信部备案号:黑ICP备15003705号 © 2020-2023 www.taowenge.com 淘文阁 

    收起
    展开