1 DWF体系结构
DWF采用前后端分离的架构，前端使用Tomcat服务器安装了3个war包，后端启动了3个Jar包形成的进程。
第一、前端代码与后端代码调试无关，前端调试时不需建立后端开发环境，反之亦然。为保证数据有效的访问，建议保持一个独立运行的DWF实例。
第二、DWF编码工程围绕这6个服务展开，包括3个前端的Web应用和3个后端的SpringBoot应用，再加一些共享程序和辅助功能。
接下来，逐步建立前端开发环境和后端开发环境。
2 获取源代码
在产品下载页面，有一套完整的源代码压缩包，下载以后解压即可。文件存储列表如下：
文件夹简要介绍如下：
| 分类 | 名称 | 语言 | 功能 |
|---|---|---|---|
| 样例代码 | addinDemo | JS+Java | 关于插件的例程 |
| 前端工程 | app-web | JavaScript | 应用前端app-web的工程，构建后产生app-web的war包，可以部署在tomcat服务器或者其它web服务器 |
| modeler-web | JavaScript | 建模工具modeler-web的工程，构建后产生modeler-web的war包，可以部署在tomcat服务器或者其它web服务器 | |
| monitor-web | JavaScript | 监控工具monitor-web的工程，构建后产生monitor-web的war包，可以部署在tomcat服务器或者其它web服务器 | |
| 后端工程 | dwf-app | Java | 支持应用前端的jar包，构建后产生app.jar，通过java 启动，发布对象访问的restful api |
| dwf-modeler | Java | 支持建模工具的jar包，构建后产生modeler.jar，通过java 启动，发布模型服务的restful api | |
| dwf-monitor | Java | 支持监控工具的jar包，构建后产生monitor.jar，通过java启动，发布监控服务的restful api | |
dwf-common | Java | 所有对外服务的公共代码 | |
| 扩展工程 | dwf-app-ext | Java | 可用于扩展app端restful api的实现 |
| dwf-modeler-ext | Java | 扩展modeler端的restful api的实现 | |
| dwf-monitor-ext | Java | 扩展monitor端的restful api的实现 | |
| dwf-common-ext | Java | 扩展公共部分后端代码的实现 |
对DWF开发小组成员，可以直接通过GIT从DWF的GITHUB网站获得源代码：https://github.com/thulab/DWF3.0。代码放在dev分支，新版本测试通过后会合并到master分支。
3 建立前端开发环境
3.1 下载开发环境
下载Visual Studio Code和node并安装：
VS.Code：https://code.visualstudio.com/download
Node：https://nodejs.org/zh-cn/download/
3.2 安装依赖
分别进入app-web、modeler-web、monitor-web三个前端工程，打开命令行窗口输入npm install：
cd modeler-web npm install
3.3 前端文件结构
DWF源代码的modeler-web、app-web两个工程针对建模工具和应用框架，两个工程的src/ext_components下为插件前端文件，在此文件下对应的模块新增vue文件，即默认为在对应模块下新增对应的插件入口文件。
前端文件可以调用src/api文件夹下定义好的restful api函数，也可调用模块传入的store对象，也可调用util下定义的公用函数包，也可调用styles文件夹下定义的less样式文件。
在工程目录下使用命令npm run dev，即可构建调试服务器，进行热更新调试。使用命令npm run build，即可在工程目录的dist文件夹下生成可部署到web服务器的编译后代码。文件夹结构如下：
modeler-web/app-web --dist // 部署文件夹 --src // 源码文件夹 ----api // restful api 文件夹 ----ext_components // 插件前端文件夹 ------form // 表单引擎插件文件夹 ------operation // 功能引擎插件文件夹 ------... // 其他模块插件文件夹 ----util // 公用函数包 ----store // vuex的store对象文件夹 ----views // 视图文件夹 |
3.4 修改服务连接
为连接后台restful api服务器，用VS.Code打开源代码目录，找到src/views/Global.vue修改指向服务的地址。
3.5 启动调试服务
通过命令行进入相关的前端工程，输入npm run dev启动模拟web服务器。
cd modeler-web npm run dev
进入调试准备状态，会提示一个链接地址，拷贝到浏览器地址栏，用浏览器调试工具调试代码。
对代码发生的任何修改，虚拟服务会自动更新。
4 建立后端开发环境
4.1 下载开发环境
后端开发环境使用的是IDEA，下载链接如下
https://www.jetbrains.com/idea/
4.2 导入代码
１.用IDEA点击Import Project，选择DWF3.0工程的目录。
２.在弹出的对话框，选择Maven方式导入，在接下来的对话框，用“无脑”状态点击Next即可完成源代码导入。
３.导入后看到项目结构如下：
高亮的模块是后端Maven工程，有”ext”后缀的是二次开发工程：
１. dwf-app-ext : dwf-app工程的二次开发工程。
２.dwf-modeler-ext : dwf-modeler工程的二次开发工程。
３.dwf-common-ext : dwf-common工程的二次开发工程。
进入 dwf-common\lib 目录，执行如下命令，导入外部lib包，同时自动引入外部引用：
mvn install:install-file -Dfile=iotdb-jdbc-0.9.0.jar -DgroupId=org.apache.iotdb -DartifactId=iotdb-jdbc -Dversion=0.9.0 -Dpackaging=jar mvn install:install-file -Dfile=tsfile-0.9.0.jar -DgroupId=org.apache.iotdb -DartifactId=tsfile -Dversion=0.9.0 -Dpackaging=jar cd .. mvn clean install
上述过程由于需要从网上下载依赖的镜像，默认情况下会在国外的maven镜像服务器下载所以会持续一段时间，如果发现速度十分缓慢可以将镜像服务器的位置设定在国内的服务器上。例如：阿里云的镜像配置方法
4.3 后端工程目录结构
目录名称 | 相对路径 | 主要用途 | 英文名称（IDEA） |
源码目录 | src/main/java | 放置源码 | Source Folders |
资源目录 | src/main/resources | 放置配置文件、静态资源 | Resource Folders |
测试目录 | src/test/java | 放置单元测试类 | Test Source Folders |
编译输出 | target | 编译结果的输出目录 | Build Output Folders |
4.4 配置调试环境
为dwf-app和dwf-modeler分别添加调试配置项。
１.点击下列菜单项。
２.在弹出的对话框配置dwf-app的启动方式，设置端口为9090（参数：--server.port=9090）。
３.点击上面的小按钮，复制一份新的配置。在弹出的对话框配置dwf-modeler的启动方式，设置端口为6060（参数：--server.port=6060）
４.如下图所示，在dwf-modeler中的MyApp上右键，点击Debug ‘dwf-modeler’，启动后端调试用的restful api。
５.如下图所示，在dwf-app的MyApp上右键，点击Debug ‘dwf-app’，启动后端调试用的restful api。
4.5 添加本地配置文件
在多人协同开发环境，每人的开发环境配置可能不同（比如使用了不同的开发数据库），可能会导致配置互相误覆盖的问题。解决方式是使用一个高优先级的“透明”配置文件，这个“透明”配置文件不会传到 git 上，只在本地使用。
在 dwf-common\src\main\resources 下创建config目录，并创建文件application.properties。
dwf-common\src\main\resources\config\application.properties 将被 git ignore, 并且此文件的配置优先级高于dwf-common\src\main\resources\applications.properties。
application.properties举例如下：
# 你自己的开发环境数据库配置
datasource.ip=127.0.0.1
datasource.port=5432
datasource.database=dwf
spring.datasource.url=jdbc:postgresql://${datasource.ip}:${datasource.port}/${datasource.database}?autosave=conservative
spring.datasource.username=postgres
pring.datasource.password=123456
数据库连接配置
配置数据库连接的时候尤其需要注意：PG的数据库服务器是否已经配置允许外部链接，如果出现无法连接的情况，则需要修改pg_hba.conf文件，重启PG允许远程链接。
一般位置：/etc/postgre/10/main/pg_hba.conf
5 发布开发成果
在下载的源代码文件夹scripts文件夹，提供了一键打包的自动化脚本：deploy-ci.sh，执行下面的代码：
chmod 777 ./scripts/deploy-ci.sh ./scripts/deploy-ci.sh RELEASE /home/dwf3.0-release
执行完毕后，分别产生前端monitor-web/modeler-web/app-web的war包放入web文件夹中，并将monitor.jar，modeler.jar和app.jar放到指定文件夹。
如要自行构架可持续发布的服务器，也可使用deploy-ci.sh实现，命令如下：
chmod 777 ./scripts/deploy-ci.sh ./scripts/deploy-ci.sh DEPLOY /home/dwf/dwf3.0-deploy /opt/apache-tomcat-8.5.34
按照安装说明重新部署系统即可：系统安装手册
由于deploy-ci.sh是一个linux脚本，所以建议将代码下载到DWF服务器上。
6 小结
这一讲，主要介绍了DWF的工程目录，前后端开发环境的搭建方法，下一讲，将围绕前端的扩展进行介绍。