基于web的旅游网站设计与实现.doc

《基于web的旅游网站设计与实现.doc》由会员分享，可在线阅读，更多相关《基于web的旅游网站设计与实现.doc（35页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、广东东软学院本科生毕业设计（论文） 本科毕业设计（论文）基于Web的旅游网站设计与实现Design and Implementation of Tourism Website Based on Web 院 （系）计算机学院专 业数字媒体技术班 级16数媒技术4班学 号16210320405姓 名叶碧玲指导教师李梁奇提交日期2020年 4 月 20 日毕业设计（论文）原创性声明本人郑重声明：所呈交的毕业设计（论文），是本人在指导老师的指导下，独立进行的设计（研究）工作及取得的成果，论文中引用他人的文献、数据、图件、资料均已明确标注出，论文中的结论和结果为本人独立完成，不包含他人已经发表或撰写的作

2、品及成果。对本文的研究作出贡献的个人和集体，均已在论文中作了明确的说明。本人完全意识到本声明的法律结果由本人承担。毕业论文作者（签字）： 签字日期： 年 月 日成绩评定成绩项论文成绩（百分制）折合比例实得成绩（折合分）指导教师成绩30%评阅教师成绩20%答辩成绩50%总评成绩注：毕业设计（论文）成绩按百分制评定。答辩成绩不及格的（评分低于60分的），则该毕业设计（论文）总评成绩为答辩成绩。摘要随着经济和交通的快速发展，人们对于生活的追求不再停留在物质层面，而是开始了娱乐和精神层面的追求。旅游是现在大多数人在长假期选择的度过方式。如何快速获取各地最新的旅游信息以获得更好的旅游体验便成为旅游者的需

3、求。本课题是基于Web、Vue-cli脚手架、PHP技术和MySQL数据库实现的一个仅介绍国内旅游景点信息并将社交平台的模式与之结合的网站。网站选择B/S模式，前端采用Vue-cli脚手架进行模块式开发，用户可进行注册登录、浏览网页信息、搜索查询和发布动态等操作；后端采用PHP技术和MySQL数据库实现前端动态数据的存储、查询和删除，后端平台由管理员进行管理，可对数据进行增删改查，及时实现数据的更新和对数据库系统的优化和维护。关键词：Web 旅游网站 Vue-cli PHP MySQL数据库AbstractWith the rapid development of economy and tr

4、ansportation, peoples pursuit of life is no longer on the material level, but on the entertainment and spiritual level. Nowadays,travel is the chosen way to spend the long holidays by most people. How to get update travel information quickly to get a better travel experience has become the demand of

5、 tourists. This project is based on Web, Vue-cli, PHP and MySQL, to achieve a website which combines domestic tourist attractions information with social platform model. It chooses B/S mode, the front-end adopts Vue-cli for modular development, users can register, browse web information, search and

6、publish dynamic etc; The back-end adopts PHP technology and MySQL Database to store, inquire and delete the dynamic data of the front-end. The back-end platform is managed by the administrator, and the data can be added, deleted, and changed, timely update the data and optimize and maintain the data

7、base system.Keywords:Web travel website Vue-cli PHP MySQL 目录第1章 绪论11.1 课题研究目的和意义11.2 研究现状11.3 课题研究内容2第2章 相关技术背景32.1 Vue-cli概述32.2 PHP概述32.3 MySQL数据库42.4 B/S模式4第3章 系统分析53.1系统可行性分析53.2系统需求分析53.2.1系统运行环境53.2.2系统功能需求分析63.2.3系统数据需求分析63.3系统流程分析63.3.1系统运作流程分析63.3.2用户留言流程分析73.3.3用户更新信息流程分析8第4章 系统概要设计和数据库设计9

8、4.1系统概述94.2系统功能结构设计94.3数据库设计94.3.1数据库需求分析104.3.2数据库主要表单设计134.3.3数据库实现16第5章 系统详细设计和功能实现175.1数据库连接175.2旅游景点模块设计和实现175.3旅游线路模块设计和实现185.4用户分享模块设计和实现195.5后台管理设计和实现19第6章 系统测试216.1系统测试意义216.2系统测试流程216.3测试用例216.4测试结果分析22总结23参考文献24致谢25第1章 绪论1.1 课题研究目的和意义经济和交通的快速发展，使人们对于生活的追求不再停留在物质层面，而是开始了娱乐和精神层面的追求。旅游是现在大多数

9、人在长假期选择的度过方式，也是我国国民经济中最具发展优势和竞争优势的产业之一。中国产业信息网在2019年初发布的关于中国旅游市场的现状分析表明2018年与2012年相比国内旅行人次增加了25.83亿人次，同比分别增长10.76%。旅行收入增加了2.86万亿元，同比增长12.3%。2018年与2017年相比全国入境旅行人次增加了0.01亿人次，同比增长0.5%。近几年来我国的国内旅行人数和入境旅行人数都呈上升趋势，表明旅游业在我国国民经济中具有明显的竞争优势。旅游在经济发展和人民生活水平提高的形势下，已经成为大部分人的生活常态，如何快速获取各地最新的旅游信息以获得更好的旅游体验便成为旅游者的需求

10、。旅游需要了解目的地的交通、气候、环境和人文历史等信息，以获得更好的旅游体验。互联网技术的发展和大数据时代到来，使旅游网站顺势而生。旅游网站具有信息量大、内容丰富、数据更新较快、便于网友随时查询浏览且不占用系统空间等优势，也是大部分旅行社和地方宣传旅游景点和路线的首选，人们可以通过网站获取各地旅游景点信息，把握旅游出行的最佳时机和方式。1.2 研究现状Web的发展以网站模式的不同分为三个时代。 Web1.0 时代的网页以展示为主， 内容为静态，交互性和动态效果较少。 Web2.0时代的网页更注重交互性， 用户除了浏览网页， 还可以在网站上发布文字、 图片、 音频、 视频等资料。Web3.0时代

11、的网页能够通过第三方信息平台搜集不同网站的相关信息进行使用。HTML、CSS、JavaScript是Web前端开发比较重要的三种支柱性语言， 它们各司其职却又相互配合。HTML主要是通过各种语义标签对页面内容进行排版和内容规划；CSS主要改变的是网页的视觉样式，像是字体大小、颜色、阴影效果、透明度、还有一些简单的移动效果等都可用CSS实现；JavaScript主要是将网页的内容和代码分隔开，实现前后端的数据交互和DOM元素的改变。Web的发展也促进了我国旅游网站的发展。我国旅游业与互联网的融合始于1997年华夏旅游网的成立，这标志着我国旅游网站的发展进入萌芽阶段。2002年后我国旅游网站的发展

12、进入了增速阶段，出现了以携程和艺龙为代表的以在线预订为主要盈利的旅游电子商务网站。2005年，中国第一个旅游搜索引擎网站“去哪儿”网成立，实现在线比较国内航班和酒店的价格和功能，促进了在线旅游市场的发展。2010年来，在旅游市场和互联网技术发展的碰撞下，旅游网站的类型也越来越多，目前为止有地方性的旅游官网、提供景点信息介绍和交通住宿等的综合服务型旅游网站、提供旅游路线定制或自驾游等的特色旅游网站。1.3 课题研究内容本课题基于Web的旅游网站开发与实现，是用Vue、PHP和MySQL等技术配合开发一个为用户提供浏览和发布信息功能以及管理员管理网站信息功能的旅游网站。论文第一部分，概述了网站开发

13、的相关技术和知识。然后进行系统分析，系统分析是以实现系统开发目的为目的的，在系统分析过程中可以更好的了解系统各方面的功能，在相关技术的基础上将网站的功能和系统结构达到最优化。在系统开发中采用PHP实现系统的管理平台开发，MySQL存储和管理数据。PHP和MySQL在Web应用开发中较为常用，兼容性和配合度好，为系统的开发提供很好的技术支持。27第2章 相关技术背景2.1 Vue-cli概述Vue-cli是由vue官方提供的一个开发框架，它有一套完整的vue项目架构设计，能够让开发者节省时间，迅速地进行项目的开发。它具有简化网页的开发流程，降低开发难度，提高开发效率和系统的灵活性和可扩展性等优势

14、。在整个的项目文件中src文件是整个项目的核心文件，里面包含项目的主要代码文件和静态数据。src文件里面的index.html是整个vue项目的主页面，其内容通过路由加载的vue组件来填充，每一个组件也可以单独作为一个页面；main.js是项目的入口文件，主要引入根组件、路由设置，并定义vue实例。可以说index.html和main.js是整个项目启动时首先加载的页面资源和js资源。但由于main.js是入口文件不适合写逻辑，所以就将app.vue作为整个项目的顶级组件，每一个vue页面都由、和三部分组成。而其中的router文件下的index.js是路由配置文件，所有的组件要渲染到页面中，

15、需经过router文件的配置才能加载渲染。vue-cli是以组件的形式开发项目的，降低了代码的冗余，且利于后期网站的维护和扩展。其所用编程语言除了自身的前缀v-的指令外，还有基于HTML5的模板语法，对于熟悉HTML、CSS和JavaScript并对vue.js有一定了解的开发者而言简单易上手。Vue常用v-开头的指令为HTML元素添加一些特殊的行为。常用指令有v-if、v-show、v-else、v-for、v-bind、v-on等。2.2 PHP概述PHP是由美国人Rasnuslerdorf在1994年所创造的一种嵌入在HTML文档并在服务端执行的多用途脚本语言，它是融合了C语言、Java

16、和Perl语言以及自身的语法而创造的一门语言。PHP与其他的开发语言配合度高，实用性强，且编辑简单，易于学习，在web开发领域中被广泛应用。PHP是完全免费公开的自由软件，并且所有的PHP源代码都是开源的。PHP具有快速的执行动态网页，运行效率高等特点。PHP能够在Windows、Mac、Linux等主要的操作系统上运行，跨平台性强。另外，PHP不仅支持MySQL、PostgreSQL、Oracle、Microsoft SQL Server等许多流行的数据库，而且支持Apache、IIS等大多数网络服务器。2.3 MySQL数据库MySQL是由瑞典MySQL AB公司开发的一种关联数据库管理系

17、统，用于存放网站上的动态信息，如用户的相关信息、网页上需动态加载的信息等。MySQL为动态网站的建立提供了强大的数据库技术支持，被广泛应用于网站开发，是网站开发最常用的关系型数据库管理系统之一。MySQL数据库以表格的形式来存储数据，一个数据库可以有若干的数据表单，数据表单之间可以是相互独立的也可以是相互关联的。每一个数据表单都由行和列组成，每一列是所要存储的数据的字段和字段值，每一行都是一组相关的数据。每一个表单都会有而且只能有一个主键，主键可以作为与另一个表单建立关联的外键。MySQL具有如下优点：(1)支持多种系统和编程语言，兼容性好，数据库的可使用性强；（2）支持多线程，提高了运行效率

18、；（3）提供了数据库操作工具，使数据库可视化，易于优化和管理；（4）免费开源，支持大型数据库，体积小，内存大；2.4 B/S模式B/S模式又称B/S结构，是Web盛行后的一种网络结构模式。B/S模式兴起后，对于客户端的限制就大大减小，用户只要在有浏览器的客户端上通过浏览器就可以访问网站页面，浏览网页上的信息。服务器与数据库连接进行数据交互，将响应的数据信息返回并渲染到网页上。在B/S模式下，网站的主要事物逻辑大都是在服务端实现的，客户端的零安装和零维护使得网站的升级和维护越发简单，只要对服务器进行维护和升级即可，大大节省了人力物力和开发成本。 第3章 系统分析3.1 系统可行性分析基于Web的

19、旅游网站系统开发主要是实现国内各地旅游信息和用户信息的存储与展示，用户可浏览查询景点信息，用户可在网站注册登录，并在分享区中发布自己的动态信息。本课题从以下两方面对网站开发的可行性进行分析：（1）技术可行性。该网站系统主要用HTML5+Vue-cli+PHP+MySQL基于B/S模式进行开发。HTML5是Web前端开发技术的主流，Vue-cli也是vue提供的一种JavaScript框架，两者融合性高，能很好的完成网页的布局、美化和动态效果。Vue-cli脚手架使网站能进行组件化开发，让网站在开发的过程中和后期扩展与维护都更为简便。PHP支持多种操作系统和服务器，具有平台兼容性强，实用性强，开

20、发效率高等特点，被广泛应用于Web开发领域。MySQL支持多种操作系统和编程语言，具有体积小、查询速度快、性能稳定等优势。所以开发一个Web旅游网站是具备成熟的技术支持的。（2）市场可行性。中国产业信息网在2019年初发布的关于中国旅游市场现状分析表明2018年与2012年相比国内旅行人次增加了25.83亿人次，同比分别增长10.76%。旅行收入增加了2.86万亿元，同比增长12.3%。这些数据表明旅游业已成为国民经济中具有明显竞争优势的产业之一，旅游在经济发展和人民生活水平提高的形势下，已经成为人们的生活常态。在线度假旅游占比提升。国民消费水平的提高使旅游外出的需求也逐渐增加。在线交通、住宿

21、、度假旅游也随着互联网技术的发展顺势而生，游客可以在网上随时随地的了解各种旅游景点和当地娱乐设施。消费水平的提升也使游客对旅游体验的要求越来越重视，这也促进了在线旅游的发展。所以旅游网站的开发具有强大的群众基础和市场需求。3.2 系统需求分析需求分析是为了明确用户需求，了解系统要为用户提供什么样的功能，确定系统的数据需求是后期系统功能和数据库设计的前提。可以通过信息采集和其他旅游系统的用户反馈进行分析，根据这些数据来设计网站的功能。3.2.1系统运行环境本旅游网站的运行必须在安装了Apache服务器、MySQL数据库等软件的计算机上。网站系统的开发使用了，Apache服务器，HBuilderX

22、开发软件,MySQL数据库和Photoshop等软件。3.2.2系统功能需求分析本网站的用户类型有游客、普通用户和管理员。游客可以浏览网站内的景点信息和留言，但是无法发布留言，注册成为普通用户后登录，才可以发布留言和进行个人信息管理。管理员可以对网站所有信息和用户进行管理。1.用户功能：（1）信息浏览：用户无需登录即可根据网站导航浏览或查找网站上的旅游信息，但是不能发布留言；（2）留言功能：用户注册登录后可以在分享区发布留言，对自己曾去过的城市或景点留下自己最真实的体验感受，共享旅游体验，为其他用户提供参考；（3）信息修改：已注册的用户可以再个人的信息界面对自己的个人信息进行修改，更新自己的信

23、息，删除自己的留言和留言下的评论。2.管理员功能：（1）信息发布：管理员可以在后台向景点信息表数添加景点信息来发布旅游信息到网页上；（2）信息修改：管理员可以对景点信息和城市信息进行删除、修改、查询；用户管理：管理员可以对用户发布的留言和评论进行删除；3.2.3系统数据需求分析网站上显示的信息和用户的数据都是需要存储和更新的，根据需求分析本网站的数据需求如下：（1）用户信息：昵称、密码、头像、手机号等；（2）留言信息：用户昵称、用户头像、留言时间、留言内容、评论等；（3）景点信息：景点分类、景点名称、景点图片、景点介绍等；（4）路线信息：路线名称、时间、旅行社、天数等；（5）管理员信息：账号、

24、密码等3.3 系统流程分析3.3.1系统运作流程分析用户不用登录即可进入网站浏览网站上的内容，若用户要发布信息，系统会自动判断用户是否登录。未登录则跳转到登录界面，输入相应的个人信息，系统会向数据库发送请求，验证用户信息是否存在或正确，信息正确则登录成功，信息错误则登录失败。登录成功之后便可发布自己的动态，网页会一直保存用户的登录状态，直到用户手动退出登录。系统运作流程图如3-2所示。图3-2系统运作流程分析图3.3.2用户留言流程分析用户进入分享区点击“我要分享”图标即可输入内容发布自己的旅游体验与其他用户分享。点击发布后该数据会被发送到后端存储到数据库，存储成功就返回发布成功的提示，页面刷

25、新加载数据，存储失败返回发布失败的提示，用户可重新输入内容。用户发布信息流程图如图3-5。图3-5用户发布信息流程图3.3.3用户更新信息流程分析登录的用户进入个人界面可修改个人信息和删除留言。用户选择要修改的信息进入相应的修改界面，填写新的信息确认修改，后端会返回提示成功或失败的信息提示。删除即点击每条留言对应的删除按钮确认删除，即可删除该留言。更新信息流程图如图3-6所示。图3-6用户更新信息流程图第4章 系统概要设计和数据库设计4.1 系统概述本旅游网站是基于Web的B/S模式开发的，用户只要在客户端上通过浏览器就可以访问本网站的界面并浏览相关信息。用户通过浏览器触发某一事件就可以通过服

26、务器访问数据库，实现前后端的数据交互。如图4-1所示。图4-1网站工作原理图4.2 系统功能结构设计根据网站的功能需求分析设计网站功能包括客户端和后台管理。客户端的功能包括登录注册、发布留言、上传图片、修改个人信息、浏览旅游信息。后台管理的功能包括添加、删除、修改、查询数据库信息。如图4-2所示。图4-2系统功能结构图4.3 数据库设计4.3.1数据库需求分析每一个系统的功能的实现都是在数据库的支持下实现的，所以对于一个旅游网站的实现数据库的设计是必不可少的。首先要进行数据库的实体属性图分析，才能进行数据库表单的结构设计和数据库的实现。根据需求分析来确定网站中的实体和其属性，还有实体和实体之间

27、的关联。根据从简单到复杂的设计方式，先确定网站的需要哪些实体，并对该实体的属性进行分析，从而得出各实体属性图，最后得出完整的E-R图。通过分析，该网站需要以下实体：用户实体属性图如图4-3所示。图4-3用户实体属性图景点实体属性图如图4-4所示。图4-4景点信息实体属性图景点详细实体属性图如图4-5所示。图4-5景点详细实体属性图发布动态实体属性图如图4-6所示。图4-6用户发布动态信息实体属性图评论实体属性图如图4-7所示。图4-7评论实体属性图路线实体属性图如图4-8所示。图4-8路线实体属性图根据各个实体之间的联系做出E-R图，如图4-9所示图4-9网站实体E-R关系图4.3.2数据库主

28、要表单设计完成E-R关系图，了解数据之间的联系后，根据E-R关系图得出该数据库应该有以下主要表单。1.保存用户信息的数据表：用户表(users)（如表4-1所示）用来保存用户信息，主要字段有id（自增，唯一），用户名，用户密码，手机号，用户头像；2.保存用户留言的数据表:用户留言表（users_comment）（如表4-2所示）用来存放用户发布的留言，主要字段有id（自增，唯一），用户名，留言内容，发布时间，用户头像，图片，用户表id（外键）；3.保存用户评论的数据表:用户评论表（users_commentchilds）（如表4-3所示）用来存放用户在留言下发布的评论，主要字段有id（自增，唯

29、一），用户名，评论内容，评论时间，用户头像，被评论的留言id（外键），用户表id（外键）；4.保存旅游景点信息的数据表：旅游景点表（jingdian_name）（如表4-4所示）用来保存各旅游景点信息，主要字段有id（自增，唯一），景点分类名称，图片，景点概述；5.存放旅游景点详细信息的数据表：旅游景点详情表（jingdian_detailed）（如表4-5所示）存放的是景点分类下的具体旅游景点名称和详情页面的网址链接，主要字段有id（自增，唯一），景点名字，详情页面的网址链接，旅游景点表的id（外键）；6.存放路线信息的数据表：路线表（luxian）（如表4-6所示）存放的是推荐给用户的旅行

30、社的旅游线路信息，主要字段有id（自增，唯一），旅行社名称，线路名称，发团时间，行程天数。具体表单设计如下：表4-1 用户信息（users）数据表字段数据类型长度主键允许空说明idint11是否编号（主键）userNamevarcahr50否用户名passWordvarcahr50否用户密码phoneNumbervarcahr50否用户手机号user_imgvarcahr300否用户头像表4-2用户留言信息（users_comment）表字段数据类型长度主键允许空说明idint11是否编号userNamevarcahr20否用户名user_commenttext否发布的内容comment_ti

31、mevarcahr20是发布动态时间user_imgvarcahr300用户头像users_idint11外键（用户表id）表4-3用户评论信息（users_commentchilds）表字段数据类型长度主键允许空说明idint11是否编号commentchild_imgvarcahr300否用户名头像commentchild_usernametext否发布的内容commentchild_timevarcahr20是评论时间commentchild_commentvarcahr300评论内容users_comment_idint11外键（用户发布动态信息表id）表4-4旅游景点信息（jingd

32、ian_name）表字段数据类型长度主键允许空说明idint11是否编号namevarchar20否分类景点名称detail_url1varchar300是页面展示图片detail_url2varchar300是页面展示图片detail_url3varchar300是页面展示图片detail_url4varchar300是页面展示图片detail_introductiontext是景点介绍内容表4-5景点详细信息（jingdian_detailed）表字段数据类型长度主键允许空说明idint11是否编号namevarcahr20否具体景点名称Jingdian_namevarcahr20否外键s

33、cenic_spottext是景点介绍文章表4-6路线信息（luxian）表字段数据类型长度主键允许空说明idint11是否编号luxian_imgvarcahr300否展示的图片luxian_routevarcahr50否路线标题luxian_timevarcahr50否发团时间路线travel_agencyvarcahr50否旅行社名字agency_urlvarcahr50否旅行社链接4.3.3数据库实现数据库的实现使用MySQL数据库的管理工具phpMyAdmin，创建datas数据库，按照数据库的表格设计创建相应的数据表单。数据库语言主要使用mysql。第5章 系统详细设计和功能实现5

34、.1 数据库连接网站的运行涉及到数据库的使用，所以要正常运行网站，首先要进行数据库的连接，实现数据的获取。mysqli_connect(localhost,root,sql191223,datas)5.2 旅游景点模块设计和实现旅游景点模块是向用户展示国内各旅游景点的详细信息的模块。景点显示包括景点分类和各景点的详细信息内容显示，景点的信息浏览将数据库中的景点分类和景点详细信息查询出来，在页面中将景点的分类和名称渲染显示出来。简洁美观的页面和井然有序的信息布局方便用户浏览和查找信息。每一景点分类都会有相应的图片展示，以吸引用户对于详细的景点进行浏览。当页面内容过多时，用户想要浏览某一个景点分类

35、的具体景区，需花费过多的时间去滑动不需浏览的信息。为了方便用户浏览，当页面滑动距离大于景点分类div的高度时，这个景点分类div就会固定在浏览窗口顶部，点击分类中的类目就会滑动到相应区域。如图5-1所示图5-1景点模块实现图点击类目页面滑动到相应区域的效果实现代码,如图5-2所示图5-2效果实现代码图5.3 旅游线路模块设计和实现旅游线路模块是将各旅行社的旅游线路的具体信息向用户展示的模块，在每个景点的详情页面都会有相关的路线推荐。路线的展示包括图片、路线、旅行社和发团的时间。路线的信息是通过查询数据库显示的，每个旅行社都添加网址链接，用户可以到旅行社的网页了解相关路线的信息。如图5-3所示图

36、5-3路线模块实现图5.4 用户分享模块设计和实现用户分享模块是为用户提供的共享旅游体验和信息的模块，用户可以分享自己的旅游经历和旅游攻略，也可以在交流中获取新的信息。用户登录后，在分享区发布动态上传图片，也可以评论自己感兴趣的动态。分享的信息展示主要包括用户的头像、用户名、发布的部分内容、时间和评论数。点击查看全部的标签可以进入该条动态的详情页面，查看所有评论。用户的留言先保存到数据库，再通过查询返回显示到前端页面。如图5-4所示图5-4分享模块实现图5.5 后台管理设计和实现在后台管理系统管理员点击左侧边栏列表的景点表单名字，系统会查询数据库显示对应的表单数据。管理员选中表格中的一行数据选

37、择修改、删除按钮可以对景点分类、景区详细信息、路线信息和用户留言信息进行修改、删除。管理员也可以查找相关的景点分类、景区详细信息，路线信息和用户，如图5-5所示。通过添加按钮可以进入后台的添加界面，管理员可以添加景点信息、路线信息，上传城市的旅游宣传短片，如图5-6所示图5-5后台信息管理实现图图5-6后台信息添加实现图第6章 系统测试6.1 系统测试意义由于网络环境复杂多变以及用户所用浏览器的差异，系统测试对网站开发有着重要作用。系统测试的目的主要是为了检测系统的缺陷，然后修改和完善系统。系统测试可以分为内测和整体测试，内测是对网站内的每个功能模块进行重复的测试，寻找可能存在或忽略的问题，然

38、后修改完善；整体测试是对网站在大的访问量下的稳定性和在不同浏览器上的兼容性的测试。通过系统测试可以更好的完善系统，确保网站的稳定性和兼容性，让用户获得更好的使用体验。6.2 系统测试流程系统测试需要经过测试需求分析，测试计划，编写测试用例，测试执行，测试评估等几个阶段。所以在对本网站的测试中，首先进行了测试需求分析，了解用户需求以确定系统要进行那些测试。通过需求分析后编写测试用例，然后在系统的运行环境中进行用例测试，最后对测试结果进行分析。测试流程如图6-1所示图6-1系统测试流程图6.3 测试用例系统测试方法有黑盒测试和白盒测试。黑盒测试又叫功能测试，主要对网站功能的页面、链接、表单和数据库

39、进行测试 ，本网站采用黑盒测试的方法在不同浏览器对本网站的用户登录功能进行测试。登录功能测试用例如表6-1所示表6-1登录功能测试用例测试类型功能测试模块名称向心之旅系统用户登录用例描述该用例用来测试用户在登录界面能否正常登录，如果出错，是否有错误信息提示前题条件存在正确的用户名和密码，登录页面正常，错误提示正常(数据库存在的用户名：kk；密码：123456789)编号测试项操作步骤数据期望结果1界面检查1.通过路由进入界面2.查看页面样式进入登录界面的路由：/login1.正常进入页面2.页面样式正常显示2用户登录1.输入正却的用户名；2.输入错误的密码；3.点击登录按；1.用户名：kk2.

40、密码:123tyjfd$#3.点击登录返回“用户名或密码错误”的信息，不能正常登录1.输入错误的用户名；2.输入正确的密码；3.点击登录按钮；1.用户名:ktov$%2.密码：1234567893.点击登录返回“用户名或密码错误”的信息，不能正常登录1.输入错误的用户名；2.输入错误的密码；3.点击登录按钮1.用户名:ktov$%2.密码：123tyjfd$#3.点击登录返回“用户名或密码错误”的信息，不能正常登录1.输入正确的用户名；2.输入正确的密码；3.点击登录按钮1.用户名:kk2.密码：1234567893.点击登录跳转上一页面，导航栏显示“欢迎，kk”，正常登陆不输入信息，直接点击

41、登录点击登录页面显示“输入用户名”的提示信息6.4 测试结果分析网站页面样式正确，整体风格统一，页面之间的交互响应和数据正确；登录功能的链接、表单和接口功能无误，能正确判断用户输入的信息并返回相应的信息提示；兼容性一般，在360、火狐、搜狗浏览器上网页和功能都可以正常显示和执行，在IE11版本的浏览器上 display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;的CSS样式不兼容。总结本课题网站结合了vue、HTML5、CSS、JavaScript、B/S模式、PHP、MySQL数据库多种语言和技术设计实现

42、，是将旅游信息展示与社交平台模式相结合的一个旅游网站。由于在这之前没有过开发一个完整网站的实践经历，对后端数据接口和跨域请求的问题也不是很了解，对于开发语言的掌握也没有达到熟练运用的程度。所以在整个项目的设计和实现的过程中由于经验的缺乏和技术能力的限制，虽然基本实现了前期设计的功能，但是整个项目在功能和信息的延展方面还是存在很多不足和不完善的地方。完成毕业设计的过程是一个不断学习成长的过程。整个项目经历了前期的资料查找，网页设计，数据库设计和后面的网站实现。在网站实现的这个过程中会不断的出现问题，像是刚开始在做用户登录功能时，用户登录成功后一刷新页面用户的登录信息也被刷新消失，这就面临着如何判

43、断用户是否登录，如何保持用户的登录状态的问题。但是有问题就要去解决，在解决的过程中就可以收获到新的知识。通过在网上查找资料，自己实践，最终用vue的Vuex的核心方法Store解决了问题。每遇到一个问题就会学习到新的知识，在出现问题解决问题的过程中，我不断的积累经验，提升自身的学习和实践能力。参考文献1陈豪文,周璐雨,宁志豪.浅谈Web发展及现状J.计算机产品与流通,2019(06):104.2朱二华.基于Vue.js的Web前端应用研究J.科技与创新,2017(20):119-121. 3蔡志濠.2019年中国在线旅游行业市场发展现状分析 80、90后成在线旅游主力人群Z.前瞻产业研究院,2

44、019. 4何秀芬,杜艳艳.浅谈旅游网站设计J.中国市场,2010(18):120-121.5蔡长征.数据库设计在网站开发中的应用研究J.科技风,2019(35):80.6李素铎,马仲海.浅谈网站测试的基本方法J.计算机时代,2008(08):14-15.7高慧.浅谈Web前端开发技术以及优化J.中国信息化,2019(12):59-60.8王赫.Web前端开发技术以及优化方向分析J.科技传播,2016,8(08):70+77.9黄涓,鲍正德,李晨曦.旅游网站的建构与设计以国内六大旅游网站为例J.信息与电脑(理论版),2019,31(22):52-54.10 王珊.萨师煊编著.数据库系统概论M.

45、高等教育出版社,2017-3.11 马新强.孙兆.袁哲.Web标准与HTML5的核心技术研究J.重庆文理学院学报：自然科学版,2010,29(6):61-65.致谢时光荏苒，如白驹过隙，大学四年的时光也悄然接近尾声。在大学的这段时光有收获，有感悟，有成长，在最后的这一年更多的却是感恩。感谢给予我指导和帮助的老师和同学。首先感谢的是我的导师-李梁奇老师，在准备毕业论文的这段时间给予了我很多的帮助。在论文的开题报告和完成论文的撰写中为我答疑、提醒我论文撰写的注意事项和误区，多次帮我指出论文中的不足，耐心帮助我修改论文。为我的论文完成提供了很大的帮助。其次是我的舍友许钰婷和赵婷婷，在开始做毕业设计和构思论文前期，她们在我查找资料和完善论文提纲时给予了我一些建议，为我的毕业设计思路和一些技术上的问题提供很大帮助。在进行项目制作和论文撰写中，他们也经常为我解答难题，让我更有信心完成毕业设计。最后