前置说明

在进行后续的开发之前,请确保已经创建了一个CabloyJS项目,在这里我们假定创建的项目名称为:cabloy-demo

如何创建项目:快速开始

业务模块名称

CabloyJS采用模块化体系设计,所有的后端业务逻辑和前端页面都是以具体业务为单位,划分在不同的模块中。模块化体系是开发大型业务系统的基石。因此,我们首先要创建一个业务模块:bz-businesstrip

我们开发的业务模块不仅可以在团队内部使用,也可以发布到社区。为了确保模块名称全局唯一,模块名称分为两段:{providerId}-{moduleName}

名称 说明 举例
providerId 提供者Id 比如,公司名称是秉烛科技,可以设置为bz
moduleName 模块名称 能清晰说明模块的业务性质即可,比如这里的businesstrip就是要开发与出差申请相关的业务

创建业务模块

进入项目所在目录,执行脚手架命令

  1. 1# 进入项目所在目录
  2. 2$ cd cabloy-demo
  3. 3# 如果是 npm v6
  4. 4$ npm init cabloy src/module/bz-businesstrip --type=module-business
  5. 5# 如果是 npm >= v7
  6. 6$ npm init cabloy src/module/bz-businesstrip -- --type=module-business

如果网速慢,可以使用淘宝镜像:

  1. 1# 如果是 npm v6
  2. 2$ npm init cabloy src/module/bz-businesstrip --type=module-business --registry=https://registry.npmmirror.com
  3. 3# 如果是 npm >= v7
  4. 4$ npm init cabloy src/module/bz-businesstrip -- --type=module-business --registry=https://registry.npmmirror.com

重启服务

我们需要重启服务,让系统加载新建的业务模块

  1. 1## 后端服务
  2. 2$ npm run dev:backend
  3. 3## 前端服务
  4. 4$ npm run dev:front

效果

当业务模块创建完毕,我们就已经具备了以下功能:

  1. 实现了出差申请(Businesstrip)增、删、改、查、搜索等功能,并分配了初始权限

  2. 支持用户星标用户标签功能,方便用户对数据的个性化管理

  3. 增加了新建BusinesstripBusinesstrip列表两个菜单项,并分配了初始权限

  4. 实现了业务列表页面:pc和pad显示表格布局,mobile显示列表布局

  5. 实现了业务表单页面:只读模式、编辑模式

修改原子类型标题

在CabloyJS中,业务数据都是通过原子类型来管理的,比如这里的出差申请,其原子类型就是businesstrip,定义在文件src/module/bz-businesstrip/backend/src/meta.js

  1. 1 // meta
  2. 2 const meta = {
  3. 3 base: {
  4. 4 atoms: {
  5. 5 businesstrip: {
  6. 6 info: {
  7. 7 bean: 'businesstrip',
  8. 8 title: 'Businesstrip',
  9. 9 ...
  10. 10 },
  11. 11 },
  12. 12 },
  13. 13 },
  14. 14 };

我们需要把原子类型的title修改为中文。按一般的理解,可以直接把Businesstrip修改为出差申请。但为了支持语言国际化,不需要修改这里的配置,而是直接提供不同的语言资源即可,系统会自动检索对应的语言资源。比如,为Businesstrip提供中文和英文两种语言资源,可以这样操作:

1. 中文

src/module/bz-businesstrip/backend/src/config/locale/zh-cn.js

  1. 1module.exports = {
  2. 2+ Businesstrip: '出差申请',
  3. 3 'Create Businesstrip': '新建Businesstrip',
  4. 4 'Businesstrip List': 'Businesstrip列表',
  5. 5};

2. 英文

src/module/bz-businesstrip/backend/src/config/locale/en-us.js

  1. 1module.exports = {
  2. 2+ Businesstrip: 'Business Trip',
  3. 3};

CabloyJS在前端和后端都提供了便利好用的语言国际化机制。我们在开发任何业务模块时,首先使用英文,然后提供其他语言资源,这让我们的业务开发从一开始就具备国际化的视野和格局

更详细说明,请参见:后端i18n前端i18n

修改菜单名称

由于自动生成的菜单名称是英文,可以通过以下步骤进行修改

1. 修改语言资源

src/module/bz-businesstrip/backend/src/config/locale/zh-cn.js

  1. 1module.exports = {
  2. 2- 'Create Businesstrip': '新建Businesstrip',
  3. 3+ 'Create Businesstrip': '新建出差申请',
  4. 4- 'Businesstrip List': 'Businesstrip列表',
  5. 5+ 'Businesstrip List': '出差申请清单',
  6. 6};

2. 修改菜单资源版本号

src/module/bz-businesstrip/backend/src/config/static/resources.js

  1. 1module.exports = app => {
  2. 2 const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3 const resources = [
  4. 4 // menu
  5. 5 {
  6. 6 atomName: 'Create Businesstrip',
  7. 7 ...
  8. 8- atomRevision: 0,
  9. 9+ atomRevision: 1,
  10. 10 ...
  11. 11 },
  12. 12 {
  13. 13 atomName: 'Businesstrip List',
  14. 14 ...
  15. 15- atomRevision: 0,
  16. 16+ atomRevision: 1,
  17. 17 ...
  18. 18 },
  19. 19 ];
  20. 20 return resources;
  21. 21};
  • 将两个菜单资源的atomRevision递增

  • 我们不需要重启服务,后端服务会自动检测到更新,并使修改后的语言资源自动生效

下一步

接下来,我们看看如何向业务数据Businesstrip添加字段

延伸阅读