毕业设计外文文献—基于 Vue.docx
- 文档编号:11606638
- 上传时间:2023-03-26
- 格式:DOCX
- 页数:10
- 大小:20.19KB
毕业设计外文文献—基于 Vue.docx
《毕业设计外文文献—基于 Vue.docx》由会员分享,可在线阅读,更多相关《毕业设计外文文献—基于 Vue.docx(10页珍藏版)》请在冰豆网上搜索。
附录A外文翻译一原文部分
出处:
Source:
ZhaiZhiguang,JiTingting,WuXiaoli[J].ModemComputer,2017
ResearchandImplementationofBackstageSinglePageApplication
ManagementSystemBasedonVue.js
abstract
ThroughtheresearchofVue.js,routing,globalstate,axiosandothertechnologies,thebackgroundsingle-pageapplicationmanagementsystemisrealized.EncapsulatetheactionsanddefinetherelevantrequestinformationintheconfigurationfiletoimplementtheactionwiththebackgroundAPIrequest,greatlyreducingtheamountofsystemcode,andensuringthesystem'suniformityandrobustness.Thefront-endpagecontrolstheentryofthepagefileaccordingtothemenupolicy,andperformsbuttonlevelpermissionverificationaccordingtothepagepermissioncontrolpolicy.Keywords:
Vue.js;MVVM;singlepageapplication;rightsmanagement.
introduction
InordertomeettheincreasinglycomplexanddiverseWebApprequirements,moreandmorebusinesslogicoftheoriginalback-endprocessinghasbeguntobetransferredtothefront-endforprocessing.Vue.JSissuchaprogressiveframeworkforbuildinguserinterfacesthatfacilitatesthemigrationofmostback-endlogictothefrontend.Vue.JSusesabottom-upincrementaldesign,anditscorelibraryfocusesonlyontheviewlayer.Itisnotonlyeasytouse,butalsoeasytointegratewiththird-partylibrariesorexistingprojects.Ontheotherhand,whenVue.JSisusedinconjunctionwithasinglefilecomponentanditslibrarysupportedbytheVue.JSecosystem,itisalsofullycapableofprovidingdriversforcomplexsingle-pageapplications.Therefore,Vue.JSisusedtodesignthefront-endofthebackgroundmanagementsystem,whichwillreducethedevelopmentdifficultyoffront-enddevelopers.
Systemkeycomponentselection
Thefront-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.JSandissuitableforbuildingsingle-pageapplications.Thetraditionalpageapplicationusessomehyperlinkstoimplementpageswitchingandjumping.Inthevue-routersingle-pageapplication,itistheswitchbetweenthepaths,thatis,theswitchingofcomponents.Thepagecomponentisdynamicallymountedbytherouter-viewandfinallyrenderedintoapage.Inaddition,HTML5introducesanewAPI,history.pushStateandhistory.replaceState,whichcanchangethepageURLwithoutrefreshingthepagethroughthisnewinterface,whichallowsVue.JStodynamicallyadjustthepagepathforpageswitching.,improveduserexperience.
VuexisasetofglobalstatemanagementsolutionsimplementedbyVue.JSinaccordancewithFlux,andisintegratedintovue-devtools,enablingtimetraveldebugginginthebrowserwithoutconfiguration.Whendevelopingasingle-pageapplication,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.jsworks
BeforeintroducingtheprincipleofVue.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.jsandReactjs
React.jswasoriginallyaprojectofFacebookitself.Thefront-endframeworkwasbasedonthetraditionalMVCmodel,butthetraditionalMVCwasdifficulttomeettherequirementsofFacebook.Becausetheprojectwasaverylargeprojectwithverycomplicatedlogicstructureandquitealotofprogramcode,React.jswasbom.Firstofall,Vue.jshasmanysimilaritieswithReact.js:
1.UseVirtualDOM.
2.Providesaresponsive(Reactive)andcomponentized(Composable)viewcomponent.
3.Focusonthecorelibrary,alongwiththeaccompanyingroutingandlibrariesresponsibleforhandlingglobalstatemanagement.
ThisarticlefocusesoncomparingthedifferencesbetweenVue.jsandReactjs,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.Comparedwithother
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 毕业设计外文文献基于 Vue 毕业设计 外文 文献 基于
![提示](https://static.bdocx.com/images/bang_tan.gif)