附錄A外文翻譯—原文部分出處：Source:ZhaiZhiguang,JiTingting,WuXiaoli[J].ModernComputer,2017ResearchandImplementationofBackstageSinglePageApplicationManagementSystemBasedonVue.jsabstractThroughtheresearchofVue.js,routing,globalstate,axiosandothertechnologies,thebackgroundsingleapplicationmanagementsystemisrealized.EncapsulatetheactionsanddefinetherelevantrequestinformationintheconfigurationfiletoimplementtheactionwiththebackgroundAPIrequest,greatlyreducingtheamountofsystemcode,andensuringthesystem'suniformityandrobustness.Thefront-endpagecontrolstheentryofthepagefileaccordingtothemenupolicy,andperformsbutton-levelpermissionverificationaccordingtothepagepermissioncontrolpolicy.Keywords:Vue.js;MVVM;singlepageapplication;rightsroductionInordertomeettheincreasinglycomplexanddiverseWebApprequirements,moreandmorebusinesslogicoftheoriginalback-endprocessinghasbeguntobetransferredtothefront-endforprocessing.Vue.JSissuchaprogressiveframeworkforbuildinguserinterfacesthatfacilitatesthemigrationofmostback-endlogictothefrontend.Vue.JSusesabottom-upincrementaldesign,anditscorelibraryfocusesonlyontheviewlayer.Itisnotonlyeasytouse,butalsoeasytointegratewiththird-partylibrariesorexistingprojects.Ontheotherhand,whenVue.JSisusedinconjunctionwithasinglefilecomponentanditslibrarysupportedbytheVue.JSecosystem,itisalsofullycapableofprovidingdriversforcomplexsingleapplications.Therefore,Vue.JSisusedtodesignthefront-endofthebackgroundmanagementsystem,whichwillreducethedevelopmentdifficultyoffront-enddevelopers.SystemkeycomponentselectionThefront-endengineeringofthissystemisbasedontherequirementsofstreamlinedprocess,lowcost,rapiddevelopment,highperformance,etc.,mainlyusedtokeycomponentssuchasVue.JS,vue-router,vuex,axios.Vue.JSisthebasicviewlayerframeworkfortheentirefront-endproject,whichmainlysolvestheproblemoffront-enddatabinding.Traditionalfront-enddevelopment,basedprimarilyonjQuery,operatesDOMthroughavarietyofcomplexselectors.Atthesametime,throughAJAXandtheservertorequestdata,thefront-endcodeparsestheJSONlayerbylayer,assignsacertainlevelofJSONdatatothecorrespondingDOMoperation,andalsoperformstheexceptionhandlingoftherequest.Thedataisnotonlycomplicatedandcomplicated,butalsopronetounknownerrors.ThroughVue.JS'sresponsivetwo-waybindingdata,real-timereflectionoftherealchangeofdataandmappingtothetargetvirtualDOM,avoidingthecomplicatedoperationoftheDOMselectorinthefront-endpagedevelopment,simplifyingthewebfront-enddevelopmentprocessandreducingtheopendifficultyandimprovingFront-enddevelopmentefficiency,reducingdevelopmentcostsandcycles.Vue-routerisaroutingpluginofficiallyreleasedbyVue.JS.ItisdeeplyintegratedwithVue.JSandissuitableforbuildingsingleapplications.Thetraditionalpageapplicationusessomehyperlinkstoimplementpageswitchingandjumping.Inthevue-routersingleapplication,itistheswitchbetweenthepaths,thatis,theswitchingofcomponents.Thepagecomponentisdynamicallymountedbytherouter-viewandfinallyrenderedintoapage.Inaddition,HTML5introducesanewAPI,history.pushStateandhistory.replaceState,whichcanchangethepageURLwithoutrefreshingthepagethroughthisnewinterface,whichallowsVue.JStodynamicallyadjustthepagepathforpageswitching.,improveduserexperience.VuexisasetofglobalstatemanagementsolutionsimplementedbyVue.JSinaccordancewithFlux,andisintegratedintovue-devtools,enablingtimetraveldebugginginthebrowserwithoutconfiguration.Whendevelopingasingleapplication,weusuallystorethestateinsidethecomponent.Eachcomponenthasitsownstatemanagement,butattheapplicationlevel,manypublicstatesarescatteredacrosspages.Atthesametime,weoftenneedtosharepartofthestatetomultiplecomponents.Acommonsolutionistouseaneventsystemtoletacomponent"inform"somestatetoothercomponentstoletthecorrespondingcomponentrespondtochanges.However,theproblemwiththismodelisthattheflowofeventsinalargecomponenttreecanquicklybecomeverycomplicated,anditisdifficulttofindoutexactlywhatwentwrongwhencalling.Thebubblingoftheeventislikelytocausetheresourceconsumptionoftheentireapplicationtobeveryhigh.Big.Applicationsaregettingbiggerandbigger,thenumberofpagefilesisincreasing,andmultiplestatesarescatteredacrossmanycomponentsandinteractions,andtheircomplexityisoftenincreasing.Usevuextoputthestateintoaglobalinstance,sothateachcomponentrespondssynchronously,reducingsystemstatecomplexity.However,whenusingglobalstatemanagement,wealsoneedtodistinguishbetweencomponentcomponentlocalstate(componentlocalstate)andapplicationlevelstate(applicationlevelstate)toavoidcomponentlocalstatetobeappliedtotheapplicationlevelstateformanagement.Theapplication-levelstatedoesnotbelongtoanyparticularcomponent,buteachcomponentcanstillmonitoritschangestoresponsivelyupdatetheDOM.Wesolvedthepageswitchingproblemwithvue-router.Wesolvedtheproblemofglobalstatesharingmanagementthroughvuex,butthebasisofallapplicationsisdata.TraditionaldatarequestsaremainlyimplementedusingJQuery-encapsulatedAJAXrequests.Whendealingwithasynchronousproblems,thecallbackcallbackisgenerallyused.Thecallbackcallbackhasaveryseriouspyramidproblem-astateinwhichalargenumberofcallbackfunctionsslowlyextendtotherightscreen.ByusingPromise-enabledcomponentstoenterAJAXrequests,wecanimplementasynchronousrequestoperationsinsynchronouscode.AxiosissuchanHTTPclientbasedonPromiseforbrowsersandnodejs.ItcancreateXMLHttpRequestfromthebrowser,supportPromiseAPI,andfacilitatemiddlewareoperationsintherequestprocess,suchaspermissionchecking.Thewholefront-endprojectissummarized,mainlyusingvueasthebasicviewlayerframework,usingvue-routertocompletethejumpoffront-endpageroutingandvariousaccessinterceptionfunctions,usingaxiosastheHTTPrequestlibrary,andusingvuextoberesponsiblefortheglobalstatemanagementofthefront-end.UseiViewastheinterfacecomponentlibrary.HowVue.jsworksBeforeintroducingtheprincipleofVue.js,Iwillintroduceafewconcepts.Observerisessentiallyadatalistener.Itgoeswithoutsayingthatitactsasalistener.Forallthepropertiesinthedataobject,itcanlistentoit,tellingthesubscriberwhichpropertieshavechangedandwhatchangeshaveoccurred.FortheinstructionparserCompile,itscanstheinstructionsinVue.jsandparsesandcompilesthescannedinstructions.Watcherisequivalenttoacoordinator.ItsmainfunctionistoestablishaconnectionbetweenObserverandCompile.ItcannotonlyreceivethepropertychangenotificationfromObserver,butalsoplayaschedulingroleandexecutethecorrespondingcommandbinding.Callbackfunctiontoupdatetheview.WhenanobjectiscreatedinVue,aninitializationprocessisfirstperformedfortheobject.Duringtheinitializationprocess,Observerwillalwayslistentoallthepropertiesoftheobject,andCompilewillscantheinstructionsinthewebpage,compilethescannedinstructions,andinitializetheview.WatcherwilladdasubscribertoDep.Whenthesystemisrunning,theObserverlistenerwillgetthepropertychangeandnotifyDep.InDep,itwillfindthesubscribercorrespondingtothepropertyobject,andsendachangenotificationtotheWatcherwhoaddedthesubscriber,soastocorrespondinglyviewtheview.Update.ComparisonofVue.jsandReact.jsReact.jswasoriginallyaprojectofFacebookitself.Thefront-endframeworkwasbasedonthetraditionalMVCmodel,butthetraditionalMVCwasdifficulttomeettherequirementsofFacebook.Becausetheprojectwasaverylargeprojectwithverycomplicatedlogicstructureandquitealotofprogramcode,React.jswasborn.Firstofall,Vue.jshasmanysimilaritieswithReact.js:1.UseVirtualDOM.2.Providesaresponsive(Reactive)andcomponentized(Composable)viewcomponent.3.Focusonthecorelibrary,alongwiththeaccompanyingroutingandlibrariesresponsibleforhandlingglobalstatemanagement.ThisarticlefocusesoncomparingthedifferencesbetweenVue.jsandReact.js,andbycomparingtheadvantagesofVue.js,sothesimilaritiesarenotrepeatedhere.ForthedifferencebetweenVue.jsandReact.js,theauthorcompareswithasmallexample.Whenwerendertheuserinterface,inordertoreducetheoperationofDom,ReactandVueallimplementthisrequirementthroughtheVirtualDomabstractionlayer.InadditiontothenecessaryDomoperations,itisnecessarytoreducetheconsumptionofotherfunctions,suchassomepageoperations.Wait.ThisisthedifferencebetweenVueandReact.Toprovethis,wecreatedasimplereferenceprojectthatisresponsibleforrendering10,000listitems100times.Inordertoobtaintheexperimentalresultsobjectively,theauthorperformedtheexperimentprojecttwentytimesandobtainedthebestresultsfromtheirrespectiveoperations.ItcanbeclearlyseenfromtherunningresultsthattheunoptimizedVueismuchfasterthantheunoptimizedReact.BecauseVuehasimprovedrenderingperformance,evenfullyoptimizedReactsareusuallyslowerthanout-of-the-boxVue.RenderingperformanceisonlyoneofthepowerfulfeaturesofVue.Comparedwithotherfront-endlibraries,Vuehasmanyfeatures.Firstofall,Vue.jsisalightweightfront-endlibrarythatiseasytouseandcanbelearnedbynovicesfortoomuchtime..ForDOMupdates,Vueusesasynchronousbatchprocessing,soit'sveryfast,anditcanalsocombineeachcomponentinaseries,whichgreatlyimprovesthedecouplingandreusabilityoftheprogram.ArchitecturedesignTheentireback-endsingleapplicationmanagementsystemisdividedintotwoprojects:front-endengineeringandback-endengineering,andthefrontandbackendsarecombinedintheformofAPIinterfaces.Inthefront-endproject,componentsareusedasthestoragedirectoryoftheindividualpagecomponents,andpagesareusedasthestoragedirectoryofthesystempages.Allthecoderelatedtotheglobalstatemanagementisstoredinthestoredirectory,andthecoderelatedtotheroutingconfigurationisstoredintherouterdirectory,andthegeneralconfigurationfileisused.Storedinthecommondirectory.Usually,whenyoudoastoredesign,alltheactionsareconcentratedintheaction.jsfile,whichcontainsthecodeforthebackgroundapirequestviaaxios.Whenthebackgroundsingleapplicationsystemdevelopmentiscarriedout,thedatacommunicationwillbefrequentlycarriedoutwiththebackground.Therefore,itisconsideredtodividetheactionintotwotypes,oneiswithoutthebackgroundAPIrequest,butthesimplefront-endoperation,andtheotherisalwaysincluded.BackgroundAPIrequest,datacommunicationwiththebackground.Accordingtopastexperience,about2/3oftheactionsinvolvebackgroundAPIrequests,sosomeformofcodeisneededtoreduceduplicaterequestcodes.Afterthinkingabouttheaboveproblems,youcanreducetheamountofcodeinthesystembyensuringuniformityofrequests,especiallytheuniformityofrequestexceptions.Declarethenamesofallactionsincommon/mutation-types.js,suchas:exportconstBACKEND_LOGIN='BACKEND_LOGIN',whichdefinesanactionforBACKEND_LOGIN.DeclareallactionsinvolvingbackgroundAPIrequestsinapi/config.jsandconfiguretheirrequestaddresses,etc.,inthefollowingformat:api[BACKEND_LOGIN]={url:''method:'get',pathinfo:true|False,noMutation:true|false}.Thekeyoftheobjectistheconstantofthemutation-type,theurlindicatesthepathoftherequest,themethodindicatesthewayoftherequest,thepathinfoindicateswhethertherequestedurlparameterisaddedtotherequestedpathbypathinfo,andthenoMutationindicateswhethertoignorethecommitoperation.Yes,someofthedatarequestedbyajaxisnotaglobalstate,butastateofsomepagelevel,sothereisnoneedtoperformglobalstatemanagementontherequesteddata.Inapi/helper.js,declarethecreateAPIRequestmethod,whichacceptsthreeparameters:commit,type,param,wherecommitisamethod,thecommitoperationofthemutation,typeisaspecificmutation-type(nameoftheaction),paramistherequestparameterthatneedstobepassedin.Theapirequestconfigurationforthistypecanbeobtainedfromapi/config.jsviathetypepassedin.Accordingtoitsconfiguration,thecorrespondingbackgroundapirequestisperformed,andaccordingtothenoMutationintheconfigurationitem,itisidentifiedwhetherthecommitoperationneedstobeperformed,andfinallyaPromiseinstanceisreturned,sothatwecanimplementvariousasynchronousoperationsintheformofsynchronouscode.Inaddition,whendesigningthefront-endsystem,itisalsonecessarytoconsiderthepermissionsoftheentiresystem.Inthebackgroundapplication,theuserrightsaremainlyauthenticatedaccordingtoRBACinthemiddleware.Inthefront-endpage,theuserrightsarecontrolledinthreelevels:thefirstlayerismainlythecontroloftheuserportal,andtheperformanceis:accordingtotheuserrole,themenulistthattheusercanaccessisobtained.Thesecondlayerismainlytoidentifytherightswhentheuseraccessesthepage.Intheglobalhookoftherouter,accordingtothepermissionsoftheuserrole,toidentifywhethertheuserhastherighttoaccessthepage,ifthereispermission,thennext(),otherwise,directlyredirecttheusertothe401page.Thethirdlayer,whentheuseronlyhasaccesstothepagepermission,butdoesnothavetheoperationpermission,thepackagedhasPermissionmethoddynamicallydisplaysorhidestherelevantoperationentry,andcanalsoshoworhidetherelevantdatacolumnaccordingtotheactualrequest.DeploymentimplementationSeparationofthefrontandrearendsensurestheindependenceofthefrontandrearends.Forfront-endprojects,usewebpackpackagingtogeneratefront-endcodeinthebuildenvironment.Fortheback-endproject,youneedtopackagethecorrespondingproductionenvironmentapplicationaccordingtothespecificdevelopmentenvironment.Whenthefront-endandtheendareseparatedandreleased,thecross-domainproblemisoftenencountered.Inordertoreducethecode-levelmodificationactions,Nginxcanbeusedtoperformreverseproxy,andthetwoprojectsaredeployedinadomainnametosolvethecross-domainproblem..ThefollowingisaNginxconfigurationfilewithaPHPapplicationasanexample.Themainideaistoforwardtherequesttothefront-endpagetothefront-endstaticpage,andthefront-endvue-routerperformspageroutingcontrol.ConclusionThispapermainlydescribesthedesignoftheback-endsingleapplicationsystembasedonVue.JSfromthreeaspects:componentselection,systemstructuredesignanddeploymentimplementation.Theencapsulationofrelatedcomponentsandthedevelopmentofleadingfunctionsintheformofconfigurationreducethefront-enddevelopmentworkloadoftheback-endsystemtoacertainextent.Utilizethetwo-waybindingfeatureofVue.JStoefficientlyreflectdatatothepagemodel,whileVue.JShandlespageDOMoperationsmoreefficientlyandimprovestheperformanceofbackgroundapplications.

附錄B外文翻譯—譯文部分基于Vue.js的后臺單頁應用管理系統的研究與實現摘要通過研究Vue.js、路由、全局狀態、axios等技術，實現后臺單頁應用管理系統。對actions進行封裝，并在配置文件中定義好相關請求信息，即可實現帶后臺API請求的action操作，極大程度減少系統代碼量，并保證系統的統一性、健壯性。前端頁面根據菜單策略控制頁面文件的入口，根據頁面權限控制策略進行按鈕級別權限校驗。關鍵詞：Vue.js；MVVM；單頁應用；權限管理引言為了滿足日益復雜、多樣的WebApp需求，越來越多的原本后端處理的業務邏輯開始轉移到前端來處理。Vue.JS就是這樣一套構建用戶界面的漸進式框架，方便大部分后端邏輯移植到前端去實現。Vue.JS采用自底向上增量開發的設計，其核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當Vue.JS與單文件組件及其Vue.JS生態系統支持的庫結合使用時，也完全能夠為復雜的單頁應用程序提供驅動。由此，采用Vue.JS進行后臺管理系統的前端設計工作，一定程度減輕前后端開發人員開發難度。系統關鍵組件選型本系統前端工程基于流程簡化、低成本、快速開發、高性能等需求，主要選用到Vue.JS、vue-router、vuex、axios等關鍵組件。Vue.JS是整個前端工程的基礎視圖層框架，主要解決前端數據綁定的問題。傳統的前端開發，主要基于jQuery通過各種復雜的選擇器來操作DOM。同時，通過AJAX跟服務器請求數據，前端代碼一層層解析JSON，將JSON某個層級的數據賦給相應的DOM操作，還要進行請求的異常處理，數據不但操作繁瑣復雜且易出現未知錯誤。而通過Vue.JS的響應式雙向綁定數據，實時反映數據的真實變化并映射到目標虛擬DOM上，避免前端頁面開發中DOM選擇器繁雜的操作，簡化Web前端開發流程和降低開放難度，提升前端開發效率，降低開發成本和周期。vue-router是Vue.JS官方發布的一款路由插件，和Vue.JS是深度集成的，適合用于構建單頁面應用。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。而在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。通過router-view來動態掛載頁面組件，并最終渲染成頁面。另外，HTML5里引入了新的API，history.pushState和history.replaceState，可以通過這個新的接口做到無刷新訪問頁面的同時改變頁面URL，這讓Vue.JS能夠動態調整頁面路徑，方便頁面切換，提高了用戶體驗。vuex是Vue.JS官方依照Flux實現的一套全局狀態管理方案，并被集成到vue-devtools，無需配置即可在瀏覽器中實現時光旅行式調試。當開發單頁應用時，我們通常會把狀態儲存在組件的內部，每一個組件都擁有其自身的狀態管理，但是在整個應用層面上看，很多公共的狀態是卻是分散在各個頁面中。同時，我們經常會需要把狀態的一部分共享給多個組件。一個常見的解決方案是使用事件系統來讓一個組件把一些狀態“告知”到其他組件中，來讓相應的組件去響應變化。但是這種模式的問題在于，大型組件樹中的事件流會很快變得非常繁雜，并且調用時很難去找出究竟哪里出錯，事件的冒泡也很有可能導致整個應用的資源消耗非常大。應用越來越大，頁面文件數也越來越多，多個狀態分散的跨越在許多組件和交互中，其復雜度也經常逐漸增長。使用vuex將狀態放入一個全局的實例中，做到各個組件同步響應，減少系統狀態復雜度。但是在使用全局狀態管理時，我們還需要對組件的組件本地狀態（componentlocalstate）和應用層級狀態（applicationlevelstate）進行區分，避免出現組件本地狀態放到應用級狀態去管理。應用級的狀態不屬于任何特定的組件，但每一個組件仍然可以監視其變化從而響應式地更新DOM。通過vue-router我們解決了頁面切換問題，通過vuex我們解決了全局狀態共享管理的問題，但是所有應用的基礎在于數據。傳統數據請求，主要利用jQuery封裝的AJAX請求來實現。在處理異步問題時，一般采用的是callback回調的方式。callback回調存在一個很嚴重的金字塔問題——大量的回調函數慢慢向右側屏幕延伸的一種狀態。通過采用含Promise特性的組件來進AJAX請求，使得我們可以用同步的代碼形式實現異步的請求操作。axios就是這樣一個基于Promise用于瀏覽器和nodejs的HTTP客戶端，其可以從瀏覽器中創建XMLHttpRequest，支持PromiseAPI，同時方便實現請求過程中的中間件操作，例如權限校驗。整個前端工程總結下來，主要采用vue作為基礎視圖層框架，利用vue-router完成前端頁面路由的跳轉及各類訪問攔截功能，采用axios作為HTTP請求庫，同時利用vuex負責前端的全局狀態管理，采用iView作為界面基礎組件庫。Vue.js的運行原理在介紹Vue.js運行原理之前，先要介紹幾個概念。Observer本質是一個數據監聽器，不言而喻它是起到一個監聽的作用，對于數據對象中的所有屬性，它都能夠對其監聽，告知訂閱者哪些屬性發生了變化和發生了哪些變化。對于指令解析器Compile，它是對Vue.js中的指令進行掃描，并對掃描后的指令進行解析編譯。Watcher相當于一個協調者，它主要的作用是在Observer和Compile之間建立起連接，它不但能夠接收來自Observer的屬性變化通知，而且從中起到一個調度的作用，并執行指令綁定的相應的回調函數，從而更新視圖。在Vue創建一個對象時，首先會為這個對象進行一個初始化的過程。在初始化的過程中，Observer會一直對這個對象所有的屬性進行監聽，同時Compile會掃描Web頁面中的指令，對掃描后的指令進行編譯，并會初始化視圖。而Watcher會在Dep中添加一個訂閱者。