优维低代码:Storyboard 整体结构与路由配置

EASYOPS_youwei · · 446 次点击 · · 开始浏览    

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。

在开始入门中,我们学习到了如何创建一个微应用,下来我们将详细讲解 storyboard 的配置,及该如何使用构件及构件间事件传递。

为了更好的理解 storyboard 的常用配置及相关细节,这里以一个 CRUD 的页面案例来讲解,初学者请将如下代码复制到开始入门示例的storyboard.json,并开启构建查看效果:

yarn serve --auto-remote --server YOUR-EASYOPS-SERVER-IP。

下来我们将该 storyboard 拆解分块讲解

# Storyboard 整体结构

我们先来说下 storybard 的整体结构,如上所示:

  • $schema:描述该 json 的结构,用于校验 json 格式,建议使用 IDE(如 VScode)打开此项目,这样才能利用上该 schema 来校验。
  • imports:声明引用的 npm 包,用于打包构建时判断依赖是否完整,在开发阶段并不影响,但在打包时候注意添加完整,不然打包会报错,见[micro-apps 打包报依赖错误](/next-docs/docs/customization/package-and-deploy#micro-apps 打包报依赖错误)。
  • app:此微应用的一些配置,包括:
    name:微应用名称。
    id:微应用 ID,需要在 EasyOps 平台全局唯一。
    homepage:微应用的前缀路径,可使用${APP.homepage}变量引用他。
  • routes:路由配置,微应用整体页面是由路由驱动的。

# 路由配置

我们复制第 1 个路由的相关配置进行讲解:

  • path:页面的地址,为了统一单个微应用的前缀路径,可以使用${APP.homepath}变量来做占位符指定,此示例这里表示/demo
  • exact:是否精确匹配,在storyboard 的整体结构可以看到routes是一个有顺序的数组,页面的路由匹配是从上往下的,如果exact=true表示页面路由精确匹配,比如这里只能匹配/demo,而不能再匹配/demo/xxx;而如果exact=false的话,则以/demo开头的页面地址都会路由到此配置上。
  • menu:该页面的左侧菜单栏配置,因为此菜单比较简单,我们抽取第 2 个路由的菜单来做详解,具体内容见菜单配置。
  • bricks:该页面使用到的构件列表,具体内容我们下节来讲。
  • providers:预定义使用的providers,这个是最近新增的 key,有了这个配置能力后,可以在一个入口出统一去管理声明providers,这样便于管理。

通过以上分享,相信你已经了解了 storyboard 的整体架构和路由配置了。


有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:701969077

446 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传