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

摘要随着经济和交通的快速发展，人们对于生活的追求不再停留在物质层面，而是开始了娱乐和精神层面的追求。旅游是现在大多数人在长假期选择的度过方式。如何快速获取各地最新的旅游信息以获得更好的旅游体验便成为旅游者的需求。本课题是基于Web、Vue-cli脚手架、PHP技术和MySQL数据库实现的一个仅介绍国内旅游景点信息并将社交平台的模式与之结合的网站。网站选择B/S模式，前端采用Vue-cli脚手架进行模块式开发，用户可进行注册登录、浏览网页信息、搜索查询和发布动态等操作；后端采用PHP技术和MySQL数据库实现前端动态数据的存储、查询和删除，后端平台由管理员进行管理，可对数据进行增删改查，及时实现数据的更新和对数据库系统的优化和维护。关键词：Web旅游网站Vue-cliPHPMySQL数据库

AbstractWiththerapiddevelopmentofeconomyandtransportation,people'spursuitoflifeisnolongeronthemateriallevel,butontheentertainmentandspirituallevel.Nowadays,travelisthechosenwaytospendthelongholidaysbymostpeople.Howtogetupdatetravelinformationquicklytogetabettertravelexperiencehasbecomethedemandoftourists.ThisprojectisbasedonWeb,Vue-cli,PHPandMySQL,toachieveawebsitewhichcombinesdomestictouristattractionsinformationwithsocialplatformmodel.ItchoosesB/Smode,thefront-endadoptsVue-cliformodulardevelopment,userscanregister,browsewebinformation,searchandpublishdynamicetc;Theback-endadoptsPHPtechnologyandMySQLDatabasetostore,inquireanddeletethedynamicdataofthefront-end.Theback-endplatformismanagedbytheadministrator,andthedatacanbeadded,deleted,andchanged,timelyupdatethedataandoptimizeandmaintainthedatabasesystem.Keywords:WebtravelwebsiteVue-cliPHPMySQL目录TOC\o"1-3"\h\u第1章绪论 第1章绪论课题研究目的和意义经济和交通的快速发展，使人们对于生活的追求不再停留在物质层面，而是开始了娱乐和精神层面的追求。旅游是现在大多数人在长假期选择的度过方式，也是我国国民经济中最具发展优势和竞争优势的产业之一。中国产业信息网在2019年初发布的关于中国旅游市场的现状分析表明2018年与2012年相比国内旅行人次增加了25.83亿人次，同比分别增长10.76%。旅行收入增加了2.86万亿元，同比增长12.3%。2018年与2017年相比全国入境旅行人次增加了0.01亿人次，同比增长0.5%。近几年来我国的国内旅行人数和入境旅行人数都呈上升趋势，表明旅游业在我国国民经济中具有明显的竞争优势。旅游在经济发展和人民生活水平提高的形势下，已经成为大部分人的生活常态，如何快速获取各地最新的旅游信息以获得更好的旅游体验便成为旅游者的需求。旅游需要了解目的地的交通、气候、环境和人文历史等信息，以获得更好的旅游体验。互联网技术的发展和大数据时代到来，使旅游网站顺势而生。旅游网站具有信息量大、内容丰富、数据更新较快、便于网友随时查询浏览且不占用系统空间等优势，也是大部分旅行社和地方宣传旅游景点和路线的首选，人们可以通过网站获取各地旅游景点信息，把握旅游出行的最佳时机和方式。1.2研究现状Web的发展以网站模式的不同分为三个时代。Web1.0时代的网页以展示为主，内容为静态，交互性和动态效果较少。Web2.0时代的网页更注重交互性，用户除了浏览网页，还可以在网站上发布文字、图片、音频、视频等资料。Web3.0时代的网页能够通过第三方信息平台搜集不同网站的相关信息进行使用。HTML、CSS、JavaScript是Web前端开发比较重要的三种支柱性语言，它们各司其职却又相互配合。HTML主要是通过各种语义标签对页面内容进行排版和内容规划；CSS主要改变的是网页的视觉样式，像是字体大小、颜色、阴影效果、透明度、还有一些简单的移动效果等都可用CSS实现；JavaScript主要是将网页的内容和代码分隔开，实现前后端的数据交互和DOM元素的改变。Web的发展也促进了我国旅游网站的发展。我国旅游业与互联网的融合始于1997年华夏旅游网的成立，这标志着我国旅游网站的发展进入萌芽阶段。2002年后我国旅游网站的发展进入了增速阶段，出现了以携程和艺龙为代表的以在线预订为主要盈利的旅游电子商务网站。2005年，中国第一个旅游搜索引擎网站——“去哪儿”网成立，实现在线比较国内航班和酒店的价格和功能，促进了在线旅游市场的发展。2010年来，在旅游市场和互联网技术发展的碰撞下，旅游网站的类型也越来越多，目前为止有地方性的旅游官网、提供景点信息介绍和交通住宿等的综合服务型旅游网站、提供旅游路线定制或自驾游等的特色旅游网站。1.3课题研究内容本课题基于Web的旅游网站开发与实现，是用Vue、PHP和MySQL等技术配合开发一个为用户提供浏览和发布信息功能以及管理员管理网站信息功能的旅游网站。论文第一部分，概述了网站开发的相关技术和知识。然后进行系统分析，系统分析是以实现系统开发目的为目的的，在系统分析过程中可以更好的了解系统各方面的功能，在相关技术的基础上将网站的功能和系统结构达到最优化。在系统开发中采用PHP实现系统的管理平台开发，MySQL存储和管理数据。PHP和MySQL在Web应用开发中较为常用，兼容性和配合度好，为系统的开发提供很好的技术支持。第2章相关技术背景2.1Vue-cli概述Vue-cli是由vue官方提供的一个开发框架，它有一套完整的vue项目架构设计，能够让开发者节省时间，迅速地进行项目的开发。它具有简化网页的开发流程，降低开发难度，提高开发效率和系统的灵活性和可扩展性等优势。在整个的项目文件中src文件是整个项目的核心文件，里面包含项目的主要代码文件和静态数据。src文件里面的index.html是整个vue项目的主页面，其内容通过路由加载的vue组件来填充，每一个组件也可以单独作为一个页面；main.js是项目的入口文件，主要引入根组件、路由设置，并定义vue实例。可以说index.html和main.js是整个项目启动时首先加载的页面资源和js资源。但由于main.js是入口文件不适合写逻辑，所以就将app.vue作为整个项目的顶级组件，每一个vue页面都由<template>、<script>和<style>三部分组成。而其中的router文件下的index.js是路由配置文件，所有的组件要渲染到页面中，需经过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.2PHP概述PHP是由美国人Rasnuslerdorf在1994年所创造的一种嵌入在HTML文档并在服务端执行的多用途脚本语言，它是融合了C语言、Java和Perl语言以及自身的语法而创造的一门语言。PHP与其他的开发语言配合度高，实用性强，且编辑简单，易于学习，在web开发领域中被广泛应用。PHP是完全免费公开的自由软件，并且所有的PHP源代码都是开源的。PHP具有快速的执行动态网页，运行效率高等特点。PHP能够在Windows、Mac、Linux等主要的操作系统上运行，跨平台性强。另外，PHP不仅支持MySQL、PostgreSQL、Oracle、MicrosoftSQLServer等许多流行的数据库，而且支持Apache、IIS等大多数网络服务器。2.3MySQL数据库MySQL是由瑞典MySQLAB公司开发的一种关联数据库管理系统，用于存放网站上的动态信息，如用户的相关信息、网页上需动态加载的信息等。MySQL为动态网站的建立提供了强大的数据库技术支持，被广泛应用于网站开发，是网站开发最常用的关系型数据库管理系统之一。MySQL数据库以表格的形式来存储数据，一个数据库可以有若干的数据表单，数据表单之间可以是相互独立的也可以是相互关联的。每一个数据表单都由行和列组成，每一列是所要存储的数据的字段和字段值，每一行都是一组相关的数据。每一个表单都会有而且只能有一个主键，主键可以作为与另一个表单建立关联的外键。MySQL具有如下优点：(1)支持多种系统和编程语言，兼容性好，数据库的可使用性强；（2）支持多线程，提高了运行效率；（3）提供了数据库操作工具，使数据库可视化，易于优化和管理；（4）免费开源，支持大型数据库，体积小，内存大；2.4B/S模式B/S模式又称B/S结构，是Web盛行后的一种网络结构模式。B/S模式兴起后，对于客户端的限制就大大减小，用户只要在有浏览器的客户端上通过浏览器就可以访问网站页面，浏览网页上的信息。服务器与数据库连接进行数据交互，将响应的数据信息返回并渲染到网页上。在B/S模式下，网站的主要事物逻辑大都是在服务端实现的，客户端的零安装和零维护使得网站的升级和维护越发简单，只要对服务器进行维护和升级即可，大大节省了人力物力和开发成本。第3章系统分析3.1系统可行性分析基于Web的旅游网站系统开发主要是实现国内各地旅游信息和用户信息的存储与展示，用户可浏览查询景点信息，用户可在网站注册登录，并在分享区中发布自己的动态信息。本课题从以下两方面对网站开发的可行性进行分析：（1）技术可行性。该网站系统主要用HTML5+Vue-cli+PHP+MySQL基于B/S模式进行开发。HTML5是Web前端开发技术的主流，Vue-cli也是vue提供的一种JavaScript框架，两者融合性高，能很好的完成网页的布局、美化和动态效果。Vue-cli脚手架使网站能进行组件化开发，让网站在开发的过程中和后期扩展与维护都更为简便。PHP支持多种操作系统和服务器，具有平台兼容性强，实用性强，开发效率高等特点，被广泛应用于Web开发领域。MySQL支持多种操作系统和编程语言，具有体积小、查询速度快、性能稳定等优势。所以开发一个Web旅游网站是具备成熟的技术支持的。（2）市场可行性。中国产业信息网在2019年初发布的关于中国旅游市场现状分析表明2018年与2012年相比国内旅行人次增加了25.83亿人次，同比分别增长10.76%。旅行收入增加了2.86万亿元，同比增长12.3%。这些数据表明旅游业已成为国民经济中具有明显竞争优势的产业之一，旅游在经济发展和人民生活水平提高的形势下，已经成为人们的生活常态。在线度假旅游占比提升。国民消费水平的提高使旅游外出的需求也逐渐增加。在线交通、住宿、度假旅游也随着互联网技术的发展顺势而生，游客可以在网上随时随地的了解各种旅游景点和当地娱乐设施。消费水平的提升也使游客对旅游体验的要求越来越重视，这也促进了在线旅游的发展。所以旅游网站的开发具有强大的群众基础和市场需求。3.2系统需求分析需求分析是为了明确用户需求，了解系统要为用户提供什么样的功能，确定系统的数据需求是后期系统功能和数据库设计的前提。可以通过信息采集和其他旅游系统的用户反馈进行分析，根据这些数据来设计网站的功能。3.2.1系统运行环境本旅游网站的运行必须在安装了Apache 服务器、MySQL数据库等软件的计算机上。网站系统的开发使用了，Apache服务器，HBuilderX开发软件,MySQL数据库和Photoshop等软件。3.2.2系统功能需求分析本网站的用户类型有游客、普通用户和管理员。游客可以浏览网站内的景点信息和留言，但是无法发布留言，注册成为普通用户后登录，才可以发布留言和进行个人信息管理。管理员可以对网站所有信息和用户进行管理。1.用户功能：（1）信息浏览：用户无需登录即可根据网站导航浏览或查找网站上的旅游信息，但是不能发布留言；（2）留言功能：用户注册登录后可以在分享区发布留言，对自己曾去过的城市或景点留下自己最真实的体验感受，共享旅游体验，为其他用户提供参考；（3）信息修改：已注册的用户可以再个人的信息界面对自己的个人信息进行修改，更新自己的信息，删除自己的留言和留言下的评论。2.管理员功能：（1）信息发布：管理员可以在后台向景点信息表数添加景点信息来发布旅游信息到网页上；（2）信息修改：管理员可以对景点信息和城市信息进行删除、修改、查询；用户管理：管理员可以对用户发布的留言和评论进行删除；3.2.3系统数据需求分析网站上显示的信息和用户的数据都是需要存储和更新的，根据需求分析本网站的数据需求如下：（1）用户信息：昵称、密码、头像、手机号等；（2）留言信息：用户昵称、用户头像、留言时间、留言内容、评论等；（3）景点信息：景点分类、景点名称、景点图片、景点介绍等；（4）路线信息：路线名称、时间、旅行社、天数等；（5）管理员信息：账号、密码等3.3系统流程分析3.3.1系统运作流程分析用户不用登录即可进入网站浏览网站上的内容，若用户要发布信息，系统会自动判断用户是否登录。未登录则跳转到登录界面，输入相应的个人信息，系统会向数据库发送请求，验证用户信息是否存在或正确，信息正确则登录成功，信息错误则登录失败。登录成功之后便可发布自己的动态，网页会一直保存用户的登录状态，直到用户手动退出登录。系统运作流程图如3-2所示。图3-2系统运作流程分析图3.3.2用户留言流程分析用户进入分享区点击“我要分享”图标即可输入内容发布自己的旅游体验与其他用户分享。点击发布后该数据会被发送到后端存储到数据库，存储成功就返回发布成功的提示，页面刷新加载数据，存储失败返回发布失败的提示，用户可重新输入内容。用户发布信息流程图如图3-5。图3-5用户发布信息流程图3.3.3用户更新信息流程分析登录的用户进入个人界面可修改个人信息和删除留言。用户选择要修改的信息进入相应的修改界面，填写新的信息确认修改，后端会返回提示成功或失败的信息提示。删除即点击每条留言对应的删除按钮确认删除，即可删除该留言。更新信息流程图如图3-6所示。图3-6用户更新信息流程图第4章系统概要设计和数据库设计4.1系统概述本旅游网站是基于Web的B/S模式开发的，用户只要在客户端上通过浏览器就可以访问本网站的界面并浏览相关信息。用户通过浏览器触发某一事件就可以通过服务器访问数据库，实现前后端的数据交互。如图4-1所示。图4-1网站工作原理图4.2系统功能结构设计根据网站的功能需求分析设计网站功能包括客户端和后台管理。客户端的功能包括登录注册、发布留言、上传图片、修改个人信息、浏览旅游信息。后台管理的功能包括添加、删除、修改、查询数据库信息。如图4-2所示。图4-2系统功能结构图4.3数据库设计4.3.1数据库需求分析每一个系统的功能的实现都是在数据库的支持下实现的，所以对于一个旅游网站的实现数据库的设计是必不可少的。首先要进行数据库的实体属性图分析，才能进行数据库表单的结构设计和数据库的实现。根据需求分析来确定网站中的实体和其属性，还有实体和实体之间的关联。根据从简单到复杂的设计方式，先确定网站的需要哪些实体，并对该实体的属性进行分析，从而得出各实体属性图，最后得出完整的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数据库主要表单设计完成E-R关系图，了解数据之间的联系后，根据E-R关系图得出该数据库应该有以下主要表单。1.保存用户信息的数据表：用户表(users)（如表4-1所示）用来保存用户信息，主要字段有id（自增，唯一），用户名，用户密码，手机号，用户头像；2.保存用户留言的数据表:用户留言表（users_comment）（如表4-2所示）用来存放用户发布的留言，主要字段有id（自增，唯一），用户名，留言内容，发布时间，用户头像，图片，用户表id（外键）；3.保存用户评论的数据表:用户评论表（users_commentchilds）（如表4-3所示）用来存放用户在留言下发布的评论，主要字段有id（自增，唯一），用户名，评论内容，评论时间，用户头像，被评论的留言id（外键），用户表id（外键）；4.保存旅游景点信息的数据表：旅游景点表（jingdian_name）（如表4-4所示）用来保存各旅游景点信息，主要字段有id（自增，唯一），景点分类名称，图片，景点概述；5.存放旅游景点详细信息的数据表：旅游景点详情表（jingdian_detailed）（如表4-5所示）存放的是景点分类下的具体旅游景点名称和详情页面的网址链接，主要字段有id（自增，唯一），景点名字，详情页面的网址链接，旅游景点表的id（外键）；6.存放路线信息的数据表：路线表（luxian）（如表4-6所示）存放的是推荐给用户的旅行社的旅游线路信息，主要字段有id（自增，唯一），旅行社名称，线路名称，发团时间，行程天数。具体表单设计如下：表4-1用户信息（users）数据表字段数据类型长度主键允许空说明idint11是否编号（主键）userNamevarcahr50否用户名passWordvarcahr50否用户密码phoneNumbervarcahr50否用户手机号user_imgvarcahr300否用户头像表4-2用户留言信息（users_comment）表字段数据类型长度主键允许空说明idint11是否编号userNamevarcahr20否用户名user_commenttext否发布的内容comment_timevarcahr20是发布动态时间user_imgvarcahr300用户头像users_idint11外键（用户表id）表4-3用户评论信息（users_commentchilds）表字段数据类型长度主键允许空说明idint11是否编号commentchild_imgvarcahr300否用户名头像commentchild_usernametext否发布的内容commentchild_timevarcahr20是评论时间commentchild_commentvarcahr300评论内容users_comment_idint11外键（用户发布动态信息表id）表4-4旅游景点信息（jingdian_name）表字段数据类型长度主键允许空说明idint11是否编号namevarchar20否分类景点名称detail_url1varchar300是页面展示图片detail_url2varchar300是页面展示图片detail_url3varchar300是页面展示图片detail_url4varchar300是页面展示图片detail_introductiontext是景点介绍内容表4-5景点详细信息（jingdian_detailed）表字段数据类型长度主键允许空说明idint11是否编号namevarcahr20否具体景点名称Jingdian_namevarcahr20否外键\o"排序"scenic_spottext是景点介绍文章表4-6路线信息（luxian）表字段数据类型长度主键允许空说明idint11是否编号luxian_imgvarcahr300否展示的图片luxian_routevarcahr50否路线标题luxian_timevarcahr50否发团时间路线travel_agencyvarcahr50否旅行社名字agency_urlvarcahr50否旅行社链接4.3.3数据库实现数据库的实现使用MySQL数据库的管理工具phpMyAdmin，创建datas数据库，按照数据库的表格设计创建相应的数据表单。数据库语言主要使用mysql。第5章系统详细设计和功能实现5.1数据库连接网站的运行涉及到数据库的使用，所以要正常运行网站，首先要进行数据库的连接，实现数据的获取。mysqli_connect('localhost','root','sql191223','datas')5.2旅游景点模块设计和实现旅游景点模块是向用户展示国内各旅游景点的详细信息的模块。景点显示包括景点分类和各景点的详细信息内容显示，景点的信息浏览将数据库中的景点分类和景点详细信息查询出来，在页面中将景点的分类和名称渲染显示出来。简洁美观的页面和井然有序的信息布局方便用户浏览和查找信息。每一景点分类都会有相应的图片展示，以吸引用户对于详细的景点进行浏览。当页面内容过多时，用户想要浏览某一个景点分类的具体景区，需花费过多的时间去滑动不需浏览的信息。为了方便用户浏览，当页面滑动距离大于景点分类div的高度时，这个景点分类div就会固定在浏览窗口顶部，点击分类中的类目就会滑动到相应区域。如图5-1所示图5-1景点模块实现图点击类目页面滑动到相应区域的效果实现代码,如图5-2所示图5-2效果实现代码图5.3旅游线路模块设计和实现旅游线路模块是将各旅行社的旅游线路的具体信息向用户展示的模块，在每个景点的详情页面都会有相关的路线推荐。路线的展示包括图片、路线、旅行社和发团的时间。路线的信息是通过查询数据库显示的，每个旅行社都添加网址链接，用户可以到旅行社的网页了解相关路线的信息。如图5-3所示图5-3路线模块实现图5.4用户分享模块设计和实现用户分享模块是为用户提供的共享旅游体验和信息的模块，用户可以分享自己的旅游经历和旅游攻略，也可以在交流中获取新的信息。用户登录后，在分享区发布动态上传图片，也可以评论自己感兴趣的动态。分享的信息展示主要包括用户的头像、用户名、发布的部分内容、时间和评论数。点击查看全部的标签可以进入该条动态的详情页面，查看所有评论。用户的留言先保存到数据库，再通过查询返回显示到前端页面。如图5-4所示图5-4分享模块实现图5.5后台管理设计和实现在后台管理系统管理员点击左侧边栏列表的景点表单名字，系统会查询数据库显示对应的表单数据。管理员选中表格中的一行数据选择修改、删除按钮可以对景点分类、景区详细信息、路线信息和用户留言信息进行修改、删除。管理员也可以查找相关的景点分类、景区详细信息，路线信息和用户，如图5-5所示。通过添加按钮可以进入后台的添加界面，管理员可以添加景点信息、路线信息，上传城市的旅游宣传短片，如图5-6所示图5-5后台信息管理实现图图5-6后台信息添加实现图第6章系统测试6.1系统测试意义由于网络环境复杂多变以及用户所用浏览器的差异，系统测试对网站开发有着重要作用。系统测试的目的主要是为了检测系统的缺陷，然后修改和完善系统。系统测试可以分为内测和整体测试，内测是对网站内的每个功能模块进行重复的测试，寻找可能存在或忽略的问题，然后修改完善；整体测试是对网站在大的访问量下的稳定性和在不同浏览器上的兼容性的测试。通过系统测试可以更好的完善系统，确保网站的稳定性和兼容性，让用户获得更好的使用体验。6.2系统测试流程系统测试需要经过测试需求分析，测试计划，编写测试用例，测试执行，测试评估等几个阶段。所以在对本网站的测试中，首先进行了测试需求分析，了解用户需求以确定系统要进行那些测试。通过需求分析后编写测试用例，然后在系统的运行环境中进行用例测试，最后对测试结果进行分析。测试流程如图6-1所示图6-1系统测试流程图6.3测试用例系统测试方法有黑盒测试和白盒测试。黑盒测试又叫功能测试，主要对网站功能的页面、链接、表单和数据库进行测试，本网站采用黑盒测试的方法在不同浏览器对本网站的用户登录功能进行测试。登录功能测试用例如表6-1所示表6-1登录功能测试用例测试类型功能测试模块名称向心之旅系统用户登录用例描述该用例用来测试用户在登录界面能否正常登录，如果出错，是否有错误信息提示前题条件存在正确的用户名和密码，登录页面正常，错误提示正常(数据库存在的用户名：kk；密码：123456789)编号测试项操作步骤数据期望结果1界面检查1.通过路由进入界面2.查看页面样式进入登录界面的路由：‘/login’1.正常进入页面2.页面样式正常显示2用户登录1.输入正却的用户名；2.输入错误的密码；3.点击登录按；1.用户名：：kk2.密码:123tyjfd$#3.点击登录返回“用户名或密码错误”的信息，不能正常登录1.输入错误的用户名；2.输入正确的密码；3.点击登录按钮；1.用户名:ktov$%2.密码：1234567893.点击登录返回“用户名或密码错误”的信息，不能正常登录1.输入错误的用户名；2.输入错误的密码；3.点击登录按钮1.用户名:ktov$%2.密码：123tyjfd$#3.点击登录返回“用户名或密码错误”的信息，不能正常登录1.输入正确的用户名；2.输入正确的密码；3.点击登录按钮1.用户名:kk2.密码：1234567893.点击登录跳转上一页面，导航栏显示“欢迎，kk”，正常登陆不输入信息，直接点击登录点击登录页面显示“输入用户名”的提示信息6.4测试结果分析网站页面样式正确，整体风格统一，页面之间的交互响应和数据正确；登录功能的链接、表单和接口功能无误，能正确判断用户输入的信息并返回相应的信息提示；兼容性一般，在360、火狐、搜狗浏览器上网页和功能都可以正常显示和执行，在IE11版本的浏览器上display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;的CSS样式不兼容。

总结本课题网站结合了vue、HTML5、CSS、JavaScript、B/S模式、PHP、MySQL数据库多种语言和技术设计实现，是将旅游信息展示与社交平台模式相结合的一个旅游网站。由于在这之前没有过开发一个完整网站的实践经历，对后端数据接口和跨域请求的问题也不是很了解，对于开发语言的掌握也没有达到熟练运用的程度。所以在整个项目的设计和实现的过程中由于经验的缺乏和技术能力的限制，虽然基本实现了前期设计的功能，但是整个项目在功能和信息的延展方面还是存在很多不足和不完善的地方。完成毕业设计的过程是一个不断学习成长的过程。整个项目经历了前期的资料查找，网页设计，数据库设计和后面的网站实现。在网站实现的这个过程中会不断的出现问题，像是刚开始在做用户登录功能时，用户登录成功后一刷新页面用户的登录信息也被刷新消失，这就面临着如何判断用户是否登录，如何保持用户的登录状态的问题。但是有问题就要去解决，在解决的过程中就可以收获到新的知识。通过在网上查找资料，自己实践，最终用vue的Vuex的核心方法

Store解决了问题。每遇到一个问题就会学习到新的知识，在出现问题解决问题的过程中，我不断的积累经验，提升自身的学习和实践能力。参考文献[1]陈豪文,周璐雨,宁志豪.浅谈Web发展及现状[J].计算机产品与流通,2019(06):104.[2]朱二华.基于Vue.js的Web前端应用研究[J].科技与创新,2017(20):119-121.[3]蔡志濠.2019年中国在线旅游行业市场发展现状分析80、90后成在线旅游主力人群[Z].前瞻产业研究院,2019.[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].高等教育出版社,2017-3.[11]马新强.孙兆.袁哲.Web标准与HTML5的核心技术研究[J].重庆文理学院学报：自然科学版,2010,29(6):61-65.致谢时光荏苒，如白驹过隙，大学四年的时光也悄然接近尾声。在大学的这段时光有收获，有感悟，有成长，在最后的这一年更多的却是感恩。感谢给予我指导和帮助的老师和同学。首先感谢的是我的导师--李梁奇老师，在准备毕业论文的这段时间给予了我很多的帮助。在论文的开题报告和完成论文的撰写中为我答疑、提醒我论文撰写的注意事项和误区，多次帮我指出论文中的不足，耐心帮助我修改论文。为我的论文完成提供了很大的帮助。其次是我的舍友——许钰婷和赵婷婷，在开始做毕业设计和构思论文前期，她们在我查找资料和完善论文提纲时给予了我一些建议，为我的毕业设计思路和一些技术上的问题提供很大帮助。在进行项目制作和论文撰写中，他们也经常为我解答难题，让我更有信心完成毕业设计。最后要特别感谢我的家人，因为今年的疫情，大家都被“困”在家里不能随意外出。在做毕业项目这段期间，偶尔遇到问题心情烦躁时，他们也经常被我的情绪所波及，成为无辜的“受害者”。特别感谢我的家人在这段时间对我的情绪化的言语和行为的理解和包容。感谢在大学四年间，老师孜孜不倦的教诲和同学们的热心帮助。因为你们让我的大学生活拥有了美好而有意义的回忆。

HYPERLINK如何给电脑重做系统给电脑重做系统，自己学学，可少花钱，哈哈[图]

一、准备工作:

如何重装电脑系统

首先，在启动电脑的时候按住DELETE键进入BIOS，选择AdvancedBIOSFeatures选项，按Enter键进入设置程序。选择FirstBootDevice选项，然后按键盘上的PageUp或PageDown键将该项设置为CD-ROM，这样就可以把系统改为光盘启动。

其次，退回到主菜单，保存BIOS设置。（保存方法是按下F10，然后再按Y键即可）

1.准备好WindowsXPProfessional简体中文版安装光盘,并检查光驱是否支持自启动。

2.可能的情况下，在运行安装程序前用磁盘扫描程序扫描所有硬盘检查硬盘错误并进行修复，否则安装程序运行时如检查到有硬盘错误即会很麻烦。

3.用纸张记录安装文件的产品密匙(安装序列号)。

4.可能的情况下，用驱动程序备份工具(如:驱动精灵2004V1.9Beta.exe)将原WindowsXP下的所有驱动程序备份到硬盘上(如∶F:Drive)。最好能记下主板、网卡、显卡等主要硬件的型号及生产厂家，预先下载驱动程序备用。

5.如果你想在安装过程中格式化C盘或D盘(建议安装过程中格式化C盘)，请备份C盘或D盘有用的数据。

二、用光盘启动系统:

(如果你已经知道方法请转到下一步),重新启动系统并把光驱设为第一启动盘,保存设置并重启。将XP安装光盘放入光驱,重新启动电脑。刚启动时，当出现如下图所示时快速按下回车键，否则不能启动XP系统光盘安装。如果你不知道具体做法请参考与这相同的-->如何进入纯DOS系统:

光盘自启动后,如无意外即可见到安装界面,将出现如下图1所示

查看原图

全中文提示,“要现在安装WindowsXP,请按ENTER”，按回车键后,出现如下图2所示

查看原图

许可协议,这里没有选择的余地，按“F8”后如下图3

HYPERLINK

查看原图

这里用“向下或向上”方向键选择安装系统所用的分区，如果你已格式化C盘请选择C分区，选择好分区后按“Enter”键回车，出现下图4所示

查看原图

这里对所选分区可以进行格式化,从而转换文件系统格,或保存现有文件系统,有多种选择的余地,但要注意的是NTFS格式可节约磁盘空间提高安全性和减小磁盘碎片但同时存在很多问题MacOS和98/Me下看不到NTFS格式的分区,在这里选“用FAT文件系统格式化磁盘分区(快),按“Enter”键回车，出现下图5所示

查看原图

格式化C盘的警告,按F键将准备格式化c盘,出现下图6所示

HYPERLINK

查看原图

由于所选分区C的空间大于2048M(即2G),FAT文件系统不支持大于2048M的磁盘分区,所以安装程序会用FAT32文件系统格式对C盘进行格式化,按“Enter”键回车，出现下图7所示

查看原图图7中正在格式化C分区;只有用光盘启动或安装启动软盘启动XP安装程序,才能在安装过程中提供格式化分区选项；如果用MS-DOS启动盘启动进入DOS下,运行i386\winnt进行安装XP时,安装XP时没有格式化分区选项。格式化C分区完成后,出现下图8所示

被过滤广告

查看原图

图8中开始复制文件,文件复制完后，安装程序开始初始化Windows配置。然后系统将会自动在15秒后重新启动。重新启动后,出现下图9所示

HYPERLINK

查看原图

9

查看原图

过5分钟后，当提示还需33分钟时将出现如下图10

HYPERLINK

查看原图

区域和语言设置选用默认值就可以了，直接点“下一步”按钮，出现如下图11

查看原图

这里输入你想好的姓名和单位，这里的姓名是你以后注册的用户名，点“下一步”按钮，出现如下图12

HYPERLINK

查看原图

如果你没有预先记下产品密钥（安装序列号）就大件事啦！这里输入安装序列号，点“下一步”按钮，出现如下图13

HYPERLINK

查看原图

安装程序自动为你创建又长又难看的计算机名称,自己可任意更改，输入两次系统管理员密码，请记住这个密码，Administrator系统管理员在系统中具有最高权限，平时登陆系统不需要这个帐号。接着点“下一步”出现如下图14

查看原图

日期和时间设置不用讲,选北京时间，点“下一步”出现如下图15

HYPERLINK

查看原图

开始安装,复制系统文件、安装网络系统，很快出现如下图16

查看原图

让你选择网络安装所用的方式，选典型设置点“下一步”出现如下图17

HYPERLINK

查看原图

点“下一步”出现如下图18

HYPERLINK

查看原图

继续安装，到这里后就不用你参与了，安装程序会自动完成全过程。安装完成后自动重新启动，出现启动画面，如下图19

HYPERLINK

查看原图

第一次启动需要较长时间，请耐心等候，接下来是欢迎使用画面，提示设置系统，如下图20

查看原图

点击右下角的“下一步”按钮，出现设置上网连接画面，如下图21所示

HYPERLINK

查看原图

点击右下角的“下一步”按钮，出现设置上网连接画面，如下图21所示

查看原图

这里建立的宽带拨号连接,不会在桌面上建立拨号连接快捷方式,且默认的拨号连接名称为“我的ISP”(自定义除外);进入桌面后通过连接向导建立的宽带拨号连接,在桌面上会建立拨号连接快捷方式,且默认的拨号连接名称为“宽带连接”(自定义除外)。如果你不想在这里建立宽带拨号连接,请点击“跳过”按钮。

在这里我先创建一个宽带连接,选第一项“数字用户线(ADSL)或电缆调制解调器”,点击“下一步”按钮，如下图22所示

HYPERLINK

查看原图

目前使用的电信或联通(ADSL)住宅用户都有帐号和密码的,所以我选“是,我使用用户名和密码连接”,点击“下一步”按钮，如下图23所示

查看原图

输入电信或联通提供的帐号和密码,在“你的ISP的服务名”处输入你喜欢的名称,该名称作为拨号连接快捷菜单的名称,如果留空系统会自动创建名为“我的ISP”作为该连接的名称,点击“下一步”按钮，如下图24所示

查看原图

已经建立了拨号连接,微软当然想你现在就激活XP啦,不过即使不激活也有30天的试用期,又何必急呢?选择“否,请等候几天提醒我”,点击“下一步”按钮，如下图25所示

HYPERLINK

查看原图

输入一个你平时用来登陆计算机的用户名，点下一步出现如下图26

HYPERLINK

查看原图

点击完成，就结束安装。系统将注销并重新以新用户身份登陆。登陆桌面后如下图27

HYPERLINK

查看原图

六、找回常见的图标

在桌面上点开始-->连接到-->宽带连接，如下图32

查看原图

左键点“宽带连接”不放手，将其拖到桌面空白处,可见到桌面上多了一个“宽带连接”快捷方式。结果如下图33

HYPERLINK

查看原图

然后，右键在桌面空白处点击，在弹出的菜单中选“属性”，即打开显示“属性窗口”如下图34

查看原图

在图中单击“桌面”选项卡，出现如下图35

HYPERLINK

查看原图

在图中的左下部点击“自定义桌面”按钮，出现如下图36

查看原图

在图中的上部，将“我的文档”、“我的电脑”、“网上邻居”和“InternetExplorer”四个项目前面的空格上打钩，然后点“确定”，再“确定”，你将会看到桌面上多了你想要的图标。如下图37

键盘上每个键作用!!!

F1帮助

F2改名

F3搜索

F4地址

F5刷新

F6切换

F10菜单

CTRL+A全选

CTRL+C复制

CTRL+X剪切

CTRL+V粘贴

CTRL+Z撤消

CTRL+O打开

SHIFT+DELETE永久删除

DELETE删除

ALT+ENTER属性

ALT+F4关闭

CTRL+F4关闭

ALT+TAB切换

ALT+ESC切换

ALT+空格键窗口菜单

CTRL+ESC开始菜单

拖动某一项时按CTRL复制所选项目

拖动某一项时按CTRL+SHIFT创建快捷方式

将光盘插入到CD-ROM驱动器时按SHIFT键阻止光盘自动播放

Ctrl+1,2,3...切换到从左边数起第1,2,3...个标签

Ctrl+A全部选中当前页面内容

Ctrl+C复制当前选中内容

Ctrl+D打开“添加收藏”面版(把当前页面添加到收藏夹中)

Ctrl+E打开或关闭“搜索”侧边栏(各种搜索引擎可选)

Ctrl+F打开“查找”面版

Ctrl+G打开或关闭“简易收集”面板

Ctrl+H打开“历史”侧边栏

Ctrl+I打开“收藏夹”侧边栏/另:将所有垂直平铺或水平平铺或层叠的窗口恢复

Ctrl+K关闭除当前和锁定标签外的所有标签

Ctrl+L打开“打开”面版(可以在当前页面打开Iternet地址或其他文件...)

Ctrl+N新建一个空白窗口(可更改,Maxthon选项→标签→新建)

Ctrl+O打开“打开”面版(可以在当前页面打开Iternet地址或其他文件...)

Ctrl+P打开“打印”面板(可以打印网页,图片什么的...)

Ctrl+Q打开“添加到过滤列表”面板(将当前页面地址发送到过滤列表)

Ctrl+R刷新当前页面

Ctrl+S打开“保存网页”面板(可以将当前页面所有内容保存下来)

Ctrl+T垂直平铺所有窗口

Ctrl+V粘贴当前剪贴板内的内容

Ctrl+W关闭当前标签(窗口)

Ctrl+X剪切当前选中内容(一般只用于文本操作)

Ctrl+Y重做刚才动作(一般只用于文本操作)

Ctrl+Z撤消刚才动作(一般只用于文本操作)

Ctrl+F4关闭当前标签(窗口)

Ctrl+F5刷新当前页面

Ctrl+F6按页面打开的先后时间顺序向前切换标签(窗口)

Ctrl+F11隐藏或显示菜单栏

Ctrl+Tab以小菜单方式向下切换标签(窗口)

Ctrl+Enter域名自动完成[url=].**.com[/url](内容可更改,Maxthon选项→地址栏→常规)/另:当输入焦点在搜索栏中时,为高亮关键字

Ctrl+拖曳保存该链接的地址或已选中的文本或指定的图片到一个文件夹中(保存目录可更改,Maxthon选项→保存)

Ctrl+小键盘'+'当前页面放大20%

Ctrl+小键盘'-'当前页面缩小20%

Ctrl+小键盘'*'恢复当前页面的缩放为原始大小

Ctrl+Alt+S自动保存当前页面所有内容到指定文件夹(保存路径可更改,Maxthon选项→保存)

Ctrl+Shift+小键盘'+'所有页面放大20%

Ctrl+Shift+小键盘'-'所有页面缩小20%

Ctrl+Shift+F输入焦点移到搜索栏

Ctrl+Shift+G关闭“简易收集”面板

Ctrl+Shift+H打开并激活到你设置的主页

Ctrl+Shift+N在新窗口中打开剪贴板中的地址,如果剪贴板中为文字,则调用搜索引擎搜索该文字(搜索引擎可选择,Maxthon选项→搜索)

Ctrl+Shift+S打开“保存网页”面板(可以将当前页面所有内容保存下来,等同于Ctrl+S)

Ctrl+Shift+W关闭除锁定标签外的全部标签(窗口)

Ctrl+Shift+F6按页面打开的先后时间顺序向后切换标签(窗口)

Ctrl+Shift+Tab以小菜单方式向上切换标签(窗口)

Ctrl+Shift+Enter域名自动完成

Alt+1保存当前表单

Alt+2保存为通用表单

Alt+A展开收藏夹列表

资源管理器

END显示当前窗口的底端

HOME显示当前窗口的顶端

NUMLOCK+数字键盘的减号(-)折叠所选的文件夹

NUMLOCK+数字键盘的加号(+)显示所选文件夹的内容

NUMLOCK+数字键盘的星号(*)显示所选文件夹的所有子文件夹

向左键当前所选项处于展开状态时折叠该项，或选定其父文件夹

向右键当前所选项处于折叠状态时展开该项，或选定第一个子文件夹

自然键盘

【窗口】显示或隐藏“开始”菜单

【窗口】+F1帮助

【窗口】+D显示桌面

【窗口】+R打开“运行”

【窗口】+E打开“我的电脑”

【窗口】+F搜索文件或文件夹

【窗口】+U打开“工具管理器”

【窗口】+BREAK显示“系统属性”

【窗口】+TAB在打开的项目之间切换

辅助功能

按右边的SHIFT键八秒钟切换筛选键的开和关

按SHIFT五次切换粘滞键的开和关

按NUMLOCK五秒钟切换切换键的开和关

左边的ALT+左边的SHIFT+NUMLOCK切换鼠标键的开和关

左边的ALT+左边的SHIFT+PRINTSCREEN切换高对比度的开和关

运行

按“开始”－“运行”，或按WI