一种基于BS架构的车载嵌入式系统维护软件的设计与实现
发布时间:2021-11-23 07:23
针对车载嵌入式网络设备维护软件设计的需求,提出了一种基于BS架构的通用解决方案,完整阐述了方案的前端页面、后端服务以及前后端交互接口的设计。与传统的CS架构的设计方案相比,有着良好的通用性和可扩展性,具有更好的用户体验,并可应用于移动终端。不同的车载设备可依据具体需求,对此方案进行适当的裁剪,可快速实现不同项目及不同设备下维护软件的部署。
【文章来源】:铁道机车车辆. 2020,40(05)北大核心
【文章页数】:4 页
【部分图文】:
一种基于SPA车载嵌入式系统维护软件BS架构方案
如图2所示,左侧为功能菜单导航区,用户点击对应的功能菜单,则高亮选中的菜单,同时右侧区域展示对应的功能视图。由于Vue.js采用了组件化开发的设计理念,每一个组件均需要实现3部分功能:页面模板、js逻辑、css样式。本项目的前端设计也采用组件化方式进行设计开发。前端页面的根组件包含3个子组件,即头部组件、左侧导航组件、右侧内容展示组件。其中右侧内容展示组件随左侧导航菜单动态切换,需要为左侧导航菜单的每一个菜单项设计对应的组件,所有这些菜单功能组件共用右侧展示局域,具有排他性。整个前端的页面逻辑如图3所示。图3 前端页面逻辑
图2 前端页面模板传统单页面局部视图切换采用控制样式来实现视图的显示和隐藏,而且通常是将所有的视图和js逻辑写在一起,这种设计方式在模块化和扩展性方面都较差。使用了Vue提供的前端哈希路由机制配合组件化思路来实现局部视图的切换。核心思想是为每个功能菜单设计对应的哈希路由url,同时将该url与对应的组件相关联,最终会形成一张前端路由url和组件的对应关系表,当用户点击对应的左侧功能菜单,会触发前端路由url跳转(浏览器地址栏会有相应的显示,但是此时没有与后端服务器进行交互),结合前端路由表,Vue会自动实现对应组件的展示。
本文编号:3513400
【文章来源】:铁道机车车辆. 2020,40(05)北大核心
【文章页数】:4 页
【部分图文】:
一种基于SPA车载嵌入式系统维护软件BS架构方案
如图2所示,左侧为功能菜单导航区,用户点击对应的功能菜单,则高亮选中的菜单,同时右侧区域展示对应的功能视图。由于Vue.js采用了组件化开发的设计理念,每一个组件均需要实现3部分功能:页面模板、js逻辑、css样式。本项目的前端设计也采用组件化方式进行设计开发。前端页面的根组件包含3个子组件,即头部组件、左侧导航组件、右侧内容展示组件。其中右侧内容展示组件随左侧导航菜单动态切换,需要为左侧导航菜单的每一个菜单项设计对应的组件,所有这些菜单功能组件共用右侧展示局域,具有排他性。整个前端的页面逻辑如图3所示。图3 前端页面逻辑
图2 前端页面模板传统单页面局部视图切换采用控制样式来实现视图的显示和隐藏,而且通常是将所有的视图和js逻辑写在一起,这种设计方式在模块化和扩展性方面都较差。使用了Vue提供的前端哈希路由机制配合组件化思路来实现局部视图的切换。核心思想是为每个功能菜单设计对应的哈希路由url,同时将该url与对应的组件相关联,最终会形成一张前端路由url和组件的对应关系表,当用户点击对应的左侧功能菜单,会触发前端路由url跳转(浏览器地址栏会有相应的显示,但是此时没有与后端服务器进行交互),结合前端路由表,Vue会自动实现对应组件的展示。
本文编号:3513400
本文链接:https://www.wllwen.com/kejilunwen/jiaotonggongchenglunwen/3513400.html