课程视频

• CabloyJS全栈框架：从入门到精通

048 大型项目三驾马车：模块、套件、应用(2)

• 应用

  - 应用组成：App Menu、App Home、App Mine

047 大型项目三驾马车：模块、套件、应用(1)

• 大型项目

  • 场景

    • OA 办公、电商、CRM、ERP，等等

  • 特点

    • 一个业务需要多个模块来实现

    • 不同的业务有不同的界面布局：菜单、首页、个人信息

• 解决方案

  • 套件和模块：用于组织代码

  • 应用：用于组织界面布局

• 模块

• 套件

  1. 新建套件 sz-businesstrip

  2. 重新组织业务模块

  3. 重新安装依赖

  4. 重构数据字典：报销状态

• 应用

  - 应用组成：App Menu、App Home、App Mine

046 SVG图标

• 图标分类

• 字体图标

• SVG 图标（推荐）

• 诉求：作为一个成熟的框架，除了能够便利的使用内置图标之外，还要解决两个问题：

  • 可以便利的添加自定义图标

  • 可以支持大型系统的开发

    • 方案1：一个图标一个 SVG 文件？

    • 方案2：所有图标一个 SVG 文件？

    • 更优方案：进行分组管理

• 使用图标

  • 字体图标 / SVG 图标

  • 内置图标

• 图标命名规范

  • module:group:icon

• 创建图标

045 表单字段高级用法(2)

• 应用场景

  3. 筛选页面：

• 表单分组

  • ebType: group/group-flatten

044 表单字段高级用法(1)

• 出差申请

  • 增加字段

    1. 出差时间: tripTime

    2. 出差城市: tripCity

• 应用场景

  1. 表单页面：

  2. 表格页面：

  3. 筛选页面：

• 表单分组

  • ebType: group/group-flatten

043 数据字典(2)

• 使用字典

  • code/title 转换机制

    • 前端转换 还是 后端转换

    • 为什么在后端转换

      • 安全

      • 性能

  • 应用场景

    • 表单字段

    • 表格字段

    • 搜索/筛选字段

042 数据字典(1)

• 字典分类

  • 数组型：性别、国家、宴会类型、报销状态

  • 树型：城市

• 开发步骤

  • 创建字典

  • 使用字典

• code/title 转换机制

  • 前端转换 还是 后端转换

  • 为什么在后端转换

    • 安全

    • 性能

• 应用场景

  • 表单字段

  • 表格字段

  • 搜索/筛选字段

041 编辑页面脏标记

在中后台管理系统中，如何实现像word、excel一样的脏标记，当内容有变更时避免意外关闭编辑页面？CabloyJS全栈框架的方案交互体验好，开发又极其简便。咱们一起看看是如何做到的

• 应用场景

  • 内容有变更时，避免意外关闭窗口

  • word/excel/业务表单

• 实现效果

  1. 内容：有变更时设置脏标记

  2. 标题：显示脏标记

  3. 执行成功：去除脏标记

  4. 关闭页面：显示提示框

• 开发步骤

040 表单渲染与数据验证(3)

• 后端数据验证

039 表单渲染与数据验证(2)

• 创建前端页面

  • 表单渲染

038 表单渲染与数据验证(1)

• 业务需求

  在修改“报销状态”时，需要提供报销相关的信息：

  1. 报销金额

  2. 付款方式

  3. 报销说明

• 任务清单

  1. 添加字段

  2. 定义 schema/validator

  3. 创建前端页面

  4. 后端数据验证与数据变更

037 ajv schema数据验证原理(2)

• 嵌套json对象的schema表达

• 子shema/子表单

036 ajv schema数据验证原理(1)

• 先进行简单的数据验证

  • validator、schema

    • coerceTypes：强制类型转换

• 引入内置keyword：

  • range：[1,100]

• 开发自定义keyword

  • x-range：[1,100]

035 启动项与集群支持

• 启动项配置

  • instance

  • debounce：支持集群

• 启动项开发

  • 系统启动时就执行一次过期检测

  • 顺便演示local.notify

    • bean组件：app模式与ctx模式的区别

    • 获取config对象，需要明确指定命名空间

034 邮件服务配置

• subject/text细节优化

  • 多语言、更多信息

  • 邮件发送演示：网页内容

  • 源码如何索取：添加企业微信获取源码

• 邮件服务配置

  1. 静态配置

     1. 下载邮件模块：npm run cli :store:sync a-mail

  2. 动态配置

• 增加字段：notified

033 发送邮件

• 重构获取业务数据的逻辑

  • ctx.bean.atom.select

• 取得creator作者邮件地址

• 发送邮件

  • ctx.bean.mail.send

032 Schedule定时任务

• 目标：

  • 创建一个定时任务，每天 8 点执行，判断 expenseStatus，如果为 0，并且 updatedAt 超过 7 天，就给 creator 发送一封提醒邮件

• CabloyJS 与 EggJS 的定时任务不同

  • 开发风格不同，与框架定位有关：

    • EggJS：框架的框架

    • CabloyJS：上层业务框架

  • CabloyJS 后端：对 EggJS 进行了：改造、优化、扩展

    • 模块化体系、bean 容器与依赖查找、分布式支持

• 如何读取业务数据

  • ctx.bean.atom.select

  • ctx.model.query

031 自定义指令之细节开发(3)

• 细节调整开发

  • 细节 5: 自定义指令（报销状态）只执行一次

  • 细节 6: 点击按钮时，进行提示

  • 细节 7: 当再次编辑，再次提交之后，报销状态是否还存在

  • 细节 8: 权限调整

    • 普通用户 禁止 编辑/删除

    • 管理员 允许 编辑/删除

030 自定义指令之细节开发(2)

• 细节调整开发

  • 细节 4: 在表单中显示报销状态

029 自定义指令之细节开发(1)

• 考察框架功能强大、开发体验灵活高效

  • 体现在细节

• 开闭原则：

  • 对扩展开放，对修改关闭

• 细节调整开发

  • 细节 1: 显示 flag

  • 细节 2: 显示表格字段

  • 细节 3: 如果是表格，不显示 flag

028 数据指令之自定义指令(2)

• 自定义指令：开发计划

  • 开发后端逻辑

  • 开发前端组件

027 数据指令之自定义指令(1)

• 自定义指令：开发计划

  • 配置数据指令

  • 添加字段

  • 分配初始权限

  • 开发后端逻辑

  • 开发前端组件

• 新知识点如何上手，三个思路：

  1. 查阅官方文档

  2. 研读CabloyJS源码

  3. 参考现有范例

  1. CabloyJS 提供的功能和背后的代码

  2. 测试模块/测试套件

  • 采购订单：test-flow

  • 便签：test-note

  • 宴会：test-party

026 数据指令之内置指令

• 数据指令：跟业务数据相关的操作

• 从逻辑上分类：条目指令、批量指令

• 从实现上分类：内置指令（开箱即用）、自定义指令（二次开发、灵活定制）

• delete 指令逻辑链条：

  • 后端逻辑：routes->controller->service->bean 组件

    ->业务数据 bean 组件: 基类/自身

  • 前端逻辑

• 数据指令的配置

• vue 组件的用途：UI 渲染、包装代码逻辑

025 分级授权

• 分级授权

  • 一级授权演示

  • 二级授权演示

024 数据授权与系统启动项

• 要解决的问题：

  • 谁可以执行数据的哪个指令，以及可以访问的数据范围

• 数据授权途径

  • 动态授权

  • 静态授权

• 静态授权

  • 好处

    • 生产环境的数据无缝初始化、无缝升级

    • 不需要手工去修改数据库

  • 白名单策略

  • update/init的区别

• 系统启动项

  • 与实例无关的启动项

  • 与实例有关的启动项

  • 下载a-version模块，查看实现机制

• 测试授权：test方法

  • 通过单元测试准备测试数据

023 角色树与角色授权

• 要解决的问题：

  • 授权对象：资源、数据
  • 授权主体：角色、公司、部门、岗位、级别，等等

• 方案：角色树

• 角色构建：树型结构扁平化

• 角色权限继承机制

  • 纵向授权

  • 横向授权

• 模版

• 开放认证范围

022 资源与资源授权

• 背景：

  • 前后端分离、对API接口授权要求更高

• 传统方案

  • 直接对API接口路由进行授权

• CabloyJS方案

  • 对资源授权，将API接口路由与资源绑定

• 资源：是可授权实体

• 资源类型：除了功能、菜单等资源，还有更广泛的用途

• 资源：是一种特殊的原子类型

• 资源定义方式

  • 动态添加

  • 静态数据

• 资源授权方式

  • 动态授权

  • 静态授权

• 资源授权的判断方式

  • right全局中间件

  • API方法判断

021 静态数据与审批工作流静态化

• 字段：atomStatic、atomStaticKey、atomRevision

• 定义出差申请静态数据

• 动态创建审批工作流定义

• 审批工作流定义静态化

020 原子数据生命周期

• 原子数据生命周期

  • 草稿、正式、历史

019 atom原子数据crud接口

• atom原子数据

  • 基础表：aAtom

  • 业务表：bzBusinesstrip

• 探索create api的主逻辑

  • 前端->后端->路由->Controller->Service->全局Bean->业务Bean->创建aAtom记录-> 创建bzBusinesstrip记录

• 下载核心模块a-base，重新探索create api的主逻辑

• 课外练习：探索其他api的主逻辑：select/read/write/delete

• 再次体现CabloyJS全栈框架的架构理念：

  • 开箱即用（低代码） + 灵活定制（专业代码）

018 前端组件异步使用

• 页面组件与一般vue组件的区别

• bz-common

  • 创建vue组件

  • 模块内部使用vue组件

• bz-businesstrip

  • 跨模块使用vue组件

• eb-component

  • 延时加载的效果演示

• vue组件的命名空间

017 页面结构与页面打开方式

• mobile布局的页面结构

• pc布局的页面结构

• $view.navigate

  • target: null/_self/_view/_group/_popup

  • 侧边栏面板打开页面

016 前端页面跳转

• 模块内部页面跳转

• 模块之间页面跳转

• 面对新知识的三个思路

  • 进入官方文档学习

  • 参考成熟范例：test-party

  • 学习CabloyJS源码

015 模块前端异步加载策略

• 前置：演示如何升级CabloyJS版本

• 模块前端异步加载演示

  • 新建页面菜单

  • 点击页面菜单，查看异步加载效果

• 分析大型项目异步加载的策略

  1. 全部异步加载： 碎片化严重

  2. 全部同步加载： 体积过大 加载缓慢

  3. 推荐：部分同步、部分异步

• 结论：Vue传统异步加载策略不适合大型项目

• 优化方案：CabloyJS前端提供了更简洁直观的异步加载策略

  1. 模块前端作为一个整体异步加载，避免了碎片化

  2. 页面组件引入的写法是同步写法

  3. 模块前端同步加载方式：模块名称-sync

014 数据模型、多实例与单元测试

• 创建数据表

• 单元测试

• ctx.db

  • 增删改查

• ctx.model

  • 增删改查

• 数据库事务

013 bean容器与依赖查找

• bean容器、依赖查找

• bean组件命名规范

• bean组件分类

• 本地bean

  • 定义、注册、使用

  • 跨模块使用

  • local简写方式

• 全局bean

  • 定义、注册、使用

• 官方文档

  • Bean

012 模块隔离与config配置

• 模块隔离，好处：

  • 不用担心资源冲突

  • 资源定义和使用都非常方便

• 模块后端config

  • 定义、模块内使用、跨模块使用

• 模块前端config

  • 定义、模块内使用、跨模块使用

• 项目config覆盖模块config

• 开发环境：禁用验证码

011 前后端基本流程

• 实现get方式

• controller与service的区别

• 实现post方法

• 创建前端页面

010 Cli终端引擎

• 基于后端服务运行的好处：

  • 开发便利

  • 动态无限扩充

  • 远程使用、便于系统运维

• 使用简便

  • 一个命令：npm run cli

  • 一个选项: --help

• 开放认证Token

• Cabloy商店

  • 下载同步：npm run cli :store:sync

  • 上传发布：npm run cli :store:publish

• 命令的完整名称

  • 命名规范：模块名:组名:命令名

  • 两个便利约定：

    • 模块名为a-clibooster则忽略

    • 组名为default则忽略

• Cli终端引擎文档

009 npm脚本命令

• 三类

  • 后端相关

  • 前端相关

  • 工具类

  • Cli引擎

008 模块目录结构

• package.json

• build

  • 模块后端代码构建、最小化

  • 模块前端代码构建、最小化

• backend

• front

007 项目目录结构

• 主体代码文件

  • package.json

  • src

    • backend

    • front

    • module/module-vendor

    • suite/suite-vendor

• 辅助工具文件

  • .vscode

  • build

  • docker-compose

  • cabloy.json

006 可以开发哪些类型的项目

前后端分离，全场景跨端开发

通过前后端分离的架构设计，可以支持全场景跨端业务的快速开发

场景	前端	后端
PC：Web	CabloyJS 前端	CabloyJS 后端
PC：Exe	CabloyJS 前端 + Electron	CabloyJS 后端
Mobile：IOS	CabloyJS 前端 + Cordova	CabloyJS 后端
Mobile：Android	CabloyJS 前端 + Cordova	CabloyJS 后端
微信公众号	CabloyJS 前端 + 微信 API	CabloyJS 后端
企业微信	CabloyJS 前端 + 企业微信 API	CabloyJS 后端
钉钉	CabloyJS 前端 + 钉钉 API	CabloyJS 后端
小程序：微信、支付宝等	Uni-app + CabloyJS 前端 SDK	CabloyJS 后端

• 后端：由于完整的前后端分离设计，只需开发一套 CabloyJS 后端代码即可
• 前端：所有可基于 H5 的场景，只需开发一套 CabloyJS 前端代码即可
• 小程序：提供 CabloyJS 前端 SDK 让 Uni-app 可以轻松对接 CabloyJS 后端代码

CabloyJS可以开发什么系统

1. 可以开发多租户SAAS业务系统
2. 可以开发前后端分离的后台业务管理系统，如OA、CRM、ERP、电商，等等
3. 可以开发JAMStack架构的CMS内容管理系统，支持SEO优化，如博客、技术文档、社区、知识店铺，等等
4. 既可以先开发后台业务管理系统，再延伸开发CMS内容管理系统；也可以反过来，先开发CMS内容管理系统，再延伸开发后台业务管理系统
5. 可以通过Cordova开发各类App应用，支持IOS、Android
6. 可以通过Electron开发桌面应用
7. 可以开发微信公众号、企业微信、钉钉，等第三方平台的应用，解决信息孤岛的问题
8. 可以为Uniapp小程序开发后端API接口

CabloyJS开发的正式系统

网站类型	网站链接
后台管理系统（PC布局）	https://portal.cabloy.com
后台管理系统（Mobile布局）
博客	https://zhennann.com
技术文档（英文）	https://cabloy.com/index.html
技术文档（中文）	https://cabloy.com/zh-cn/index.html
社区（英文）	https://community.cabloy.com/index.html
社区（中文）	https://community.cabloy.com/zh-cn/index.html
课程（英文）	https://course.cabloy.com/index.html
课程（中文）	https://course.cabloy.com/zh-cn/index.html
Cabloy商店（英文）	https://store.cabloy.com/index.html
Cabloy商店（中文）	https://store.cabloy.com/zh-cn/index.html

005 功能特性

1. 文档速览

   1. 玲琅满目

   2. 罄竹难书

   3. 文档：https://cabloy.com/

2. 架构图

   • https://cabloy.com/zh-cn/articles/a3989fa7e88f45919cfaa5442ffd2c62.html

3. 功能特性

   1. 模块化体系

   2. 应对大型项目的三驾马车

      1. 模块化、套件、应用

      2. 应用：是菜单页面、首页页面、我的页面的组合

   3. 前后端分离：

      1. 意义：同一个后端可以服务多个前端环境：

         1. web

         2. H5

         3. 小程序

   4. 多实例

      1. 为什么可以称之为paas平台，因为可以非常方便的开发saas多租户应用

   5. 分布式：

      1. 队列、广播、定时任务、缓存

      2. 集群部署

   6. 多语言：内置英语、中文

   7. pc=mobile+pad自适应布局：

      1. pc布局：弹出式

      2. pc布局：展开式

      3. mobile布局：

   8. 工作流引擎：

      1. 开箱即用、灵活定制

      2. 审批工作流：只是通用工作流引擎的一个面向具体业务场景的应用

004 新建业务表单+审批工作流

1. 新建业务模块

   1. 模块名称

   2. cli指令

2. 演示

3. 审批工作流

003 CMS增删改查与审批工作流

• 页面布局：头部按钮、状态栏、左边栏、右边栏

• CMS：

  • 增删改查

  • 审批工作流

  • 星标、紧急、重要

  • 草稿与正式数据是不同的副本

• mobile端演示

  • 一套代码同时适配mobile端和pc端

002 新建项目

• 依照官方文档的说明创建项目，参见：快速开始

001 课程介绍

• 课程起源：

  • 2016

  • 2019 v3

  • 2022 v4

    • 60万代码，12000提交

• 手稿：

  • 社区：https://community.cabloy.com/

• 企业微信、不定期直播

• CabloyJS是什么框架

  • NodeJS全栈框架
  • 面向开发者的低代码开发平台
  • 面向开发者的pass开发平台
    • 开箱即用
    • 灵活定制
  • 延伸阅读：低代码平台辨析，及CabloyJS的低代码策略

• 技术栈：

  • 语言：javascript

  • 后端：koa2、egg2

  • 前端：vue2

  • UI组件库：framework7

  • 数据库：mysql

  • 分布式：redis

  • 表格组件：antdv table

  • Markdown可视化编辑组件：prose mirror

  • 工作流引擎：自研

• 如何学习CabloyJS

  • 困惑：大量功能特性、大量技术知识点

  • 方向：

    • 从开箱即用入手，熟悉CabloyJS开发项目的流程，以及开发风格

    • 通过大量编程线索、代码范例、最佳实践，逐步掌握CabloyJS二次开发的更多工具和技巧

• 学习课程意义

  • 网友反馈说：CabloyJS是一款教科书级的框架

  • 新手：学习NodeJS全栈开发方方面面的知识，达到精通全栈开发的效果

  • 高手：借鉴新思路、新解法

  • CabloyJS本身就是一款成熟的全栈框架，可以直接用于实际项目的开发