介绍

为了应对大型项目的开发,CabloyJS提供了三驾马车:套件模块应用

  • 套件、模块:在物理层面上对代码进行组织,参见:套件模块

  • 应用:在逻辑层面上对界面交互进行布局,面向不同业务场景和不同终端用户,提供不同的界面组合

比如,我们开发一套电商系统,既需要为终端用户提供一套界面,也需要为后台管理提供一套界面。此外,针对不同的终端也要提供不同的界面,比如PC端、Mobile H5端。针对这类业务诉求,在CabloyJS中就可以创建多个App应用,每个App应用可以针对不同终端、不同用户,定制不同的界面布局

特点

  1. 支持不同应用场景:为不同的应用场景提供不同的界面布局

  2. 支持不同终端:为不同终端提供不同的界面布局

  3. 支持不同认证状态:为未登录已登录用户提供不同的界面布局

  4. 支持不同语言:为不同的语言提供不同的界面布局,比如,博客系统,可以为中文用户英文用户提供不同的界面布局

  5. 完善的权限控制:可以通过资源授权的方式,把App应用授权给不同的角色和用户

界面布局组成

一个App应用由三部分组成:

  • App Menu(App菜单):显示与App相关的菜单页面

    • 必需:对于一个App而言,App Menu是必须要提供的布局组件
  • App Home(App首页):显示与App相关的首页页面

    • 可选:对于一个App而言,App Home是可选的布局组件。如果没有提供App Home,则显示Default App的布局组件
  • App Mine(App我的):显示与App相关的关于我的信息页面

    • 可选:对于一个App而言,App Mine是可选的布局组件。如果没有提供App Mine,则显示Default App的布局组件

app

App应用切换

可以通过多种途径来切换App应用

  1. 页面左上角的slogan:点击此slogan将切换到Default App

  2. 页面右上角的主页按钮:点击此按钮将把当前App的Menu、Home和Mine页面统一呈现,方面用户快速访问当前App的功能和数据

  3. 切换左侧App面板:切换到指定的App

初始App

当打开前端页面时,系统默认打开的是Default App。当然,我们也可以直接通过页面的query string指定参数appKey,从而直接打开指定的App

URL App
https://test.cabloy.com/ Default App
https://test.cabloy.com/?appKey=test-party:appParty test-party:appParty App

Default App

CabloyJS提供了一个内置App:Default App,为前端页面提供基础的界面布局。Default App的appKey是a-app:appDefault,由模块a-app提供,参见:src/module-system/a-app/backend/src/config/static/app/appDefault.js

  • 对于自定义的App,只有App Menu是必需项,如果自定义App没有提供App Home或者App Mine,就会默认显示Default App的界面组件

独立App

CabloyJS还提供了独立App的概念。一般而言,我们可以在多个App之间切换,从而呈现出不同的界面布局。但在一些面向C端用户的场景,我们往往需要提供更加纯粹的界面布局。这时,我们就可以提供独立App。当C端用户打开此App时,看到的仅仅是本App的功能、菜单和数据,禁止切换App

  • App设置为独立模式,有两种方式

    • App配置中指定appIsolatetrue:参见:如何创建App应用

    • 直接通过页面的query string指定:比如上面提到的test-party:appParty App,如果要以独立模式显示,可以这样构造页面URL:https://test.cabloy.com/?appKey=test-party:appParty&&appIsolate=true