Vue.js在构建系统前端SPA的应用.docxVIP

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.jsisaprogressiveframeworkforbuildinguserinterfaces.basedontheanalysisofthebasiccharacteristicsofvue.js，takingthefront-enddesignoftheclothingmaterialinspectionmanagementsystemasthebackground，thefront-endspa，ofthevue.jsdevelopmentsystemisconstructedbyscaffoldingvue-cliprovidedbyvue.jsofficially.basedonthegeneratedprojecttemplate，theprojectdirectoryismodifiedaccordingtotheactualrequirements，andfinallythespaapplicationstructureisconstructed. 　　keywords：vue.js;spaprogressiveframework;application 　　1vue.js概述 　　vue.js是一套用于构建用户界面的渐进式框架，具有条理简洁清晰样例丰富直观的特点，对各个水平的国内开发者都相当友好。与其它大型框架不同的是，vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层，vue.js的目标是通过尽可能简单的api实现响应的数据绑定和组合的视图组件。vue.js没有脱离原有的html、css、javascript的基础开发习惯，并且便于与第三方库或既有项目整合。这个应用结构下构建的spa应用具有的特点如下。 　　（1）渲染性能高效。为了提高渲染能力，vue.js选用的是virtualdom（虚拟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应用（singlepagewebapplication，spa），用sqlserver2008数据库来管理数据。 　　系统的结构是，前端spa通过ajax调用请求后端应用webapi的接口，后端应用去访问数据库，与数据库做交互获取数据，再将获取到的数据以json的数据格式返回给前端spa，再由前端spa去处理得到的数据以友好的页面展示给用户。