介绍
前后端分离团队成员分别擅长前端或者后端,因此分别负责开发业务模块的前端代码或者后端代码。那么,这时候我们就可以基于CabloyJS项目前后端分离的架构特点,进行分工合作
场景
假如我们有一个项目cabloy-demo
,可以将业务所涉及的前端界面和后端逻辑拆分为两个业务模块,分别是demo-modulea
和demo-moduleb
,分别由成员A
开发两个模块的前端,由成员B
开发两个模块的后端,最后由成员C
部署
成员 | 任务 |
---|---|
成员A | 开发两个模块的前端 |
成员B | 开发两个模块的后端 |
成员C | 部署 |
代码分割
1. 创建项目
-
选项1:由任何成员创建一个项目骨架(项目名称为cabloy-demo),然后分发给其他成员
-
选项2:成员独立创建项目骨架
- 1$ npm init cabloy cabloy-demo
- 参见:快速开始(项目模式)
2. 创建模块
-
选项1:由任何成员创建一个业务模块的骨架,然后分发给其他成员
-
选项2:成员独立创建业务模块骨架
- 1$ npm run cli :create:module demo-modulea -- --template=module-business --suite=
- 参见:模块化体系与新建模块
成果分享
1. 成员A与成员B
成员A
与成员B
之间不需要分享成果输出
2. 成员A与成员C
成员A
需要把前端成果分享给成员C
在终端执行release:front
命令,将demo-modulea
和demo-moduleb
前端代码编译打包,并将输出成果分享给成员C
- 1$ npm run release:front demo-modulea demo-moduleb
- 关于如何分享,以及release:front命令的说明,请参见:终端命令-团队开发相关
2. 成员B与成员C
成员B
需要把后端成果分享给成员C
在终端执行release:backend
命令,将demo-modulea
和demo-moduleb
后端代码编译打包,并将输出成果分享给成员C
- 1$ npm run release:backend demo-modulea demo-moduleb
- 关于如何分享,以及release:backend命令的说明,请参见:终端命令-团队开发相关
代码调试
1. 成员A:前端调试
- 选项1:可以在本地模块的后端代码中
mock数据
,并提供伪代码
,从而配合前端代码的调试 - 选项2:前端可以直接访问后端的开发服务,进行项目联调
比如,有如下场景:
成员 | 主机IP | 前端/后端开发端口 |
---|---|---|
成员A | 192.168.1.101 | 9092 |
成员B | 192.168.1.102 | 7002 |
那么,只需在成员A
的项目前端进行如下配置即可:
{project}/build/config.js
- 1// front
- 2const front = {
- 3 dev: {
- 4 hostname: '192.168.1.101',
- 5 port: 9092,
- 6 proxyBaseURL: 'http://192.168.1.102:7002', // 后端开发服务
- 7 },
- 8};
2. 成员B:后端调试
- 选项1:后端强烈建议基于
测试驱动
开发。测试驱动
开发,可以有效沉淀开发成果,当代码出现变更时也能尽快锁定潜在问题,从而显著提升代码的鲁棒性- 参见:测试驱动
- 选项2:后端可以直接访问前端页面,进行项目联调。如前所述场景,前端页面地址就是:
http://192.168.1.101:9092
项目部署
成员A
和成员B
把各自的业务模块编译打包之后,分别分享给成员C
,成员C
进行常规的部署工作
- 参见:项目部署-构建与运行
评论: