針對車載嵌入式網絡設備維護軟件設計的需求,提出了一種基于BS架構的通用解決方案,完整闡述了方案的前端頁面、后端服務以及前后端交互接口的設計。與傳統(tǒng)的CS架構的設計方案相比,有著良好的通用性和可擴展性,具有更好的用戶體驗,并可應用于移動終端。不同的車載設備可依據具體需求,對此方案進行適當的裁剪,可快速實現不同項目及不同設備下維護軟件的部署。 

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

【文章頁數】：4 頁

【部分圖文】：

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

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

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


本文編號：3513400