企业微信

健哥的企业微信

课程源码

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

课程视频

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本身就是一款成熟的全栈框架,可以直接用于实际项目的开发