【基于 HTML5的“眼明山”旅游网站的设计与实现9000字（论文）】

基于HTML5的“眼明山”旅游网站的设计与实现目录摘 要 1第1章绪论 31.1 研究背景和意义 31.2 当前研究的现状 31.3 网站框架概述 4第2章“眼明山”旅游网站相关技术 52.1 网站前端技术 52.2 网站后端技术 52.3MyEclipse开发平台 6第3章“眼明山”旅游网站分析 73.1 网站可行性分析 73.2 网站需求分析 73.3 网站设计目标 7第4章“眼明山”旅游网站系统设计 104.1 网站系统功能设计 104.2 网站各功能设计概述 104.2.1网站注册登录模块 104.2.2网站管理模块 124.3数据库设计 12第5章“眼明山”旅游网站的实现 165.1网站前端实现 165.1.1用户注册实现 165.1.2用户登录实现 165.1.3前端具体功能实现 175.2网站后端实现 205.2.1后台登录实现 205.2.2后台管理功能实现 205.2.3会员管理实现 215.2.4用户反馈实现 22第6章网站测试 236.1网站测试目的 236.2网站测试环境 236.3网站测试结果 23第7章总结 25参考文献 26PAGEPAGE10摘 要随着人民生活水平的提高，旅游正成为一个热门话题，因为人们在闲暇的时候渐渐重视休闲生活。由于网络方便、快速的特性，成为寻求旅游信息的最佳方式。利用所学知识开发设计的眼明山旅游网站，目的就是方便游客能快速地找到眼明山景区周边的旅游相关信息，能更好地让游客游览眼明山、认识眼明山，吸引更多的游客前来游玩，带动当地经济的发展。后端技术采用java语言、JSP技术、MySQL数据库、tomcat服务器，用这技术完成了眼明山旅游网站的开发。关键词：眼明山旅游网站；MySQL；JSP第1章绪论研究背景和意义随着人们的生活水平不断提高，衣、食、住、行已不能满足人们的生活需要。人们追求健康的生活，旅游成为首选，因为它不仅能锻炼身体，还能带来视觉上的享受，它能满足人们的精神需求。因此，旅游业已经变得非常强大，不仅对人们生活质量起到不可估量的作用，而且也是我国经济发展的支柱产业，起到无穷大的作用。现如今制约旅游业发展最重要的因素怎么能让旅客在较短时间内获取到旅游地周边的相关信息，传统的手工管理旅游问题的方式已经不能满足旅游业的需要。同时，信息技术的快速发展推动了旅游业的发展，人们开始探索利用信息技术来推动旅游业的新方法。这对旅游业来说是一个巨大的变化，能够利用信息技术开发出适合旅游业的网站是旅游业的一大期待，具有重要的现实意义。眼明山旅游网站就是通过互联网让更多人认识眼明山，吸引大量游客前来眼明山景区游玩，带动当地经济发展。当前研究的现状中国的旅游网站数量非常多，有数以万计的旅游网站，可以使用各种搜索引擎进行搜索。然而，大多数旅游网站都很不规范，无论是网站的科学设计和效率，还是内容、范围或服务功能，都存在很多问题。市面上的旅游网站都有共同的缺点就是功能比较单一，都比较传统，不符合现在旅游网站的发展。随着信息化的加快，互联网的广泛应用影响着社会的方方面面，在很多领域，互联网都发挥着重要的作用，合理利用互联网的强大之处能够让很多工作领域的工作效率大大提高，我国是旅游资源充沛和最具有旅游消费潜力的国家，在这样的背景下，发展旅游业才是推动经济发展的重要方面，是促进经济结构调整、满足人民生活需求的内在要求，怎么才能让互联网和旅游业结合起来，带动经济发展，才是旅游业以后的发展目标[1]。在网络经济时代，旅游网站是连接游客的手段，是促进景区地方经济发展的重要工具，不断完善和提升旅游网站的服务功能，不仅可以帮助游客获得所需的景区旅游服务信息，也可以促进景区地方经济发展[2]。眼明山旅游网站的设计，就是最大限度利用互联网，能减低景区和游客的成本，在较短时间内提供景区附近的全部信息，对景区附近资源进行整合，给游客提供多方位高效率、低成本的旅游服务相关信息，可以提前预知景区附近的相关服务，为游客能提供更加方便的旅游体验。网站框架概述本课题主要实现一个基于H5技术的眼明山旅游网站，旨在向大家宣传介绍眼明山，让更多游客来眼明山游玩。眼明山旅游网站分为七个部分概述：第一部分是绪论。介绍了眼明山旅游网站的研究的现状、意思和背景，并简要介绍了眼明山设计的初衷。第二部分是网站技术。对眼明山旅游网站使用的技术进行解释。第三部分是网站分析。对眼明山旅游网站需求、可行性进行分析，还对网站的设计目标进行了说明。第四部分是网站设计。对眼明山旅游网站的功能模块进行阐述和用到的数据信息进行展示。第五部分是网站实现。对眼明山旅游网站前后端实现的过程。第六部分是网站测试。对网站所设计的各功能进行测试，以保证网站的正常运行。第2章“眼明山”旅游网站相关技术网站前端技术眼明山旅游网站前端技术使用HTML5，CSS样式和JavaScript脚本语言进行交互以实现界面交互。HTML技术，也被称为超文本标记语言技术，是万维网上使用的主要描述性语言之一，人们通常用来访问互联网的网页都是使用HTML技术建立的，随着时间的推移，HTML语言不断发展，现在已经经历了第五次修订，从而形成了HTML5技术[3]。CSS技术,也被称为层叠样式表、级联样式表，它可以通过改变网页里面字体字号、文字位置、字体颜色实现对网页的修饰，使网页更加美观[4]。JavaScript技术，也被称为直译式网络脚本语言，通过它能实现在网站上与用户的动态交互，还通常把它嵌入到html中，可以提高页面的浏览速度，获得更加流畅美观的页面浏览效果，减轻服务器的压力[5]。网站后端技术眼明山旅游网站后端主要用了java语言、jsp技术、数据库、Tomcat服务器等市面上做网站比较成熟的技术。java语言，也被称为面向对象程序设计语言，是一种面向对象、跨平台、高效、安全、多线程、动态、分布式、健壮的编程语言。它被广泛用于个人电脑、后端控制器、移动互联网等。在开放网络领域，java比C和C++更有效率，可以在任何环境下工作。此外，java有分布式的功能，并且有一个非常全面的程序库，可以很容易地与HTTP和TCP/IP合作。java也是一门简单易学的语言。它取消例如C和C++中十分复杂、很难理解并且容易出错的内容[6]。jsp技术以java语言作为脚本语言，经过大量改进后构建的一种理想网站应用开发框架，继承了java开放性、跨平台的优点，在不同环境下开发的jsp项目，可以在不同的客户端都能访问，基于jsp技术网页较其他执行效率更高、维护管理更简单，所以jsp技术用的比较多[7]。因此，结合眼明山旅游网站的要求和功能模块的实现，最适合使用jsp技术，并且jsp的可扩展性相对较好。对于进一步使用过程中的系统，系统功能可以不断扩展，系统更加完善。满足用户管理更加方便。Tomcat是一个免费和开源的网络应用服务器，是一个轻量级的应用服务器，在中小型系统普遍使用，是开发和调试的首选。它可以被用来响应访问html页面的请求，经过长期的开发，Tomcat的性能、稳定性等方面都非常出色，可以独立运行[9]。2.3MyEclipse开发平台MyEclipse是基于eclipse加上自定义插件开发的，是一个强大的企业集成开发环境。它是功能丰富的JavaEE集成开发环境，是一个非常出色的eclipse插件集合，包括了完备的编码、调试、测试和发布功能，已经集成了很多种结构，用于对java和J2EE进行开发。然而，它可以很容易地与其他软件连接，并保持广泛的范围，特别是在开放源码产品。可以说MyEclipse是几乎囊括了所有主流开源产品的专属eclipse开发工具，它完全支持各种功能，如JavaServlet、JSP等数据库链接工具等很多种功能[10]。第3章“眼明山”旅游网站分析网站可行性分析1.技术可行性；眼明山旅游网站采用相对成熟的Mysql数据库进行用户和系统管理员之间的数据交互，开发平台采用MyEclipse开发工具，实现本网站技术如Html5、CSS样式、JavaScript脚本语言、java语言、jsp技术等都是比较成熟的技术。所以，眼明山旅游网站技术是可行的。2.经济可行性；眼明山旅游网站提供了关于行程的详细信息，消费者不需要到旅行社去获取旅游信息，这就降低了消费者的旅行成本。同时，旅行社不需要开设更多的办公室，这减少了该部门的运营成本。此外，眼明山旅游网站的开发、市场调研和其他相关的管理系统都是免费的，我们自己做所有的工作。复杂的问题通常是在学生和教师的帮助下解决的。所以，眼明山旅游网站经济是可行的。网站需求分析随着社会的发展和人们生活水平的日益提高，人们对高档生活方式的需求越来越强烈，对旅游的需求也越来越复杂和多样，不断追求高品质和个性化的旅游。对游客个人需求的研究可以揭示人们对旅游活动的内在动机，这有助于预测和锁定旅游行为[11]。眼明山旅游网站开发的目的是减少工作人员不必要的工作量，更容易和快速地响应用户的需求，更好地让用户通过眼明山旅游网站了解眼明山、认识眼明山。眼明山旅游网站在借鉴其它旅游网站的基础上，并结合眼明山旅游网站实际确定下来的。并且也对用户对眼明山旅游网站一些意见进行了采纳，对眼明山里面要实现的功能实施了具体分析，使用户可以在眼明山旅游网站上能了解到眼明山景区全方位的信息，用户可以在家就能提前知道景区相关信息，即减少了景区工作人员的工作量又减少了用户在景区等待的宝贵时间，两全其美。而不是像有的旅游网站那样，只介绍景区景点的相关信息，不能在线预约，遇到景区浏览高峰期，一是给游客增加了排队等待时间，浪费了游客的游玩宝贵时间。二是给景区工作人员增加了工作量，不能预知景区浏览客流量，不能提前应对。所以，眼明山旅游网站的需求分析是可行的。网站设计目标1、眼明山旅游网站功能的实现一是可以实现用户对眼明山旅游网站里面景点信息、附近特色美食、附近酒店的查看；二是眼明山旅游网站允许用户在输入用户名密码后在不同的操作系统和浏览器上无缝登录；三是管理员对眼明山旅游网站进行相关维护，更好的服务旅客；2、眼明山旅游网站的使用者眼明山旅游网站的使用者分为用户和管理员。而使用者分为普通用户和会员用户，普通用户和会员用户网站的页面功能是不一样的。特色酒店普通用户是没注册过账号的用户或是未登录账号的用户。普通网站浏览眼明山旅游网站时，只能浏览首页、线路景点、特色酒店、美食的相关内容。普通用户功能权限图如图1所示；特色酒店线路景点美食线路景点美食普通用户普通用户 图1普通用户功能权限图我的预约会员用户是在眼明山旅游网站注册过账号的用户。登录账号后，能浏览眼明山旅游网站除了网站后台的不能浏览，其他都能浏览。会员用户功能权限图如图2所示；我的预约美食相册美食相册我的评价特色酒店我的评价特色酒店我的收藏我的收藏会员用户线路景点会员用户线路景点图2会员用户功能权限图管理员就是对网站维护的，通过后台能对前端页面进行管理。管理员通过后台能实现线路景点管理、预票管理、会员管理、用户反馈、酒店信息管理、美食信息管理等功能。管理员功能权限图如图3所示；预票管理会员管理预票管理会员管理用户反馈美食信息管理用户反馈美食信息管理线路景点管理线路景点管理酒店信息管理酒店信息管理管理员管理员图3管理员功能权限图第4章“眼明山”旅游网站系统设计网站系统功能设计眼明山旅游网站主要分为前端和后端，前端分为首页、线路景点、特色酒店、美食、相册五大模块组成，后端分为线路景点管理、预票管理、会员管理、用户反馈、酒店信息管理、美食信息管理六大模块组成。网站功能结构图如图4所示；眼明山旅游网站眼明山旅游网站后端前端后端前端美食信息管理会员管理用户反馈酒店信息管理预票管理景点管理首页线路景点特色酒店美美食信息管理会员管理用户反馈酒店信息管理预票管理景点管理首页线路景点特色酒店美食相册图4网站功能结构图网站各功能设计概述4.2.1网站注册登录模块眼明山旅游网站把用户分为普通用户、会员用户、管理员三种情况。普通用户只能浏览网页的内容，不能对我的预约、我的评价、我的收藏功能进行操作，要想对这里功能进行操作，先注册账号，再登录账号进入会员用户才能查看普通用户不能查看的功能。注册登录示意图如图5所示；用户用户网站首页网站首页是否注册是否注册否否用户注册登录界面用户注册登录界面是是输入账号和密码输入账号和密码是否登录成功是否登录成功是是否否网站首页网站首页图5注册登录示意图管理员管理员登录示意图如图6所示；管理员网站后台登录页面网站后台登录页面输入账号和密码输入账号和密码否是否登录成功否是否登录成功是是进入后台界面进入后台界面图6管理员登录示意图4.2.2网站管理模块眼明山旅游网站管理模块分为管理员管理模块和用户管理模块，管理员管理模块可以对线路景点管理、预票管理、会员管理、用户反馈、酒店信息管理、美食信息管理进行管理维护，比如说在线路景点管理添加景点的相关信息，在预票管理可以通过会员的预票信息，在会员管理可以对账号信息维护添加，在用户反馈出可以对会员用户反馈的信息进行维护收纳建议，在酒店信息管理可以对酒店相关信息进行维护添加，在美食信息管理可以对美食相关信息进行维护添加，这些管理模块都是管理员管理的范畴。用户管理是指注册账号成为会员用户的用户才能对会员信息进行维护，如会员用户在我的预约里面提前预约景点、在我的评价里评价景点相关信息等这些信息提交后都保存到了数据库，在后台管理员都能看到这些信息，进行维护。4.3数据库设计会员用户眼明山旅游网站数据库设计用E-R图表示，系统用户管理模块设计如图7所示；会员用户评价查看收藏 评价查看收藏美食相册特色酒店线路景点美食相册特色酒店线路景点后台管理后台管理管理员管理员图7系统用户管理模块图根据上面E-R图设计出下列数据表：表4-1：美食信息表、表4-2酒店信息表、表4-3：评价信息表、表4-4：相册信息表、表4-5：景点信息表、表4-6：用户信息表、表4-7：管理员信息表，具体如下所示;表4-1美食信息表字段名称字段描述数据类型字段长度idbianhaoint11introjieshaotext0xingmingmingzivarchar255img1zhaopianvarchar255img2zhaopianvarchar255img3zhaopianvarchar255shanchushanchubiaojiint11adderssdizhivarchar255表4-2酒店信息表字段名称字段描述数据类型字段长度idbianhaoint11introjieshaotext0xingmingmingzivarchar255img4zhaopianvarchar255img5zhaopianvarchar255img6zhaopianvarchar255shanchushanchubiaojiint11adderssdizhivarchar255表4-3评价信息表字段名称字段描述数据类型字段长度idbianhaoint50introjieshaotext0contentneirongvarchar255img7zhaopianvarchar255img8zhaopianvarchar255img9zhaopianvarchar255uidyonghuint50pidchanpinvarchar255表4-4相册信息表字段名称字段描述数据类型字段长度idbianhaoint11describeliuyantext0useridyonghuzhanghaovarchar255img10zhaopianvarchar255img11zhaopianvarchar255img12zhaopianvarchar255uidyonghuint50sidchanpinint11表4-5景点信息表字段名称字段描述数据类型字段长度idbianhaoint11coordinatezuobiaovarchar255xingmingmingzivarchar255adressdizhivarchar255img13zhaopianvarchar255img14zhaopianvarchar255xingmingmingzivarchar255pricejiagedouble112表4-6用户信息表字段名称字段描述数据类型字段长度idbianhaoint11xignmingmingzivarchar255shoujidianhuavarchar255idcardshenfenzhengvarchar255isdelshanchubiaojiint11usernamezhanghaovarchar255xingmingmingzivarchar255roleshenfenint11表4-7管理员信息表字段名称字段描述数据类型字段长度idbianhaoint11xignmingmingzivarchar255Usernameyonghumingvarchar255addtimetianjiariqivarchar255isdelshanchubiaojiint11passwordmimavarchar50cxleixingvarchar50hfhuifuneirongint5

第5章“眼明山”旅游网站的实现5.1网站前端实现5.1.1用户注册实现用户点击眼明山旅游网站顶部的登录按钮，就会进入登录界面，用户先注册账号成为会员用户，才能对相册、我的预约、我的评价、我的收藏等功能进行操作，不注册账号只能浏览不能操作。用户点击注册按钮，会跳转到注册按钮，输入想设置的用户名进行输入，接着输入密码，在确认密码，最后输入姓名、输入手机号点击注册按钮，跳转到首页就完成了注册。新用户注册界面图如图8所示；图8新用户注册界面图5.1.2用户登录实现用户先注册账号成为会员用户，才能对相册、我的预约、我的评价、我的收藏等功能进行操作，不注册账号只能浏览不能操作。注册过账号成为会员的用户，只需输入账号、密码点击登录按钮就能登录，登录成功后跳转到首页，首页会显示状态为会员用户状态。若输入账号或密码错误，点击登录按钮它会跳出小框里面会显示账号或密码错误。用户登录界面图如图9所示；图9用户登录界面图5.1.3前端具体功能实现打开眼明山旅游网站首页，给人的第一感觉是一种山青水秀、心旷神怡的美丽景区。不仅介绍美丽的景点，还介绍景区的美食、酒店，让人感到网站非常温馨。点击网站线路景点按钮，显示的是眼明山旅游网站特色景点，介绍了眼明山森林公园、陈列武器装备展示、眼明山窑洞人家、红石山、马跑泉、枣树林、古皂角树这七个特色景点，点击特色酒店，显示了景区附近眼明山贝尔特酒店、平顶山金沙湾大酒店、郏县菲特国际酒店这三个景区附近影响力大的酒店。点击美食按钮，显示了郏县饸饹面、郏县三郎庙牛肉、郏县豆腐菜、郏县烧鸡、郏县羊肉烩馍、郏县豆沫这六大景区当地特色美食。如图10、11、12所示；图10线路景点界面图图11特色酒店界面图图12美食界面图5.1.4用户添加相册实现添加相册功能是让广大游客旅游后自己认为景区比较好的景点上传到网站里，目的是能让更多人认识了解眼明山景区，吸引更多游客来这里游玩。相册界面图如图13所示；图13相册界面图5.2网站后端实现5.2.1后台登录实现管理员通过浏览器输入网址进入眼明山旅游网站后，点击右上方按钮，会跳转到进入后台登录界面，为您的账户输入正确的密码，这样您就可以登录到眼明山旅游网的后台并管理后台的内容，若输入账号或密码错误，会弹出小框显示账号或密码错误，需要重新登录。后台登录界面如图14所示；图14后台登录界面图5.2.2后台管理功能实现管理员进入眼明山网站后台，点击左边框线路景点管理按钮，会进入线路景点管理的页面，在这里，你可以添加、删除或编辑关于眼明山旅游景点的信息。点击左边框酒店信息管理按钮，会进入酒店信息页面，在这里可以对眼明山旅游景区附近的酒店可以添加、删除、修改等操作。点击左边框美食信息管理按钮，会进入美食信息管理的页面，在这里可以对眼明山旅游景区当地的美食可以添加、删除、修改等操作。如图15、16、17所示；图15线路景点管理界面图图16酒店信息管理界面图图17美食信息管理界面图5.2.3会员管理实现点击眼明山旅游网站后台管理页面左边框会员管理按钮，会进入会员管理页面，在这里可以对管理员相关信息添加、删除、修改等操作，也可以对会员相关信息进行添加、删除、修改等操作。会员管理信息界面图如图18所示；图18会员管理信息界面图5.2.4用户反馈实现当有眼明山旅游网站会员的用户在前端反馈内容时，后端用户反馈页面里面就会有会员用户反馈的内容，管理员可以对会员用户反馈的内容进行回复解答。用户反馈信息界面图如图19所示；图19用户反馈信息界面图第6章网站测试6.1网站测试目的眼明山旅游网站能不能正常投入使用，就要多次运行和测试，才能发现问题解决问题，最后达到投入使用的目的。6.2网站测试环境计算机设备：联想拯救者电脑；操作系统：Windows10；浏览器：谷歌浏览器、MicrosoftEdge。测试是一个网站设计完后投入使用前的一个重要环节，通过测试可以让网站在交付到用户之前尽可能的减少不必要的错误,避免逻辑错误和运行错误的发生，从而提高网站的设计质量[15]。6.3网站测试结果1、前台模块测试；普通用户注册：来到眼明山旅游网站首页，点击注册按钮按提示页面填写相关信息并通过管理员审核即为注册成功。会员用户登录：会员用户是有账号密码的用户，输入正确的账号和密码点击登录，会跳转到网站首页，菜单栏会显示会员标志，若输入账号或密码错误，点击登录会提示账号或密码错误，不会跳转首页。管理员登录：点击网站后台登录页面，输入正确的账号和密码点击登录会进入后台界面，会展示后台的管理功能，若输入的账号或密码错误，点击登录会提示账号或密码错误，会重新返回登录页面。线路景点：点击菜单栏线路景点，会展示眼明山景区七个特色景点，点击这七个景点还会对景点相关信息进行概述。特色酒店：点击菜单栏特色酒店，会展示眼明山景区附近三个有代表性的酒店，点击这三个酒店会有酒店的概述。美食：点击菜单栏美食，会展示眼明山景区当地六个特色的美食，点击这六个美食会有美食的概述。相册：点击菜单栏相册，里面有一个添加回忆按钮，点击它就可以添加相册，添加完相册，点击提交，会提示提交成功。2.后台模块测试；线路景点管理：点击后台管理左边框线路景点管理，会进入线路景点页面，点击上方添加按钮，输入景点相关信息，点击保存，会提示添加成功。预票管理：会员预约的景点在后台管理员可以对信息进行审核，有通过、否决两个按钮，管理员点击通过表示预约成功，点击否决表示预约失败，管理员审核后会员用户能看到预约的信息。会员管理：点击后台管理左边框会员管理，会进入会员管理，点击上方添加按钮，可以注册管理员和会员用户，输入相关信息点击注册，提示注册成功，就完成了管理员和会员用户的注册。酒店信息管理：点击后台酒店信息管理按钮，会进入酒店信息管理页面，点击上方添加按钮，输入酒店的相关信息，点击保存，会提示添加成功。美食信息管理：点击美食信息管理按钮，会进入美食信息管理页面，输入美食相关信息，点击保存，会提示添加成功。第7章总结本课题设计开发了一个基于H5技术的眼明山旅游网站，前端技术采用HTML5、CSS样式和JavaScript脚本语言，后端技术采