企业微信

健哥的企业微信

课程源码

  • 请添加健哥的企业微信索取

课程视频

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

    • 定义、注册、使用
  • 官方文档

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://admin.cabloy.com
后台管理系统(Mobile布局) cabloy-admin-qrcode
博客 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. 架构图

  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 课程介绍

健哥的企业微信

  • CabloyJS是什么框架

  • 技术栈:

    • 语言:javascript

    • 后端:koa2、egg2

    • 前端:vue2

    • UI组件库:framework7

    • 数据库:mysql

    • 分布式:redis

    • 表格组件:antdv table

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

    • 工作流引擎:自研

  • 如何学习CabloyJS

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

    • 方向:

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

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

  • 学习课程意义

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

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

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

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