Vue.js在构建系统前端SPA的应用
来源:用户上传
作者:
摘 要：Vue.js是一套用于构建用户界面的渐进式框架。在分析Vue.js基本特点的基础上，以服装材料送检管理系统的前端设计为背景，应用Vue.js开发系统前端SPA，由Vue.js官方提供的脚手架vue-cli构建，在生成的项目模板基础上根据实际需求对项目目录进行修改，最后构建的SPA应用结构。
关键词：Vue.js;SPA渐进式框架;应用
中图分类号：TP393 文献标志码：A 文章编号：2095-2945（2020）03-0181-02
Abstract： Vue.js is a progressive framework for building user interfaces. Based on the analysis of the basic characteristics of Vue.js， taking the front-end design of the clothing material inspection management system as the background， the front-end SPA， of the Vue.js development system is constructed by scaffolding vue-cli provided by Vue.js officially. Based on the generated project template， the project directory is modified according to the actual requirements， and finally the SPA application structure is constructed.
Keywords： Vue.js; SPA progressive framework; application
1 Vue.js概述
Vue.js是一套用于构建用户界面的渐进式框架，具有条理简洁清晰样例丰富直观的特点，对各个水平的国内开发者都相当友好。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js没有脱离原有的HTML、CSS、JavaScript的基础开发习惯，并且便于与第三方库或既有项目整合。这个应用结构下构建的SPA应用具有的特点如下。
（1）渲染性能高效。为了提高渲染能力，Vue.js选用的是Virtual DOM（虚拟DOM）体系，摒弃和淘汰了消耗比较大的直接操作DOM模式。（2）组件式应用体系。Vue.js为应用开发提供了模块组件式的开发思想。允许开发者将整个应用拆分成小型的、独立的、复用性高的组件模块。每个组件都可以作为可配置选项的Vue实例。（3）数据绑定。Vue.js将底层数据和视图一一对应，进入页面的同时将挂载的DOM元素实例化成Vue实例。数据与文档的DOM结构绑定在一起，在数据和结构UI之间建立响应式的映射关系，实现双向绑定，视图数据发生变化时，内部数据存储立即发生相应的变化。
2 系统功能背景
某服饰有限公司服装材料送检管理系统需要实现的功能主要有五大功能模块，分别是基本信息管理模块、系统管理模块、申请管理模块、报告管理模块、统计报表管理模块。鉴于篇幅关系，本文仅以系统中的【统计图表】功能模块的实现为例介绍相应的实现细节。
统计报表管理模块主要对实验室送检情况的统计报表、检测报告的数据分析、生成送检管理系统的各项统计报表及可视化图表、统计报表的导出还包括报告格式打打印导出功能。
3 系统开发技术方案
3.1 开发模式
前后端分离已成为互联网项目开发的业界标准开发方式。前后端分离可以有效的进行解耦，并且会为以后的大型分布式架構、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。前后端分离的核心思想是前端HTML页面通过Ajax调用后端的API接口并使用Json数据进行交互，实现前后端的彻底解耦，从而提高开发效率。
3.2 开发结构
系统前端使用的是采用了MVVC架构的渐进式JavaScript框架Vue.js构建一个单页面WEB应用（single page web application，SPA），用SQL Server 2008数据库来管理数据。
系统的结构是，前端SPA通过AJAX调用请求后端应用WEB API的接口，后端应用去访问数据库，与数据库做交互获取数据，再将获取到的数据以Json的数据格式返回给前端SPA，再由前端SPA去处理得到的数据以友好的页面展示给用户。
在接口交互的设计上，将WEB API与数据库交互时执行的SQL脚本独立以.sql文件存放。前端SPA与WEB API交互时，只需要对好需要执行的脚本命令.sql文件、返回结果数据格式。然后WEB API只需要用文件流读取对应的脚本命令.sql文件读取出SQL脚本，通过执行读取出来的SQL脚本去与数据库交互。将SQL脚本独立成文件的设计使得WEB API的开发变得更加简单，接口更加简化，不用在接口方法中维护SQL脚本。这样的设计也更方便开发和维护，当新的需求出现或者有需求变更时，只需要去编写或修改SQL脚本，达到一次开发多次使用的效果，剩下的就是执行的SQL脚本的编写，还有前端SPA的编写。系统的架构如图1所示。
图1 系统的架构图 在这个开发结构上可以实现系统的以下几点优势。
（1）彻底解耦，高效开发。前后端可以独立调试代码。在开发过程中前后端代码不混杂，各自可以进行独立的调试，可以提高开发效率。（2）责任明确，容易维护。当发现bug时，可以快速定位问题，提高解决问题的效率;当需求发生变更时，只要接口、参数不变，就不需要两端都修改代码，易于维护。（3）减少后端服务器的并发/负载压力。一些前端可以做的逻辑可以放到前端进行处理，放在前端处理使用的是客户端的计算资源，可以减少后端服务器带宽、内存和CPU等的计算资源，降低后端服务器的负载。
3.3 Vue.js的应用
本文的前端SPA应用采用的是Vue.js，通过npm包管理工具对项目的依赖项进行管理。项目由Vue.js官方提供的脚手架vue-cli构建，在生成的项目模板基础上根据实际需求对项目目录进行修改，最后构建的SPA应用结构如图2所示。其中主要文件的说明如下。
（1）package.json文件是项目及工具的依赖配置文件。（2）App.vue文件是应用的页面入口文件。（3）main.js文件是应用程序入口文件加载各种公共组件。（4）index.html文件是入口html文件。（5）api.js文件是对API接口定义和封装，使用的是Axios技术进行封装。（6）components文件夹主要存放应用程序的vue模板组件。（7）build文件是webpack配置文件。
4 Vue.js在系统中【统计图表】的应用
本文所阐述系统通过对送检申请信息以及送检报告信息的收集，将信息进行统计整合產生一系列的图表达到数据可视化的效果，从而更好的帮助企业做决策。其中主要的图形报表有供应商检测项目不合格率散点图、送检员送检供应商材料次数条形图、送检申请状态分布图等等。因为系统的设计，使得要需求扩展报表变得十分方便，如果还想要继续拓展报表，只需要编写对应的查询分析的SQL脚本文件以及页面显示的vue模板文件即可，不需要去修改后台的任何代码。图3是供应商检测项目不合格率散点图的页面。
图3 供应商检测项目不合格率散点图
实现该功能的时序图如图4所示。
图4 获取散点图数据时序图
参考文献：
[1]刘于沛.基于HTML5进行响应式Web应用的技巧[J].中国新通信，2017（02）：56-57.
[2]吴睿.Web前端开发技术以及优化研究[J].中国新通信，2016
（17）：63.
[3]陈涛.MVVM设计模式及其应用研究[J].计算机与数字工程，2014（10）：1982-1985.
[4]张耀春.Vue.js权威指南[M].北京：电子工业出版社，2016.
[5]王子毅，张春海.基于ECharts的数据可视化分析组件设计实现[J].微型机与应用，2016，35（14）：46-48+51.
转载注明来源:https://www.xzbu.com/1/view-15111212.htm
