基于VueJS的景区管理系统设计与开发
发布时间：2022-01-01 19:58
随着我国经济的蓬勃发展,人民的生活正全面奔小康,生活质量得到很大的改善,从而对于旅游体验要求越来越高,但是目前我国的传统旅游管理模式已经无法满足人们的需求,因此景区需要针对自身需求制定一套智能化的景区管理系统。安全管理是景区管理中最重要也是最基础的环节,同时智能化的售票检票可以提高景区的资源利用,促进景区的发展,所以景区的安全和票务是景区管理中急需解决的重要问题。针对目前景区管理中存在的问题,本文在分析了国内外景区智能化管理研究现状以及发展趋势的基础上,同时分析了景区管理系统的整体需求,采用JavaScript和Java语言,使用WebRTC实时视频传输技术以及PostgreSQL数据库存储技术,设计并开发了基于VueJS的景区管理系统,本文的主要工作如下:（1）介绍了景区智能化管理的研究背景和意义,阐述了景区管理系统的国内外研究现状,并介绍了系统开发中采用的关键技术,同时确定了系统所用的框架和数据库。（2）基于对系统信息需求、功能需求和性能需求三个方面综合分析的基础上,设计了景区管理系统的整体结构、网络拓扑结构、逻辑结构,并给出了系统的技术路线,然后对系统具体功能模块进行详细设计,最...
【文章来源】：浙江工业大学浙江省
【文章页数】：75 页
【学位级别】：硕士
【图文】：
EventLoop执行过程图
基于VueJS的景区管理系统设计与开发9用于实现客户端与服务器端的异步通信，实现页面的局部刷新，从而快速创建动态网页[48]。在传统Web交互中，客户端向服务器端发送一个HTTP请求后，服务器端对请求进行处理后向客户端返回一个新的HTML网页，但客户端在服务器端处理客户端的HTTP请求时，只能空闲等待，从而导致客户端需要重新读取HTML页面，浪费时间和资源。Ajax应用是客户端通过XMLHttpRequest对象向服务器端发送HTTP请求，服务器端返回数据，通过JavaScript操作DOM对象，实现页面刷新，由于JavaScript可以及时对服务器提出请求与响应，并且不阻塞用户，从而节省时间提高性能，Ajax工作原理流程图如图2-2所示。并且Ajax具有无刷新更新数据，异步与服务器通信，前端和后端负载平衡、基于标准被广泛支持以及界面与应用分离等优点[49]。图22Ajax应用模型图Figure2-2.AjaxwebapplicationmodelDiagram2.1.2VueJS框架VueJS是一款用于构建用户页面的轻量级、渐进式框架[50]，而且也是一款轻量级的JS库，API简洁，容易上手。与原生JavaScript或者JQuery相比，VueJS只需要关注图层数据，不需要繁杂的DOM操作，并且支持多种第三方库以及方便于项目整合，从而节省开发时间及成本。同时VueJS框架具有侵入性低、鼓励模块化、双向绑定、组件化开发和丰富指令等特点，使复杂交互逻辑的前端应用开发变得简单。
畚?10VueJS的核心思想是数据驱动[51]，它可以使数据与DOM保持同步，避免使用JQuery手动操作DOM时遇到的命令式、重复的以及易错的代码等错误。Vue的核心思路是将data的属性转化为getter和setter然后和watch绑定，将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听model的数据变化，通过Compile来解析编译模板指令(vue中用来解析{{}})，利用Watch作为Observer和Compile之间的通信桥梁，实现数据变化视图更新，视图交互变化，数据model变更的双向绑定效果，Vue执行流程如图2-3所示。图2-3Vue执行流程图Figure2-3.VueexecutionflowchartVueJS使用数据劫持和订阅发布实现双向绑定，实例化Vue对象时，对数据进行属性遍历，通过Object.defineProperty()给数据对象添加getter和setter，并对模板进行编译生成指令对象，每个指令对象绑定一个Watcher对象，然后对数据赋值时会触发setter，此时会使得Watcher再次被触发进行监听，如果数据变化，会通知相应的指令，调用指令的update方法，指令是指DOM封装，因此会调用DOM的原生方法对DOM进行更新，实现数据驱动DOM的变化。同时Vue还会对DOM进行事件监听，如果DOM发生变化，Vue监听到后则会修改相应的data。VueJS另一核心是虚拟DOM，可以看作是一个使用JavaScript模拟DOM结构的树形结构。在传统Web应用开发模式中，原生JavaScript或者JQuery操作DOM时，浏览器会从构建DOM树开始从头到尾执行，计算DOM节点不仅浪费浏览器性能，并且频繁操作还会出现页面卡顿，影响用户体验。虚拟DOM是纯粹的JavaScript对象，具有高效的Diff算法，当页面更新时，先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM
【参考文献】：
期刊论文
[1]中国旅游发展笔谈——智慧旅游目的地的困境与突破[J]. 杨振之. 旅游学刊. 2019(08)
[2]基于移动互联的智慧景区检测管理系统的设计与实现[J]. 刘杰,高静,张姝. 信息与电脑(理论版). 2019(13)
[3]都市森林公园生态旅游的管理策略——以上海共青森林公园为例[J]. 晏姿. 现代园艺. 2019(13)
[4]北京市旅游产业创新的现状与发展策略[J]. 王义博,巩丽朵,王绪辉,田嘉美,林茹. 旅游纵览(下半月). 2019(05)
[5]互联网时代下“智慧景区”管理系统构建与策略探究[J]. 林捷兴. 计算机产品与流通. 2019(05)
[6]基于人工智能视频深度处理技术的景区智慧化管理探索研究[J]. 王刚,杨晟,戴成华,宋偲皓,薛继待. 科技通报. 2019(04)
[7]南京智慧景区的发展——以牛首山文化旅游区为例[J]. 任静. 现代经济信息. 2019(01)
[8]庐山白鹿洞书院的智慧旅游体系构建研究[J]. 刘元明,乔秋敏. 旅游纵览(下半月). 2018(10)
[9]基于低碳理念的智慧景区规划设计研究——以乌村景区为例[J]. 孔俊婷,杨森. 生态经济. 2018(09)
[10]风景名胜区总体规划实施评估研究--以杭州西湖风景名胜区为例[J]. 李宁汀,石春晖,宋峰,王晓辉. 城市发展研究. 2018(06)
硕士论文
[1]景区电子票务智能管理系统设计与实现[D]. 欧阳雁.湖南大学 2017
[2]基于HTML5的高校就业信息管理系统的研究与开发[D]. 黄文强.南昌航空大学 2016
[3]基于MVC模式的WEB前端开发研究与应用[D]. 姚腾辉.合肥工业大学 2016
[4]基于H.264的视频压缩技术及其在视频监控系统中的应用[D]. 徐瑶.安徽大学 2014
[5]基于Node.js高并发web系统的研究与应用[D]. 陈瑶.电子科技大学 2014
[6]Spring框架技术分析及应用研究[D]. 翟剑锟.中国科学院大学(工程管理与信息技术学院) 2013
[7]基于ARM9的嵌入式H.264编码器的应用研究[D]. 李杜.江西理工大学 2012
[8]基于HTML5和CSS3的网易WAP站触屏版移动产品研究[D]. 丁楠.华中科技大学 2012
本文编号：3562742
【文章来源】：浙江工业大学浙江省
【文章页数】：75 页
【学位级别】：硕士
【图文】：
EventLoop执行过程图
基于VueJS的景区管理系统设计与开发9用于实现客户端与服务器端的异步通信，实现页面的局部刷新，从而快速创建动态网页[48]。在传统Web交互中，客户端向服务器端发送一个HTTP请求后，服务器端对请求进行处理后向客户端返回一个新的HTML网页，但客户端在服务器端处理客户端的HTTP请求时，只能空闲等待，从而导致客户端需要重新读取HTML页面，浪费时间和资源。Ajax应用是客户端通过XMLHttpRequest对象向服务器端发送HTTP请求，服务器端返回数据，通过JavaScript操作DOM对象，实现页面刷新，由于JavaScript可以及时对服务器提出请求与响应，并且不阻塞用户，从而节省时间提高性能，Ajax工作原理流程图如图2-2所示。并且Ajax具有无刷新更新数据，异步与服务器通信，前端和后端负载平衡、基于标准被广泛支持以及界面与应用分离等优点[49]。图22Ajax应用模型图Figure2-2.AjaxwebapplicationmodelDiagram2.1.2VueJS框架VueJS是一款用于构建用户页面的轻量级、渐进式框架[50]，而且也是一款轻量级的JS库，API简洁，容易上手。与原生JavaScript或者JQuery相比，VueJS只需要关注图层数据，不需要繁杂的DOM操作，并且支持多种第三方库以及方便于项目整合，从而节省开发时间及成本。同时VueJS框架具有侵入性低、鼓励模块化、双向绑定、组件化开发和丰富指令等特点，使复杂交互逻辑的前端应用开发变得简单。
畚?10VueJS的核心思想是数据驱动[51]，它可以使数据与DOM保持同步，避免使用JQuery手动操作DOM时遇到的命令式、重复的以及易错的代码等错误。Vue的核心思路是将data的属性转化为getter和setter然后和watch绑定，将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听model的数据变化，通过Compile来解析编译模板指令(vue中用来解析{{}})，利用Watch作为Observer和Compile之间的通信桥梁，实现数据变化视图更新，视图交互变化，数据model变更的双向绑定效果，Vue执行流程如图2-3所示。图2-3Vue执行流程图Figure2-3.VueexecutionflowchartVueJS使用数据劫持和订阅发布实现双向绑定，实例化Vue对象时，对数据进行属性遍历，通过Object.defineProperty()给数据对象添加getter和setter，并对模板进行编译生成指令对象，每个指令对象绑定一个Watcher对象，然后对数据赋值时会触发setter，此时会使得Watcher再次被触发进行监听，如果数据变化，会通知相应的指令，调用指令的update方法，指令是指DOM封装，因此会调用DOM的原生方法对DOM进行更新，实现数据驱动DOM的变化。同时Vue还会对DOM进行事件监听，如果DOM发生变化，Vue监听到后则会修改相应的data。VueJS另一核心是虚拟DOM，可以看作是一个使用JavaScript模拟DOM结构的树形结构。在传统Web应用开发模式中，原生JavaScript或者JQuery操作DOM时，浏览器会从构建DOM树开始从头到尾执行，计算DOM节点不仅浪费浏览器性能，并且频繁操作还会出现页面卡顿，影响用户体验。虚拟DOM是纯粹的JavaScript对象，具有高效的Diff算法，当页面更新时，先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM
【参考文献】：
期刊论文
[1]中国旅游发展笔谈——智慧旅游目的地的困境与突破[J]. 杨振之. 旅游学刊. 2019(08)
[2]基于移动互联的智慧景区检测管理系统的设计与实现[J]. 刘杰,高静,张姝. 信息与电脑(理论版). 2019(13)
[3]都市森林公园生态旅游的管理策略——以上海共青森林公园为例[J]. 晏姿. 现代园艺. 2019(13)
[4]北京市旅游产业创新的现状与发展策略[J]. 王义博,巩丽朵,王绪辉,田嘉美,林茹. 旅游纵览(下半月). 2019(05)
[5]互联网时代下“智慧景区”管理系统构建与策略探究[J]. 林捷兴. 计算机产品与流通. 2019(05)
[6]基于人工智能视频深度处理技术的景区智慧化管理探索研究[J]. 王刚,杨晟,戴成华,宋偲皓,薛继待. 科技通报. 2019(04)
[7]南京智慧景区的发展——以牛首山文化旅游区为例[J]. 任静. 现代经济信息. 2019(01)
[8]庐山白鹿洞书院的智慧旅游体系构建研究[J]. 刘元明,乔秋敏. 旅游纵览(下半月). 2018(10)
[9]基于低碳理念的智慧景区规划设计研究——以乌村景区为例[J]. 孔俊婷,杨森. 生态经济. 2018(09)
[10]风景名胜区总体规划实施评估研究--以杭州西湖风景名胜区为例[J]. 李宁汀,石春晖,宋峰,王晓辉. 城市发展研究. 2018(06)
硕士论文
[1]景区电子票务智能管理系统设计与实现[D]. 欧阳雁.湖南大学 2017
[2]基于HTML5的高校就业信息管理系统的研究与开发[D]. 黄文强.南昌航空大学 2016
[3]基于MVC模式的WEB前端开发研究与应用[D]. 姚腾辉.合肥工业大学 2016
[4]基于H.264的视频压缩技术及其在视频监控系统中的应用[D]. 徐瑶.安徽大学 2014
[5]基于Node.js高并发web系统的研究与应用[D]. 陈瑶.电子科技大学 2014
[6]Spring框架技术分析及应用研究[D]. 翟剑锟.中国科学院大学(工程管理与信息技术学院) 2013
[7]基于ARM9的嵌入式H.264编码器的应用研究[D]. 李杜.江西理工大学 2012
[8]基于HTML5和CSS3的网易WAP站触屏版移动产品研究[D]. 丁楠.华中科技大学 2012
本文编号：3562742
本文链接：https://www.wllwen.com/kejilunwen/ruanjiangongchenglunwen/3562742.html
