發(fā)布時(shí)間：2021-11-23 07:23

　　針對(duì)車載嵌入式網(wǎng)絡(luò)設(shè)備維護(hù)軟件設(shè)計(jì)的需求,提出了一種基于BS架構(gòu)的通用解決方案,完整闡述了方案的前端頁(yè)面、后端服務(wù)以及前后端交互接口的設(shè)計(jì)。與傳統(tǒng)的CS架構(gòu)的設(shè)計(jì)方案相比,有著良好的通用性和可擴(kuò)展性,具有更好的用戶體驗(yàn),并可應(yīng)用于移動(dòng)終端。不同的車載設(shè)備可依據(jù)具體需求,對(duì)此方案進(jìn)行適當(dāng)?shù)牟眉?可快速實(shí)現(xiàn)不同項(xiàng)目及不同設(shè)備下維護(hù)軟件的部署。 

【文章來(lái)源】：鐵道機(jī)車車輛. 2020,40(05)北大核心

【文章頁(yè)數(shù)】：4 頁(yè)

【部分圖文】：

一種基于SPA車載嵌入式系統(tǒng)維護(hù)軟件BS架構(gòu)方案

如圖2所示，左側(cè)為功能菜單導(dǎo)航區(qū)，用戶點(diǎn)擊對(duì)應(yīng)的功能菜單，則高亮選中的菜單，同時(shí)右側(cè)區(qū)域展示對(duì)應(yīng)的功能視圖。由于Vue.js采用了組件化開(kāi)發(fā)的設(shè)計(jì)理念，每一個(gè)組件均需要實(shí)現(xiàn)3部分功能：頁(yè)面模板、js邏輯、css樣式。本項(xiàng)目的前端設(shè)計(jì)也采用組件化方式進(jìn)行設(shè)計(jì)開(kāi)發(fā)。前端頁(yè)面的根組件包含3個(gè)子組件，即頭部組件、左側(cè)導(dǎo)航組件、右側(cè)內(nèi)容展示組件。其中右側(cè)內(nèi)容展示組件隨左側(cè)導(dǎo)航菜單動(dòng)態(tài)切換，需要為左側(cè)導(dǎo)航菜單的每一個(gè)菜單項(xiàng)設(shè)計(jì)對(duì)應(yīng)的組件，所有這些菜單功能組件共用右側(cè)展示局域，具有排他性。整個(gè)前端的頁(yè)面邏輯如圖3所示。圖3 前端頁(yè)面邏輯

圖2 前端頁(yè)面模板傳統(tǒng)單頁(yè)面局部視圖切換采用控制樣式來(lái)實(shí)現(xiàn)視圖的顯示和隱藏，而且通常是將所有的視圖和js邏輯寫在一起，這種設(shè)計(jì)方式在模塊化和擴(kuò)展性方面都較差。使用了Vue提供的前端哈希路由機(jī)制配合組件化思路來(lái)實(shí)現(xiàn)局部視圖的切換。核心思想是為每個(gè)功能菜單設(shè)計(jì)對(duì)應(yīng)的哈希路由url，同時(shí)將該url與對(duì)應(yīng)的組件相關(guān)聯(lián)，最終會(huì)形成一張前端路由url和組件的對(duì)應(yīng)關(guān)系表，當(dāng)用戶點(diǎn)擊對(duì)應(yīng)的左側(cè)功能菜單，會(huì)觸發(fā)前端路由url跳轉(zhuǎn)（瀏覽器地址欄會(huì)有相應(yīng)的顯示，但是此時(shí)沒(méi)有與后端服務(wù)器進(jìn)行交互），結(jié)合前端路由表，Vue會(huì)自動(dòng)實(shí)現(xiàn)對(duì)應(yīng)組件的展示。


本文編號(hào)：3513400