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

黄文杰 李光燕

摘 要：随着科技的进步和时代的改变，旅游网站的发展成了在旅游业发展中的一个重要方向。为了让旅游网站取得更加全面个性的服务，本套旅游系统是基于Vue和Element-ui来设计界面，以及Vuex状态机来管理数据，以Vue作为MVVM架构，通过SpringBoot的SSM结构作为旅游系统的后端如此实现该旅游管理系统和各景点游玩信息共享，满足前端用户各种游玩的需求，提高各旅游景点的服务效果。

关键词：旅游业 旅游供应商 旅游者 旅游管理系统

Abstract: With the progress of science and technology and the change of times, the development of tourism websites has become an important direction in the development of tourism. In order to make the tourism website obtain more comprehensive and personalized services, this set of tourism system is based on VUE and ELEMent-UI to design the interface, and VUEX state machine to manage the data, with VUE as the MVVM architecture. The SSM structure of SpringBoot is used as the back end of the tourism system so as to realize the information sharing between the tourism management system and various scenic spots, meet the needs of front-end users for various kinds of play, and improve the service effect of each scenic spot.

Keywords：tourism Travelsupplier tourist TourismManagementSystem

1. 研究背景和意义

1.1研究背景

生活质量的提高让人们不仅仅只注重物质享受，更多是在于精神享受，在网络信息时代影响下，当今前端用户外出旅行已经不再局限于从旅游公司的宣传和亲戚朋友的介绍一些途径了解到一些景区（地区）的信息，更多的是从网络上了解景区相关信息，从而自行选择旅游的地点。因此，旅游网站也就成为了各个旅行社与旅游胜地对外宣传中不可缺少的一种现代方式。

1.2研究意义

在旅游网站的支撑下，旅游产品的信息化，时令化等特性得以更好的突出。作为新兴经济的重要组成部分，现阶段国人对旅游的需求不断提高，因而旅游网站的建设对于我国实现世界旅游强国的目标具有重要意义。为此制作本网站的目的是进行对旅游的宣传，系统将景点介绍、景点讲解、酒店预定等诸多功能集中在一个平台上，系统设计的目的在于提升各景点的服务质量，实现客户与旅行社在网络上的沟通和业务的完成，体现电子商务的优势，让前端用户的游玩变得更智能化。

2. 系统设计与实现

本旅游网系统分为旅游网前台和旅游网的后端管理系统：旅游网前台包含的前端用户注册，前端用户登录，个人中心，景区目的地，景区游记等核心功能。旅游网后端管理系统包含系统设置，酒店管理，景区管理，评价管理等，

3. 数据库设计

本旅游系统的数据库设计是指的是针对该旅游系统的环境，构造优化其旅游系统的数据库逻辑模式，并据此建立相关旅游信息的数据，且能有效的对该数据进行存储和优化，满足前端、后端用户的管理和数据操作的要求。

该系统的数据库管理系统RDMS是MySQL，数据库里面所包含的表及所完成的功能见表3-1中所示。

表3-1 数据库信息表

表名称	说明	功能
sys_menu	系统菜单表	菜单信息
sys_role	系统角色表	角色信息
sys_role_menu	角色菜单	角色菜单信息
sys_user	系统用户表	用户的信息
sys_user_role	系统用户角色中间表	用户角色信息
t_city	旅游城市表	城市信息
t_comments	景区评论表	评论信息
t_custorm	旅游前端用户表	前端用户的基本信息
t_hotel	景点酒店表	酒店的基本信息
t_level	景区等级表	等级的基本信息
t_notes	游记表	游记的基本信息
t_order_details	订单明细表	订单的明细信息
t_order_main	订单主表	订单的主单信息
t_price	价格范围表	价格的范围信息
t_spots	景区目的地表	目的地的基本信息
t_theme	景区主题表	主题的基本信息

4. 系统详细设计

4.1实现高级查询功能

景区浏览，主要是分页展示所有的景区目的地。以及可以根据地区，根据景区等级，根据主题来查询过滤景区，还可以进行景区详细信息的查看。

4.2实现景区门票的预定功能

在景区详情里面，点击预定功能，会弹出预定的界面，添加预定的相关的信息，选择对应的酒店，系统会自动根据人数来计算出相应的价格。预定之后，会形成订单。

5. 系统实现

5.1高级查询功能实现

高级查询是根据旅客选择的目的地城市，选择的景区的等级，以及景区的价格范围进行过滤操作，点击景区目的地城市或者等级 或者价格范围的时候，系统会把查询的参数传递到后端controller中，controller中接收到信息之后，进行查询数据。查询的数据最后还是以JSON的方式返回到前端，前端通过VUE的MVVM的方式加载数据出来，最后展示给用户查看。

5.2景区门票预定功能实现

景区预定主要是用户订票操作，点击订票的时候，进入预定景区票据的页面，添加预定人的基本信息，选择景区的景点，填写预定人数，每个预定人的证件号码。最后系统会根据预定人数和以及景区门票价格，还有景区景点价格来计算景区的总价。计算价格就是基本的算术运算。

5.3景区的发布功能实现

景区发布功能在需要在后端管理系统里面完成，在后端管理系统中，可以发布景区目的地。通过表单的方式进行发布。在表单中，添加景区的基本信息，表单使用el-form来完成。景区的详细的信息，通过富文本编辑器来完成。最后这些都填写好之后，点击保存按钮。把添加的信息 通过axios的方式 发送到后端，后端接收用户的信息，接收到之后，进行存入数据库。

6. 系统测试

该旅游系统项目开发完成后，需要有一段测试的过程，来确保该旅游系统的正常使用。该旅游系统的测试方法分为白盒测试和黑盒测试。

此旅游系统测试分别通过功能测试、性能测试以及可用性测试来确保该系统的正常使用。

7. 结束语

为此制作本网站的目的是进行对旅游的宣传，系统将景点介绍、景点讲解、酒店预定等诸多功能集中在一个平台上设计出该旅游系统，实验结果表明,所设计的旅游网站提升了旅游服务质量，具有很高的实际应用价值。

参考文献：

[1]那俊豪.旅游网站数据采集分析及系统的设计与实现[J].电子科技大学,2017.

[2]陈衡.Web技术的旅游网站开发与实现[J].四川旅游学院,2018.

[3]李广宏.vue.js前端应用技术分析[J].东北财经大学,2019.