国产日韩欧美一区二区三区三州_亚洲少妇熟女av_久久久久亚洲av国产精品_波多野结衣网站一区二区_亚洲欧美色片在线91_国产亚洲精品精品国产优播av_日本一区二区三区波多野结衣 _久久国产av不卡

?

Vue.js在構(gòu)建系統(tǒng)前端SPA的應(yīng)用

2020-02-04 16:09沈劍翹陳澤椿
科技創(chuàng)新與應(yīng)用 2020年3期
關(guān)鍵詞:應(yīng)用

沈劍翹 陳澤椿

摘? 要:Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。在分析Vue.js基本特點(diǎn)的基礎(chǔ)上,以服裝材料送檢管理系統(tǒng)的前端設(shè)計(jì)為背景,應(yīng)用Vue.js開發(fā)系統(tǒng)前端SPA,由Vue.js官方提供的腳手架vue-cli構(gòu)建,在生成的項(xiàng)目模板基礎(chǔ)上根據(jù)實(shí)際需求對(duì)項(xiàng)目目錄進(jìn)行修改,最后構(gòu)建的SPA應(yīng)用結(jié)構(gòu)。

關(guān)鍵詞:Vue.js;SPA漸進(jìn)式框架;應(yīng)用

中圖分類號(hào):TP393? ? ? ? ?文獻(xiàn)標(biāo)志碼:A? ? ? ? ?文章編號(hào):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是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,具有條理簡(jiǎn)潔清晰樣例豐富直觀的特點(diǎn),對(duì)各個(gè)水平的國(guó)內(nèi)開發(fā)者都相當(dāng)友好。與其它大型框架不同的是,Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫(kù)只關(guān)注視圖層,Vue.js的目標(biāo)是通過盡可能簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。Vue.js沒有脫離原有的HTML、CSS、JavaScript的基礎(chǔ)開發(fā)習(xí)慣,并且便于與第三方庫(kù)或既有項(xiàng)目整合。這個(gè)應(yīng)用結(jié)構(gòu)下構(gòu)建的SPA應(yīng)用具有的特點(diǎn)如下。

(1)渲染性能高效。為了提高渲染能力,Vue.js選用的是Virtual DOM(虛擬DOM)體系,摒棄和淘汰了消耗比較大的直接操作DOM模式。(2)組件式應(yīng)用體系。Vue.js為應(yīng)用開發(fā)提供了模塊組件式的開發(fā)思想。允許開發(fā)者將整個(gè)應(yīng)用拆分成小型的、獨(dú)立的、復(fù)用性高的組件模塊。每個(gè)組件都可以作為可配置選項(xiàng)的Vue實(shí)例。(3)數(shù)據(jù)綁定。Vue.js將底層數(shù)據(jù)和視圖一一對(duì)應(yīng),進(jìn)入頁面的同時(shí)將掛載的DOM元素實(shí)例化成Vue實(shí)例。數(shù)據(jù)與文檔的DOM結(jié)構(gòu)綁定在一起,在數(shù)據(jù)和結(jié)構(gòu)UI之間建立響應(yīng)式的映射關(guān)系,實(shí)現(xiàn)雙向綁定,視圖數(shù)據(jù)發(fā)生變化時(shí),內(nèi)部數(shù)據(jù)存儲(chǔ)立即發(fā)生相應(yīng)的變化。

2 系統(tǒng)功能背景

某服飾有限公司服裝材料送檢管理系統(tǒng)需要實(shí)現(xiàn)的功能主要有五大功能模塊,分別是基本信息管理模塊、系統(tǒng)管理模塊、申請(qǐng)管理模塊、報(bào)告管理模塊、統(tǒng)計(jì)報(bào)表管理模塊。鑒于篇幅關(guān)系,本文僅以系統(tǒng)中的【統(tǒng)計(jì)圖表】功能模塊的實(shí)現(xiàn)為例介紹相應(yīng)的實(shí)現(xiàn)細(xì)節(jié)。

統(tǒng)計(jì)報(bào)表管理模塊主要對(duì)實(shí)驗(yàn)室送檢情況的統(tǒng)計(jì)報(bào)表、檢測(cè)報(bào)告的數(shù)據(jù)分析、生成送檢管理系統(tǒng)的各項(xiàng)統(tǒng)計(jì)報(bào)表及可視化圖表、統(tǒng)計(jì)報(bào)表的導(dǎo)出還包括報(bào)告格式打打印導(dǎo)出功能。

3 系統(tǒng)開發(fā)技術(shù)方案

3.1 開發(fā)模式

前后端分離已成為互聯(lián)網(wǎng)項(xiàng)目開發(fā)的業(yè)界標(biāo)準(zhǔn)開發(fā)方式。前后端分離可以有效的進(jìn)行解耦,并且會(huì)為以后的大型分布式架構(gòu)、彈性計(jì)算架構(gòu)、微服務(wù)架構(gòu)、多端化服務(wù)(多種客戶端,例如:瀏覽器,車載終端,安卓,IOS等等)打下堅(jiān)實(shí)的基礎(chǔ)。前后端分離的核心思想是前端HTML頁面通過Ajax調(diào)用后端的API接口并使用Json數(shù)據(jù)進(jìn)行交互,實(shí)現(xiàn)前后端的徹底解耦,從而提高開發(fā)效率。

3.2 開發(fā)結(jié)構(gòu)

系統(tǒng)前端使用的是采用了MVVC架構(gòu)的漸進(jìn)式JavaScript框架Vue.js構(gòu)建一個(gè)單頁面WEB應(yīng)用(single page web application,SPA),用SQL Server 2008數(shù)據(jù)庫(kù)來管理數(shù)據(jù)。

系統(tǒng)的結(jié)構(gòu)是,前端SPA通過AJAX調(diào)用請(qǐng)求后端應(yīng)用WEB API的接口,后端應(yīng)用去訪問數(shù)據(jù)庫(kù),與數(shù)據(jù)庫(kù)做交互獲取數(shù)據(jù),再將獲取到的數(shù)據(jù)以Json的數(shù)據(jù)格式返回給前端SPA,再由前端SPA去處理得到的數(shù)據(jù)以友好的頁面展示給用戶。

在接口交互的設(shè)計(jì)上,將WEB API與數(shù)據(jù)庫(kù)交互時(shí)執(zhí)行的SQL腳本獨(dú)立以.sql文件存放。前端SPA與WEB API交互時(shí),只需要對(duì)好需要執(zhí)行的腳本命令.sql文件、返回結(jié)果數(shù)據(jù)格式。然后WEB API只需要用文件流讀取對(duì)應(yīng)的腳本命令.sql文件讀取出SQL腳本,通過執(zhí)行讀取出來的SQL腳本去與數(shù)據(jù)庫(kù)交互。將SQL腳本獨(dú)立成文件的設(shè)計(jì)使得WEB API的開發(fā)變得更加簡(jiǎn)單,接口更加簡(jiǎn)化,不用在接口方法中維護(hù)SQL腳本。這樣的設(shè)計(jì)也更方便開發(fā)和維護(hù),當(dāng)新的需求出現(xiàn)或者有需求變更時(shí),只需要去編寫或修改SQL腳本,達(dá)到一次開發(fā)多次使用的效果,剩下的就是執(zhí)行的SQL腳本的編寫,還有前端SPA的編寫。系統(tǒng)的架構(gòu)如圖1所示。

圖1 系統(tǒng)的架構(gòu)圖

在這個(gè)開發(fā)結(jié)構(gòu)上可以實(shí)現(xiàn)系統(tǒng)的以下幾點(diǎn)優(yōu)勢(shì)。

(1)徹底解耦,高效開發(fā)。前后端可以獨(dú)立調(diào)試代碼。在開發(fā)過程中前后端代碼不混雜,各自可以進(jìn)行獨(dú)立的調(diào)試,可以提高開發(fā)效率。(2)責(zé)任明確,容易維護(hù)。當(dāng)發(fā)現(xiàn)bug時(shí),可以快速定位問題,提高解決問題的效率;當(dāng)需求發(fā)生變更時(shí),只要接口、參數(shù)不變,就不需要兩端都修改代碼,易于維護(hù)。(3)減少后端服務(wù)器的并發(fā)/負(fù)載壓力。一些前端可以做的邏輯可以放到前端進(jìn)行處理,放在前端處理使用的是客戶端的計(jì)算資源,可以減少后端服務(wù)器帶寬、內(nèi)存和CPU等的計(jì)算資源,降低后端服務(wù)器的負(fù)載。

3.3 Vue.js的應(yīng)用

本文的前端SPA應(yīng)用采用的是Vue.js,通過npm包管理工具對(duì)項(xiàng)目的依賴項(xiàng)進(jìn)行管理。項(xiàng)目由Vue.js官方提供的腳手架vue-cli構(gòu)建,在生成的項(xiàng)目模板基礎(chǔ)上根據(jù)實(shí)際需求對(duì)項(xiàng)目目錄進(jìn)行修改,最后構(gòu)建的SPA應(yīng)用結(jié)構(gòu)如圖2所示。其中主要文件的說明如下。

(1)package.json文件是項(xiàng)目及工具的依賴配置文件。(2)App.vue文件是應(yīng)用的頁面入口文件。(3)main.js文件是應(yīng)用程序入口文件加載各種公共組件。(4)index.html文件是入口html文件。(5)api.js文件是對(duì)API接口定義和封裝,使用的是Axios技術(shù)進(jìn)行封裝。(6)components文件夾主要存放應(yīng)用程序的vue模板組件。(7)build文件是webpack配置文件。

4 Vue.js在系統(tǒng)中【統(tǒng)計(jì)圖表】的應(yīng)用

本文所闡述系統(tǒng)通過對(duì)送檢申請(qǐng)信息以及送檢報(bào)告信息的收集,將信息進(jìn)行統(tǒng)計(jì)整合產(chǎn)生一系列的圖表達(dá)到數(shù)據(jù)可視化的效果,從而更好的幫助企業(yè)做決策。其中主要的圖形報(bào)表有供應(yīng)商檢測(cè)項(xiàng)目不合格率散點(diǎn)圖、送檢員送檢供應(yīng)商材料次數(shù)條形圖、送檢申請(qǐng)狀態(tài)分布圖等等。因?yàn)橄到y(tǒng)的設(shè)計(jì),使得要需求擴(kuò)展報(bào)表變得十分方便,如果還想要繼續(xù)拓展報(bào)表,只需要編寫對(duì)應(yīng)的查詢分析的SQL腳本文件以及頁面顯示的vue模板文件即可,不需要去修改后臺(tái)的任何代碼。圖3是供應(yīng)商檢測(cè)項(xiàng)目不合格率散點(diǎn)圖的頁面。

圖3 供應(yīng)商檢測(cè)項(xiàng)目不合格率散點(diǎn)圖

實(shí)現(xiàn)該功能的時(shí)序圖如圖4所示。

圖4 獲取散點(diǎn)圖數(shù)據(jù)時(shí)序圖

參考文獻(xiàn):

[1]劉于沛.基于HTML5進(jìn)行響應(yīng)式Web應(yīng)用的技巧[J].中國(guó)新通信,2017(02):56-57.

[2]吳睿.Web前端開發(fā)技術(shù)以及優(yōu)化研究[J].中國(guó)新通信,2016

(17):63.

[3]陳濤.MVVM設(shè)計(jì)模式及其應(yīng)用研究[J].計(jì)算機(jī)與數(shù)字工程,2014(10):1982-1985.

[4]張耀春.Vue.js權(quán)威指南[M].北京:電子工業(yè)出版社,2016.

[5]王子毅,張春海.基于ECharts的數(shù)據(jù)可視化分析組件設(shè)計(jì)實(shí)現(xiàn)[J].微型機(jī)與應(yīng)用,2016,35(14):46-48+51.

猜你喜歡
應(yīng)用
配網(wǎng)自動(dòng)化技術(shù)的應(yīng)用探討
帶壓堵漏技術(shù)在檢修中的應(yīng)用
行列式的性質(zhì)及若干應(yīng)用
癌癥擴(kuò)散和治療研究中的微分方程模型
紅外線測(cè)溫儀在汽車診斷中的應(yīng)用
多媒體技術(shù)在小學(xué)語文教學(xué)中的應(yīng)用研究
微課的翻轉(zhuǎn)課堂在英語教學(xué)中的應(yīng)用研究
分析膜技術(shù)及其在電廠水處理中的應(yīng)用
GM(1,1)白化微分優(yōu)化方程預(yù)測(cè)模型建模過程應(yīng)用分析
煤礦井下坑道鉆機(jī)人機(jī)工程學(xué)應(yīng)用分析
泾阳县| 临高县| 巴彦县| 辽宁省| 德惠市| 卓资县| 新河县| 丰原市| 叶城县| 安宁市| 乐昌市| 教育| 邹城市| 北辰区| 乐清市| 万宁市| 潜江市| 察哈| 天镇县| 定西市| 孝义市| 宜州市| 信阳市| 新津县| 石首市| 高淳县| 旬邑县| 罗定市| 平和县| 行唐县| 溆浦县| 桂阳县| 山阳县| 九江县| 临清市| 广丰县| 兴文县| 汶川县| 丰原市| 桂东县| 鄄城县|