基于HTML5技术的娱乐资讯追星网站设计与实现.docx
《基于HTML5技术的娱乐资讯追星网站设计与实现.docx》由会员分享,可在线阅读,更多相关《基于HTML5技术的娱乐资讯追星网站设计与实现.docx(47页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、本科毕业设计(论文)基于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服务器。该网站的设计开
2、发实现模块化,前台与后台明确分开,网站页面实现和业务逻辑实现均要在服务器运行实现。对之后网站的维护或者二次开发提供了方便的条件。在开发过程中,对数据库的连接、后台数据的处理和管理、网页的设计以及相关工具和网站的整体运行的环境配置,都体现了在大学专业课上所学到的大部分基础知识的重要性。该网站的前台的功能有:用户的登录注册、首页的信息浏览、分享评论、留言等面向客户的功能;而后台功能主要是面向网站前后端的管理员,后台功能有:后台的权限管理、用户登录注册管理、评论管理、留言管理等等。为使用的用户提供一个方便、简捷的信息获取以及可互动交流的娱乐资讯网站,简单易用。本文撰写该网站的设计与开发与实现过程。关
3、键词:娱乐资讯 HTML5 JAVA MySQL TomcatAbstractThis website mainly usesHTML5 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 fron
4、t-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 pr
5、ocessing 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:
6、 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 managemen
7、t, 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:Entertainm
8、ent 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 系统技术架构
9、设计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 选题背景及意义网络
10、和信息科技的发展迅猛,如今绝大多数人都会用互联网进行信息的获取,在有网络的地方,我们通过身边的智能终端就能随时随地,可以快速浏览各种新闻资讯及数不尽的其他信息。同时信息技术在生活的方方面面都有很多的应用,也随着生活水平的提升,人们会有更多的精神需求和追求。从二十几年前简陋设计和功能的HTML网页网站开始,一步步演变转换扩展,不断进步,都是为创建良好的用户体验,现在的网站变得越来越多样,开发技术越来越好。信息技术在各种行业资讯输出的利用和人们对资讯获取的需求,随之各种资讯平台层出不穷;同时随着国内外明星娱乐行业的不断发展,粉丝获取自己喜欢的明星偶像及一些娱乐资讯也成了生活的重要组成部分。现在追星
11、现象是很普遍的,在身边的同学朋友多少都有自己喜爱的明星偶像,会使用手机、电脑等电子设备通过不同渠道去关注他们的资讯,通过微博、微信和今日头条等平台获取。开发该网站是因为目前很少网站只专注于娱乐资讯并有用户交流模块。因此,开发一个针对用户对娱乐资讯获取和用户可以进行交流的娱乐资讯平台具有实际的研究意义。网络上的资源在早期只有静态的Html技术实现的静态页面,后来能够通过PHP、Jsp和Asp的动态web资源开发技术实现可交互的动态网页。通过浏览器/服务器结构模式和Web动态网站开发技术,让用户能获取信息同时能进行分享交流的交互体验。娱乐资讯追星网站页面布局设计清晰,以用户为中心,为用户提供娱乐资
12、讯和明星偶像的信息获取 ,同时也提供用户分享交流。做出一个能快速阅览明星娱乐资讯,给用户提供一个便捷的体验。通过基于HTML5及其他技术开发的资讯网站,为用户推送明星娱乐资讯,给予用户一个方便的娱乐资讯获取和交流的平台,同时倡导用户理智追星!1.2 课题研究的目的现在是信息技术时代,互联网的普及,网络科技的高速发展,绝大部分的人都会通过电脑手机等终端获取信息,与传统信息传播媒体相比,更方便、快捷,环保,也满足人们对快速变化的信息的好奇心。生活水平的不断提高,人民对精神娱乐的追求也不断增加,同时还有娱乐文化发展相关,通过网上进行本课题相关的问卷调查,人们追星现象也越普遍化,对明星的新闻资讯花边信
13、息需求增加;即便不追星,在茶余饭后无聊时也可能聊一下明星娱乐八卦的。在进行了问卷调查结果的对象里学生占86%左右,还有网上的一些有效调查数据显示,追星也多在18-25年龄阶段,结合身边的情况可以得到结论,因为多数在校留宿,很少看电视播放的资讯,他们通过笔记本、电脑和手机等上网,而学生也是网络高使用率人群,同时也是追星、或喜欢看娱乐新闻或爱看八卦的人群,为了解相关的明星近况或娱乐资讯,有这方面的心思和时间进行资讯浏览。为此,也针对资讯类网站的发展趋势,为用户开发一个方便的娱乐资讯追星网站是可行的。很多资讯网站都是以客户接收信息为主,而开发该网站不仅能进行资讯的浏览查阅,设计一个好的网站该有的特点
14、:交互;互动性和交流性是现在动态网站开发重要特性;不能只是提供用户单一的资讯浏览,可以更新,还要能交互,所以本网站会实现用户可进行评论和分享交流的留言功能。浏览信息后可以在分享页面分享图文信息或发表评论,体现网站可扩充性:用户可以进行内容输入,大量的数据要对数据库输入。资讯会通过聚合数据的api随机更新,开放平台,让用户也能进行信息更新,让网站呈现出一种动态的变化之中,响应式和互动型的网页会给用户一个不错的体验,这样才能够跟好地吸引人气。1.3 设计方法与实施方案网站结构设计方案:使用Eclipse软件进行编程。在设计方案中采用B/S模式(浏览器/服务器模式),该结构在后期功能的拓展和运营维护
15、中比较简单、快捷,只需要增加或更改网页;该模式还统一了客户端,核心的部分集中在服务器上,简化了系统的开发、维护和使用。操作系统:Windows 10家庭版操作系统数据库:MySQL,用该数据库进行数据存储,运行速度快且体积小,小型的数据管理系统适用于个人开发的小网站,而且该数据库具有很高的安全性。开发工具:Eclipse。开发语言:HTML5、Css、Java、JavaScript、SQL语言。开发技术:HTML5、JSP、mybatis。服务器:Tomcat。第2章 开发工具和技术简介2.1 Eclipse简介Eclipse是基于Java的可扩展开发平台,是Java的集成开发环境,就其本身来
16、讲,它只是一个框架和一组服务的自由IDE开发环境,也可以支持如C#/C+等的编程语言的集成插件,它对Java环境具备针对性的功能优势,可以在其开放源码的基础上,还可以使用其他需要和下载好的开发语言的插件,灵活性高。安装Eclipse之前要先在电脑安装了JDK,配置好开发环境,因为JDK是Java语言的软件开发工具包,包含Java的运行环境和Java工具,是java开发的核心。还要部署tomcat服务器,程序项目运行在tomcat容器中。2.2 HTML5及JSPHTML5是HTML的第五次重大修改,可跨平台运行的超文本标记语言,支持桌面平台,也支持移动平台,是web前端开发的重要一部分。H5版
17、本基于html、css、dom以及Javascript,实际是在HTML4基础上扩充了一些新特征,同时改进了Java Script的控件,CSS3与以前版本相比也升级了部分模块,有了功能强大的选择器、多栏布局和媒体查询等新特性,在Java开发中变得越来越无缝化。现在支持H5的浏览器已经不限于火狐谷歌IE主流浏览器,360浏览器、搜狗浏览器、QQ浏览器等都具备支持Html5的条件。在前端开发会引用目前流行的bootstrap前端框架,是一个简洁直观又强悍的开发框架。虽说该设计课题写着是基于与HTML5,但是开发一个动态网站,只用H5技术是不能够完成的,它只是前端开发技术,生成静态网页,运行在浏览
18、器端,需要结合其他的动态编码程序。所以本系统用了JSP技术,其本质就是在HTML文件中加入的Java语言程序段实现动态网页的程序,Java语言是实现动态网页的编程语言之一,跨平台性最为突出。用户使用网站时,JSP页面向服务器发送访问请求,服务器将文件转译成servlet程序,然后再编译成class文件执行,最后执行返回结果;若用户需要将提交一些数据,那么这些数据JSP获取到后通过某种方式保存到后台。JSP突出的组件技术让修改内容而不影响逻辑或修改逻辑但不影响内容变得容易实现,易于维护和管理,脚本语言很好地服务于小的应用程序。2.3 MySQL数据库及其可视化工具简介能够进行后台数据管理的功能是
19、动态网站开发要首先考虑到的。数据库在网站设计开发里用来处理用户和信息的数据是很重要的、不可缺少的动态网站组成部分。数据库能很大程度保证大量数据的独立性、一致性、可存储性和安全性。目前有Oracle、DB2、Microsoft SQL Server、SyBase等的数据库系统。各种类型的数据库都有自己的优势所在,就不详说了。而MySQL和Microsoft SQL Server是我们学生接触比较多的数据库系统,所以会会首先考虑这两个。本次开发使用的是MySQL,MySQL数据库是一个关系型数据存储和管理的软件系统,支持多线程,可以在不同平台上工作,支持C、PHP、Java、Python等多种编程
20、语言。在WEB应用方面,MySQL可以说是很流行的关系数据库管理系统。在资源利用、运行速度方面有很大的优势。该数据库还提供TCP/IP、ODBC和JDBC等多种数据库连接途径,还是免费的,结合该网站开发的功能并不多,所以对后台数据管理有足够支持。数据是以表格的形式表现,行记录字段名,列记录字段名所对应的数据,若干行列组成一张表单,而创建的全部表单组成一个数据库。采用MySQL建立该网站系统的数据库,方便在前期对数据的管理,而且在后期对网站系统的二次开发,对数据进行扩展时具有很大的帮助。数据库通常不会被直接使用,而是由编程语言SQL语句来调用的,经过MySQL的处理并返回执行结果。为更方便快速开
21、发,用到了MySQL数据库的可视化工具Navicat for Navicat,一款强大的MySQL管理和开发工具,为开发者提供了一套强大的工具,对新手也易于上手。它是基于Windows平台,为MySQL量身定做,支持3.21或以上的任何MySQL数据库服务器,解放了程序员的大脑,降低了开发的成本,同时提高了开发效率。还有无缝数据迁移、多元化操作工具、简单的SQL编辑、安全连接和可跨平台使用等的功能,使用Navicat for MySQL直观和设计完善的图形界面对本次提供了很大的方便,简化了对数据库的管理和开发,真的是个很不错的工具。2.4 B/S结构B/S(Brower/Server)结构是w
22、eb兴起后的一种网络结构模式,web浏览器是客户端最主要使用的应用软件。相对C/S,在开发、安装、部署和维护方面都比较简单,用户只需要一个浏览器,输入不同的网址进入便可访问不同的服务器端程序。B/S架构工作流程是:客户端发送请求服务器端处理请求服务器端发送响应,返回请求的数据给浏览器呈现界面。工作原理如图2.1。图2.1 B/S架构工作原理其中服务器与浏览器沟通的协议是HTTP,处理流程:建立连接客户端浏览器发送请求信息web服务器解析请求并找到相应的资源将文件及其他信息转换成HTTP响应返回客户端关闭连接。B/S架构不用什么特别的安装,只要有web浏览器就行,占用资源小,也无需更新,显示逻辑
23、通过web浏览器处理,主要业务逻辑处理是在服务器端,在服务器上安装数据库,浏览器通过web server和数据库来进行数据交互,加上不断成熟的web浏览器技术和多种的脚本语言和Active技术,节省了开发的成本。B/S架构还可以直接放在广域网上,在一定的权限中控制实现用户访问的目的,交互性强,但在跨浏览器上不太尽人意,维护简单但不够安全,也受网速影响。对用户来说,它最大的优势在于“零客户端、零维护”。表现层,逻辑层,数据层是B/S的三个层架构。三层是相对独立又相互关联,以下是三个层的主要作用:1.表现层,用于展现内容给用户的界面,为用户提供交互操作发出请求,就是html、css、js等编写的视
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 HTML5 技术 娱乐 资讯 追星 网站 设计 实现
限制150内