内容摘要:随着互联网的发展以及人们物质文化的不断需求,旅游网站成为人们日常出行的可靠高效的方法。旅游网站为基于SpringBoot与Mybatis的手机端网页,并部署到阿里云服务器上,方便旅游信息的发布。本论文主要论述了山西旅游网设计开发的基本过程,在开发过程中采用了前后端分离的开发思想,后端接口层主要运用了SpringBoot+Mybatis的开发技术,前端界面采用了Vue等的前端框架。本系统包括旅游和民宿两大主要版块,用户可以阅览旅游新闻,旅游景点,旅游路线等,在登录后可以对喜爱的景点或路线进行收藏,也可以将其加入购物车进行订购;房东可以上传房源,用户可以在线预定民宿。通过这些模块实现旅游信息在互联网上的共享,为游客提供更加实时,高效的服务。
关键词:旅游网站;山西旅游;SpringBoot框架;前后端分离;Vue框架
第1章绪论
1.1选题的背景、目的和意义
1.1.1.选题背景
近年来,随着我省在旅游服务方面的不断创新和探索,我们突破了传统的旅游方式,将互联网旅游列入重点发展的对象,创新了旅游要素的理念。在我国旅游产业的不断发展的大环境下,信息技术已经渗透到旅游活动的各个环节当中去了。随着全省对于旅游产业的各项战略措施的逐渐实施,不断优化的产业结构,旅游环境的巨大改变,不断创新的旅游体制以及不断提升的产业地位使得我省旅游业呈现欣欣向荣的发展趋势。随着旅游产业的不断发展以及人们生活物质文化水平的不断提高,追求更方便快捷,更高效的旅游方式成为当今旅游发展的主要问题。所以强大的信息资讯服务平台以及信息共享平台成为旅游企业实现个性化,多样化发展的强有力支撑。
随着科技的进步和互联网的日益普及,网络宣传成为各家各家公司对外宣传的重要途径,社交媒体可以帮助企业更好的了解消费者[1]。现如今我省经济水平的不断提高,我们对于精神文化层次的不断需求,使得旅游成为人们生活当中的热点。无论是长途,短途或者是假日旅游都有日益增长的趋势。旅游网站的出现极大的满足了网民对于高效,便捷旅游形式的需求,通过对用户进行数据挖掘,根据用户类型生成了不同的出行方式[2]。同时旅游产业与互联网的结合也使得旅游信息在互联网上的极大共享,用户足不出户就可以获取到想要的信息,企业也大大的扩展了用户数量。
1.1.2选题目的和意义
随着国家经济建设的发展,人民的物质水平不断的提高,旅行成为我们日常生活中最为常见的休闲方式。越来越多的人选择在假期和同事,家人,朋友去周边的景点去游玩,有的人甚至在年初就已经制定好了五一,十一的出行计划了。早期我国互联网+旅游的新型模式还未普及前,人们长途旅游都是事先前往旅行社进行旅游路线的筛选,而对于短途的自驾景点则需要我们提前查好攻略。这样的形式即枯燥又使本该放松的事变的复杂。移动互联的普及,使更多的信息得到共享,“下车看庙,上车睡觉,回来一问,啥也不知道”的真实写照得到人们的反对,而旅游网站的的出现极大的满足了人们对于方便快捷旅行的需求,旅游产业与互联网的结合时我们更加容易的了解各个旅游景点,对于景点进行了解后,我们可以对喜爱的景点进行订购。同时旅游网还对各个旅游景点进行串联,为游客提供了一条条精彩的旅游路线,让人们的出游变得更加方便,更轻松的去领略祖国的大好河山。
山西省拥有极其丰富的旅游资源,无论是历史建筑,民俗展览或是自然风光都是可以做为旅游发展的招牌。而山西由于旅游景点过于分散等的原因,旅游业发展缓慢,通过建设山西旅游网站,突出山西旅行的主要特色,详细规划山西旅游的主要路线,使人们了解山西,爱上山西,推动全省旅游业的发展。
1.2国内外研究现状
旅游业是和石油业、汽车业并称为世界三大产业,它每年会有4.万亿美金的收入,并且为2亿700万人直接或间接地提供了就业机会,数万计企业的发展依赖于它。在世界旅游业蓬勃发展的前提下,旅游供给不断增加,旅客拥有更多选择的机会,旅游网站的出现极大的满足了客户的需求。
我国的旅游网站经过多年的建设,具备旅游资讯功能的网站已经达到500多家,形成了多种网站类型共存的市场格局,其中专业旅游网站多达300余家。我国旅游网站虽然种类繁多,但多发展不平衡,呈现良莠不齐的局面。多数的网站还只停留在旅游信息的阅览以及酒店门票的预订上,并没有覆盖到在线旅游的各个环节上,完善的旅游网站应该涵盖了游客对于吃、住、游、玩的各方面需求。
而我们山西省虽然将旅游业作为支柱产业进行发展,但还是存在着旅游规划不严格,资金投入不足,省内思想未统一等问题。对于我省的旅游开发而言,尤其是风景名胜区而言,普遍缺乏精确的规划的定位,没有树立起自己的品牌形象[3]。发展线上旅游,它既可以满足不同用户对于旅游产品的不同需求,更满足了山西如今的战略发展要求,同时省内的旅游电商企业可以根据市场的变化,不断地创新经营模式,为消费者提供更优质的旅游产品和服务,推动经济的进一步提高[4]。
1.3本文开发内容
本旅游网站主要以旅游新闻轮播的发布,旅游路线,旅游景点的发布以及订购,民宿的发布以及订购为主要内容,其目的在于为游客及时,准确的了解山西旅游的相关信息,同时给游客的出行带来巨大的方便,为公司带来收益。其主要功能如下:
(1)旅游新闻模块:用户或者游客进入网站即可阅览本模块,可以查看到热门的旅游资讯,网站管理员拥有对此模块中新闻资讯的增加、删除和修改的权限。
(2)旅游景点模块:用户或者游客在网站首页可以查询或者直接阅览到旅游景点并可以查看其详细信息,网站管理员可以对此模块中的旅游景点进行添加、删除、查询和修改。
(3)旅游路线模块:用户或游客可以查询到喜爱的旅游路线,登录后的用户可以将喜爱的路线添加进收藏,还可以立即订购。网站管理员可以对此模块中的旅游路线进行添加、删除、修改。
(4)我的故事模块:已订购路线的用户,可以将旅行途中的所见所闻,心情等发表出来,其他用户可以阅览。
(5)民宿模块:用户可以在此模块查询热门,特惠等房源并可以在线订购,房东可以上传房源,拥有对房源信息的增删改查的权限。
1.4本章小结
本阶段我们明确了开发的背景,目的和意义,建设一个具有订购路线和民宿功能的旅游网站是我们本次设计的目的,同时将项目上线,使用户随时随地地获取旅游资讯,为出游提供方便和快捷。建设山西旅游网站不仅有利于旅游企业的发展,也可以将山西省向外推荐,加快省内转型的步伐。
第2章系统需求分析
需求分析是让我们明确目标系统必须做什么的一个阶段。对软件进行需求分析是软件开发工作取得成功额前提条件,而需求分析的主要任务是明确了系统必须完成哪些工作,也就是对目标系统提出精确和具体的要求。以下通过几个小节来对本旅游网站在各方面的需求进行分析。
2.1可行性分析
可行性分析又被叫做可行性研究,是在最少的时间内,对项目方案、技术等进行经济技术论证,来确定是否更够解决问题并达到最佳的经济效果。
2.1.1技术可行性
本系统采用前后端分离的设计模式,实现了前端与后端的代码的并行开发,互不干扰[5]。其中后端采用SpringBoot框架开发,运行在阿里云服务器上,访问数据库,并为前端提供接口。前端使用Vue开发,通过快速搭建vue-cli脚手架工具实现。SpringBoot使用简单并且性能稳定以及Vue容易上手和使用的特点充分说明了本系统在技术方面可行[6]。
2.1.2经济可行性
互联网的飞速发展可以为我们提供更加高效的服务并且降低成本[7]。而且我省旅游景点众多,无论是自然景观还是人文历史在数量上都十分可观,适合各年龄层次的人群。设计这样一个旅游网站成本较低,效率高,使用灵活方便,同时又和省内重点发展旅游的战略决策相吻合,很有发展前景,因此在经济上可行。
2.1.3操作可行性
本系统操作简单,界面美观大方,操作方面也可行。
2.2安全性分析
(1)系统设置了游客、用户和管理员的权限,游客只能对网站信息进行阅览;用户登录后可以加购物车,支付以及收藏;管理员拥有对网站信息的管理的权限。
(2)对输入的信息进行合法性的检测,例如在登录注册时进行数据的验证,尽可能保证网站的安全和高效性[8]。
2.3网站运行环境
本网站主要开发用于手机端的网页,并且最终将部署于阿里云服务器上,通过网址访问即可。系统的开发使用到了“调接口与前端展示数据跟数据交互”的前后端分离的开发思想,后端给前端直接写接口。其中后端接口的开发使用了IntelliJ IDEA 2019(开发平台),Postman(测试工具),Mysql 5.5(数据库软件),SQLyog(Mysql管理工具);前端开发使用到了WebStorm等软件。
2.4网站的数据流图
数据流图是系统逻辑功能的图形表示,它描绘出了数据在软件中流动和被处理的逻辑过程,即使不是专业计算机技术也可以轻易读懂。以下是关于本网站在顶层的数据流图描述如图2-1所示:
图2-1 顶层数据流图
如上图,顶层数据流图只能在整体上清楚地描述数据在本网站的流向的加工过程,但要是具体到各个层面上的数据处理过程,顶层数据流图是远远不够的。所以将顶层数据流图的每一环节进行具体分析,进一步细化,采用多层次的数据流图进行描述,以下是此网站的一层数据流图和部分模块的数据流图:
图2-2 一层数据流图
图2-3 类别管理的二层数据流图
图2-4 路线管理的二层数据流图
图2-5 用户评价的二层数据流图
2.5系统功能分析
本课题主要建立一个具有完整功能的旅游网站,要从用户的需求和用户的体验出发,实现旅游资讯的信息共享,为游客带来方便。
2.5.1用户权限
浏览用户通过连网访问本网站用户可以在首页上浏览轮播新闻模块用户可以浏览到旅游类别模块用户可以查看旅游景点信息用户搜索到自己想要的内容用户浏览旅游路线模块登录用户可以将喜爱的旅游产品加入收藏用户可以浏览到民宿信息登录用户可以在线订购产品,并使用支付宝进行在线支付已经订购产品的用户可以对本产品进行评论用户对个人中心的信息管理
2.5.2管理员权限
管理员主要的职责是对网站的信息进行维护,对网站产品就有增删改查的权限,其功能主要如下:
管理员通过连网登录到后台管理系统管理员可以对用户的权限进行管理,将普通用户升级为管理员,也可以将管理员改为普通用户。管理员可以对首页的轮播新闻模块进行添加、删除、修改、更换封面管理员可以对首页的旅游类别模块进行添加、删除、修改、更换封面管理员可以对首页的旅游路线模块进行添加、删除、修改、更换封面管理员可以对旅游产品的评论进行查询、删除管理员可以对订单信息进行查询、修改 民宿房东民宿房东是网站民宿模块的直接管理者,用户通过注册成为房东,可以进行房源的上传和信息维护。
房东可以通过连网登陆到房东管理后台房东可以对房源信息进行添加、修改、删除房东可以对用户订单进行处理
2.6数据字典
数据字典主要是对数据项,数据结构和数据存储,处理的详细说明,它和数据流图共同构成了完整的需求分析模型。以下是本网站关于旅游模块的数据字典:
neuedu_user(用户表)=id(PK)+username+password+email+phone+question+answer+role+create_time+update_time+ip
neuedu_news(新闻表)=id(PK)
+name+subtitle+main_image+detail+is_banner+create_time+update_time
neuedu_category(旅游类别表)=id(PK)
+parent_id+name+status+img +create_time+update_time
neuedu_product(路线表)=id(PK)
+category_id+name+subtitle+main_image+sub_images+detail+price+stock+status+is_new+
is_hot+create_time+update_time
neuedu_point(旅游景点表)=id(PK)
+category_id+name+subtitle+main_image+detail++stock+price+create_time+update_time
neuedu_collection(产品收藏表)=id(PK)
+user_id+product_id
Neuedu_message(产品评价表)=id(PK)
+user_id+product_id+user_name+message+create_time
2.7每章小结
本阶段我们明确了项目需要做什么并对具体功能进行了设计,其中包括网站首页和管理员功能的确定。之后又确定了网站的运行环境以及开发工具的选择,最终由具体功能分析出所需的数据字典。考虑到网站安全性的问题,我们设置了不同权限的使用者,不同权限的使用人员拥有的权限不同,同时使用了数据验证来校验登录信息,尽可能保证网站的稳定性。
第3章系统设计
3.1功能模块设计模块设计原则
模块设计应该秉承着各模块独立的思想,各模块之间功能独立且不会相互限制。要尽可能设计出高内聚和低耦合的独立模块。
3.1.1功能模块
通过系统的需求分析,明确了此系统的旅游模块分为前后台两大部分,前台分为普通游客和注册用户,后台主要为系统管理员。将网站详细模块化如下:
旅游轮播新闻模块旅游类别模块旅游景点模块旅游路线模块留言故事模块在线预定模块
3.1.2功能结构图
图3-1 网站用户功能结构图
图3-2 管理员功能结构图
3.2数据库设计
3.2.1数据库需求分析
数据库的设计是任何系统都不可或缺的组成部分,各模块的功能实现也都;不开数据库的支持。在进行数据库的设计时,首先要明确系统中的各个实体,并分析其属性,从而得到各实体属性图,最终得到整个系统的E-R图,以下是本系统旅游模块的一些实体:
3.2.2主要表设计
本系统的数据库为sxtravel,其中旅游模块包含表:neuedu_user(用户表),neueud_news(旅游新闻表),neuedu_category(旅游类别表),neuedu_point(旅游景点表),neuedu_product(旅游路线表),neuedu_collection(产品收藏表),neueud_message(产品评价表),以下是这些表的详细信息:
neuedu_user(用户表)是用来存储网站的所有用户,包含普通用户和网站管理员,主键为用户id,该字段设置为自增。
表3-1 neuedu_user(用户表)
列名 | 数据类型 | 长度 | 主键 | 非空 | 自增 | 注释 |
id | int | 11 | 是 | 是 | 是 | 用户id |
username | varchar | 50 | 否 | 是 | 否 | 用户名 |
password | varchar | 50 | 否 | 是 | 否 | 用户密码,MD5加密 |
varchar | 50 | 否 | 是 | 否 | 用户email | |
phone | varchar | 20 | 否 | 是 | 否 | 用户phone |
question | varchar | 100 | 否 | 是 | 否 | 找回密码问题 |
answer | varchar | 100 | 否 | 是 | 否 | 找回密码答案 |
role | int | 4 | 否 | 是 | 否 | 角色0-管理员,1-普通用户 |
create_time | datetime | __ | 否 | 否 | 否 | 创建时间 |
update_time | datetime | __ | 否 | 否 | 否 | 最后更新时间 |
ip | varchar | 20 | 否 | 否 | 否 | 用户IP |
neuedu_news(新闻表)是用来存储网页首页新闻轮播信息的表,其中主键为新闻ID,设置为为自增。
图3-2 neuedu_news(旅游新闻表)
列名 | 数据类型 | 长度 | 主键 | 非空 | 自增 | 注释 |
id | int | 11 | 是 | 是 | 是 | 新闻ID |
name | varchar | 100 | 否 | 是 | 否 | 新闻名 |
subtitle | varchar | 200 | 否 | 否 | 否 | 副标题 |
main_image | varchar | 500 | 否 | 是 | 否 | 新闻主图 |
detail | text | __ | 否 | 否 | 否 | 新闻详情 |
is_banner | tinyint | 1 | 否 | 是 | 否 | 是否轮播 |
create_time | datetime | __ | 否 | 否 | 否 | 创建时间 |
update_time | datetime | __ | 否 | 否 | 否 | 最近更新时间 |
neuedu_category(旅游类别表)主要是记录各种旅游产品的分类,主键为类别ID,设置为自增。
图3-3 neuedu_category(旅游类别表)
列名 | 数据类型 | 长度 | 主键 | 非空 | 自增 | 注释 |
id | int | 11 | 是 | 是 | 是 | 类别id |
parent_id | int | 50 | 否 | 是 | 否 | 父类ID,当为0是,表示为根节点 |
name | varchar | 50 | 否 | 是 | 否 | 类别名称 |
status | tinyint | 1 | 否 | 是 | 否 | 类别状态1-正常,2-已废弃 |
img | varchar | 233 | 否 | 是 | 否 | 类别图片 |
create_time | datetime | 否 | 否 | 否 | 创建时间 | |
update_time | datetime | 否 | 否 | 否 | 最近更新时间 |
neuedu_point(旅游景点表)是用来记录旅游景点门票等的表,其中主键为景点ID,设置其为自增。
图3-4neuedu_point(旅游景点表)
列名 | 数据类型 | 长度 | 主键 | 非空 | 自增 | 注释 |
id | int | 11 | 是 | 是 | 是 | 景点ID |
category_id | int | 11 | 否 | 是 | 是 | 所属类别ID |
name | varchar | 100 | 否 | 是 | 是 | 景点名 |
subtitle | varchar | 200 | 否 | 否 | 是 | 副标题 |
main_image | varchar | 500 | 否 | 是 | 是 | 主图 |
detail | text | — | 否 | 否 | 是 | 详情 |
stock | int | 11 | 否 | 是 | 是 | 数量 |
price | decimal | 20,2 | 否 | 是 | 是 | 门票价格 |
create_time | datetime | — | 否 | 否 | 是 | 创建时间 |
update_time | datetime | — | 否 | 否 | 是 | 最近更新时间 |
neuedu_product(路线表)是用来存储精彩旅游路线的表,其中路线ID为主键,设置为自增。
图3-5neuedu_product(路线表)
列名 | 数据类型 | 长度 | 主键 | 非空 | 自增 | 注释 |
id | int | 11 | 是 | 是 | 是 | 路线ID |
category_id | int | 11 | 否 | 是 | 否 | 所属类别ID |
name | varchar | 100 | 否 | 是 | 否 | 路线名 |
subtitle | varchar | 200 | 否 | 否 | 否 | 副标题 |
main_image | varchar | 500 | 否 | 是 | 否 | 主图 |
sub_images | text | — | 否 | 否 | 否 | 细节图 |
detail | text | — | 否 | 是 | 否 | 详情 |
price | decimal | 20,2 | 否 | 是 | 否 | 价格 |
stock | int | 11 | 否 | 是 | 否 | 数量 |
status | int | 6 | 否 | 是 | 否 | 状态 |
is_new | tinyint | 1 | 否 | 否 | 否 | 是否上新 |
is_hot | tinyint | 1 | 否 | 是 | 否 | 是否热门 |
create_time | datetime | — | 否 | 否 | 否 | 创建时间 |
update_time | datetime | — | 否 | 否 | 否 | 最近更新时间 |
neuedu_collection(产品收藏表)是用来存储喜爱的旅游产品的表,其中收藏ID 是主键,设置其为自增。
图3-6 neuedu_collection(产品收藏表)
列名 | 数据类型 | 长度 | 主键 | 非空 | 自增 | 注释 |
id | int | 11 | 是 | 是 | 是 | 收藏ID |
user_id | int | 11 | 否 | 是 | 否 | 用户ID |
product_id | int | 11 | 否 | 是 | 否 | 产品ID |
neuedu_message(产品评价表)是用来记录已经订购产品的用户对于本产品评论的表,其中主键为评论ID,设置其为自增。
图3-7neuedu_message(产品评价表)
列名 | 数据类型 | 长度 | 主键 | 非空 | 自增 | 注释 |
id | int | 11 | 是 | 是 | 是 | 评论ID |
user_id | int | 11 | 否 | 是 | 否 | 用户ID |
product_id | int | 11 | 否 | 是 | 否 | 产品ID |
user_name | varchar | 255 | 否 | 是 | 否 | 用户名 |
message | varchar | 255 | 否 | 是 | 否 | 评论信息 |
create_time | varchar | — | 否 | 否 | 否 | 创建时间 |
update_time | datetime | — | 否 | 否 | 否 | 最近更新时间 |
3.3本章小结
本阶段将网站进行了模块的划分,不同模块遵从了高内聚低耦合的思想,并将每个模块的具体实现进行了设计;确定了实体类,分析其属性,得到实体与属性之间的关系,最终画出了E-R图。再通过E-R图进而确定了系统数据库表。
第4章系统详细设计
详细设计阶段的根本任务是确定怎样具体地实现所要求地系统,我们通过这个阶段的设计工作,应该要得出对目标系统的精确描述,但是这个阶段还不是具体地编写代码,而是设计出程序的“蓝图”,最后我们程序员要将这个“蓝图”实现为具体的程序代码。
4.1系统流程图
程序流程图是一种广泛应用于描述过程设计的方法,可以对流程控制具有更加直辊的描绘,便于初学者的掌握。以下是对于本系统旅游模块的整体流程
图4-2 管理员添加景点的流程图
图4-3管理员更换旅游封面图片流程图
4.2关键技术实现
4.2.1SpringBoot整合Mybatis
(1)pom.xml中导入依赖:
(2)配置application.properties文件:
4.2.2Mybatis逆向工程的配置
Mybatis逆向工程就是通过相应的插件以及配置,自动生成Mybatis数据库连接的一些文件。通过Mybatis官方提供的逆向工程,可以针对单表自动生成对应的映射文件、model 类及 dao层[9]。
(1)使用插件,pom.xml文件中加入代码:
(2)新增generatorConfig.xml文件,配置数据库连接以及指定生成的文件,位置和数据库表:
部分数据库表如下:
4.2.3跨域问题
本项目采用前后端分离的设计思想,前端使用Vue-cli脚手架工具搭建,在前端向后台接口发送请求时,会出现跨域问题。本次设计我们采用了后台cors方案来解决此问题。
(1)前端设置baseURL:
(2)后端配置CorsConfig文件:
4.3首页的技术选择
一个优秀的网站,要有美观的界面和简单明了的操作。而这对于程序员来说是一个挑战,寻找合适的开发技术对于我们简单快捷地开发网页是至关重要的。Vue是我们这次前端页面开发的主要使用技术,它不仅好上手,还便于与第三方库或现有项目整合。以下是网页首页使用Vue开发的结构目录:
其中home.vue是父组件,components内的为子组件,子组件在父组件内注册,但又与父组件分开编写,使得开发结构更加清晰,也便于后期的阅读与二次开发。
4.4本章小结
本阶段的主要任务是对目标的精准描述,设计出本系统的“蓝图”。通过对各个模块具体功能的分析,进而画出了程序流程图。由于本阶段还不是具体地编写代码,所以先对项目环境进行搭建,并将关键技术进行详解,为下一阶段的项目实现打下基础。
第5章系统实现
5.1网站浏览页的设计
5.1.1首页设计
图5-1 网站首页的设计
(1)网站首页主要是由顶部的搜素框,旅游新闻的轮播,中部的旅游类别,精彩旅游路线和底部的导航栏成。
(2)游客在进入网页后,无需登录即可通过搜索框查询到相关内容,通过点击旅游类别可以查看到详细列表,再点击列表里的景点图片可以查看到景点的详细信息。
5.1.2路线详情页
图5-2 旅游产品详情页
(1)详情页主要是有旅游产品的信息和已订购过产品用户的留言两大部分组成。通过向数据库查询,展示产品的所有内容(包括旅游产品名称,详细内容,价格,旅游图片,评价信息等等)
(2)通过点击详情页里的查看详情可以查看到产品的具体信息,包括产品的描述以及出游规划等等。
(3)对于已经注册成为本网站的用户,可以将喜爱的旅游产品加入收藏和在线订购。
(4)根据此商品ID查询到评论的Sql:
<select id=”findMessage” parameterType=”java.lang.Integer” resultMap=”BaseResultMap”>
select * from neuedu_message where product_id=#{productid}
</select>
查看到的评论如下:
图5-3 详情页的留言评论显示
5.2管理员模块设计
管理员界面设计管理员登录可以对首页信息进行管理(包括轮播新闻管理,旅游类别管理,旅游景点路线管理):
图3-4 管理员界面设计
5.2.1旅游轮播新闻管理
新闻管理主要是新闻的查询,添加,修改信息和删除。
图3-5 旅游新闻轮播管理
管理员登录,对新闻信息进行添加,写入数据库。
旅游类别管理网站管理员拥有对网页首页旅游类别的管理功能,包括增加,删除,修改的权限,操作后的结果会直接显示在首页上。
管理员可以修改类别的状态以更改类别的显示,只有设置为正常的类别才能才首页显示,已废弃状态的类别则不显示。
图3-6 旅游类别管理
管理员点击编辑按钮进入编辑页面,当填写完成数据后,点击提交按钮,即向接口层发送请求。请求成功后关闭编辑页面。关键代码如下:
editSubmit: function () {
var _vm=this;
this.$refs.editForm.validate((valid) => {
if (valid) {
this.$confirm(‘确认提交吗?’, ‘提示’, {}).then(() => {
this.editLoading = true;
//NProgress.start();
this.service.post(“/manage/category/set_category.do”,{
id:_vm.editForm.id,
name:_vm.editForm.name,
status:_vm.editForm.status,
}).then(res=>{
console.log(res)
if(res.data.status == 0){
this.$refs[‘editForm’].resetFields();
this.editFormVisible2 = false;
_vm.editLoading = false;
this.getCategorys();
}
})
});
}
});
}
5.2.2旅游路线管理
旅游路线管理包括路线的添加,修改,删除和查询的页面以及进行数据库操作。
图3-7 旅游景点路线管理
其中查询功能支持模糊查询,其主要Sql语句如下:
<select id=”findProductsByNameAndId” parameterType=”map” resultMap=”BaseResultMap”>
select * from neuedu_product
<where>
<if test=”productId!=null”>
id=#{productId}
</if>
<if test=”productName!=null”>
name like #{productName}
</if>
</where>
</select>
5.2.3旅游图片的更换
管理员可以对所有网页显示的旅游图片进行更换,并将更换的图片上传到云服务器上,更改数据中图片存储的路径,最终将新换的图片显示出来。
图3-8 更换图片编辑页面
关键代码如下:
5.3本章小结
本阶段主要完成了对网站的代码编写,包括后端接口层,前端用户界面和前端管理员界面三大部分,实现了产品搜索,旅游新闻,旅游类别,旅游路线的首页显示以及管理员对上述信息的添加,修改,删除,上传封面的具体功能。项目编写完成后,购买阿里云服务器,在线部署。
第6章系统测试
软件测试是开发系统的过程中一个非常重要的过程,它并非是简单的找到程序运行中的错误,而是始终贯穿于软件生产过程中,是对目标系统前期分析,中期设计与最终实现的全部审查。
6.1测试的目标
测试的本质是一个发现程序中错误而执行程序的过程,我们应尽可能发现错误,力求设计出最大限度暴露错误的测试方案。
6.2测试的原则
(1)测试应尽早并且大量的测试
(2)程序员在测试时应尽量避免测试自己设计的程序。
(3)测试前应当设计合理可靠的测试用例.
(4)在编写测试用例时,除了要编写合法的输入数据,不合法的输入数据也应当设计编写。
(5)测试的环境应当和用户实际使用环境保持一直。
(6)适当保留测试程中的文档,如测试用例,出错统计等等,作为软件开发的组成部分之一,为后来的系统维护提供方便。
6.3测试的方法
按照软件测试的开发阶段划分,被分为单元测试,集成测试,系统测试和确认测试等几个阶段。
6.3.1单元测试
单元测试又被称为模块测试,是对计算机软件的一些基础原件及不同模块进行测试,属于最基本的测试方法[10]。常见的单元测试采用白盒测试的方法,将系统隔离成单独模块进行测试。
6.3.2集成测试
集成测试也叫做组装测试,是将单独的功能模块组成一个子系统进行测试,将所有模块有序化的检测,避免了模块之间交互时可能发生的错误。
6.3.3系统测试
系统测试是检测完整的程序是否可以和系统的硬件、网络、平台和其他软件正确配置、连接以满足用户的实际需求。
6.3.4确认测试
确认测试是为了测试软件是否可以满足系统开发时的用途和软件需求说明书的规定,以及从用户的角度看是否符合未来的使用期望。
6.4网站测试结果
本次设计我负责的功能模块主要是首页信息的显示以及后端管理员对首页信息的管理,所以前后台操作的显示与数据库内数据的一致性是非常重要的。
数据的一致性主要体现在管理员在后台对新闻、类别、景点和路线的添加、删除、修改会正确显示在网站首页上,具体地说是进行了某项操作后,数据库内地数据会不会马上更新。
以下是我对网站的旅游功能进行集中测试后,得到的部分结果:
6.4.1网站首页
网站的页面是用Vue实现的,其中涉及到组件之间的跳转,直接直接影响下一级页面的显示,所以对首页的功能进行详细的测试是非常有必要的。测试后发现首页的功能都可以正常的运行,并且个页面携带信息跳转都符合要求,例如在首页搜索雁门关,会显示具体的旅游商品列表,结果如图:
图6-1 搜索列表测试
6.4.2网站后台管理
如对类别和路线的添加、修改和删除都进行了一系列都进行了测试,基本都符合设计要求,结果如下:
后台添加一项旅游类别:
6.5本章小结
本阶段的主要任务是对目标系统的软件测试。首先,在项目编写完成后,采用人工测试的方法,先对程序的各部分进行详细地检查,再请同学和老师检查一遍,以便发现问题。之后再进行机器测试,在网页上运行目标程序来发现错误,及时改正。
第7章结论
经过三个月的分析与设计,山西旅游网站已经完成。其中旅游新闻,旅游类别,旅游景点路线等几大板块的功能已全部实现。该网站页面布局友好,功能完善,而且部署于服务器上,使用户随时随地地获取旅游资讯,方便又快捷。开发时使用前后端分离的思想,后台的错误不会直接反映到前台,前后台各司其职可以最大程度的减少开发难度,而且之后的代码也便于他人阅读和进行二次开发。然而还是存在很多的不足之处:功能的细节地方还应当继续完善,例如后期的旅游推荐功能可以根据购买量来推荐以及旅游向预定民宿的跳转界面应当更加相适和完美。
通过本次的毕业设计使我熟练掌握了SpringBoot和Mybatis等常用框架技术,加深了对数据库的理解和运用,并且通过部署项目了解了Linux的常用知识。在开发的过程中我遇到了很多的问题,对一些很深奥的技术问题无法通过查询资料解决,最终向指导老师请教,得到了很好的解决。同时,我也明白了软件开发是一个一环套一环的过程,中间任何一环出现问题都会影响接下来的工作,例如在编写代码时发现数据库的设计出现问题,表里缺少必备的字段,需要重新添加字段以及更改实体类等,浪费了许多时间,所以我们在任何一个环节都应该做好完善的工作,可以帮助我们少走一些弯路。
另外本次的毕设是团队合作的项目,这使我明白了团队合作的重要性,在项目开始初期小组成员一定要多多沟通,只有了解清楚才不会在中途产生巨大的分歧,相信这次的合作项目会让我在之后的道路上受益匪浅。
参考文献
[1]Chan N L,Guillet B D. Investigation of social media marketing: how does the hotel industry in Hong Kong perform in marketing on social media websites?[J]. Journal of Travel & Tourism Marketing,2011,28(04):345-368.
[2]汪美.“互联网+”背景下旅游规划网站的设计与开发[J].电脑知识与技术,2019,15(10):76-77.
[3]刘敏, 王伟, 王雅心. 山西省旅游业发展现状及对策研究[J]. 经济研究参考, 2018, 2905(57):32-40.
[4]袁甜.互联网+时代的旅游电子商务创新模式研究[J].现代经济信息,2018(20):301.
[5]陈宇收等.基于JWT的前后端分离程序设计研究[J].电脑编程技巧与维护,2019(09):11-12.
[6]刘金羽.基于Vue.js的前端教学软件设计与实现[J].电脑编程技巧与维护,2020(02):23-24+29.
[7]Newcomer E , Lomow G . Understanding SOA with Web services[M]. 电子工业出版社, 2006.
[8]Maochun L , Heshun W . A Device Management System Based on JAVAEE WEB[C]// International Conference on Management & Service Science. IEEE, 2009.
[9]陈倩怡,何军.Vue+Springboot+MyBatis技术应用解析[J].电脑编程技巧与维护,2020(01):14-15+28.
[10]刘佳,王丽,杨俊叶.计算机软件测试方法及应用分析[J].科技风,2020(09)
1、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“文章版权申述”(推荐),也可以打举报电话:18735597641(电话支持时间:9:00-18:30)。
2、网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
3、本站所有内容均由合作方或网友投稿,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务。
原创文章,作者:1158,如若转载,请注明出处:https://www.447766.cn/chachong/137965.html,