| 目录 |
|---|
...
DWF体系结构
DWF采用前后端分离的架构，前端使用Tomcat服务器安装了3个war包，后端启动了3个Jar包形成的进程。
...
第二、DWF编码工程围绕这6个服务展开，包括3个前端的Web应用和3个后端的SpringBoot应用，再加一些共享程序和辅助功能。
接下来，逐步建立前端开发环境和后端开发环境。
...
获取源代码
在产品下载页面产品下载页面（如有需要联系DWF管理员），有一套完整的源代码压缩包，下载以后解压即可。文件存储列表如下：
文件夹简要介绍如下：
| 分类 | 名称 | 语言 | 功能 |
|---|---|---|---|
| 样例代码 | 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分支。 |
...
建立前端开发环境
...
（一）下载开发环境
下载Visual Studio Code和node并安装：
...
Node：https://nodejs.org/zh-cn/download/
...
（二）安装依赖
分别进入app-web、modeler-web、monitor-web三个前端工程，打开命令行窗口输入npm install：
| 代码块 | ||||
|---|---|---|---|---|
| ||||
cd modeler-web npm install |
...
（三）前端文件结构
DWF源代码的modeler-web、app-web两个工程针对建模工具和应用框架，两个工程的src/ext_components下为插件前端文件，在此文件下对应的模块新增vue文件，即默认为在对应模块下新增对应的插件入口文件。
...
在工程目录下使用命令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 // 视图文件夹 |
...
（四）修改服务连接
为连接后台restful api服务器，用VS.Code打开源代码目录，找到src/views/Global.vue修改指向服务的地址。
...
（五）启动调试服务
通过命令行进入相关的前端工程，输入npm run dev启动模拟web服务器。
...
进入调试准备状态，会提示一个链接地址，拷贝到浏览器地址栏，用浏览器调试工具调试代码。
对代码发生的任何修改，虚拟服务会自动更新。
...
建立后端开发环境
...
（一）下载开发环境
后端开发环境使用的是IDEA，下载链接如下
https://www.jetbrains.com/idea/
...
（二）导入代码
１.用IDEA点击Import Project，选择DWF3.0工程的目录。
...
上述过程由于需要从网上下载依赖的镜像，默认情况下会在国外的maven镜像服务器下载所以会持续一段时间，如果发现速度十分缓慢可以将镜像服务器的位置设定在国内的服务器上。例如：阿里云的镜像配置方法
...
（三）后端工程目录结构
目录名称 | 相对路径 | 主要用途 | 英文名称（IDEA） |
源码目录 | src/main/java | 放置源码 | Source Folders |
资源目录 | src/main/resources | 放置配置文件、静态资源 | Resource Folders |
测试目录 | src/test/java | 放置单元测试类 | Test Source Folders |
编译输出 | target | 编译结果的输出目录 | Build Output Folders |
...
（四）配置调试环境
为dwf-app和dwf-modeler分别添加调试配置项。
...
５.如下图所示，在dwf-app的MyApp上右键，点击Debug ‘dwf-app’，启动后端调试用的restful api。
...
（五）添加本地配置文件
在多人协同开发环境，每人的开发环境配置可能不同（比如使用了不同的开发数据库），可能会导致配置互相误覆盖的问题。解决方式是使用一个高优先级的“透明”配置文件，这个“透明”配置文件不会传到 git 上，只在本地使用。
...
| 信息 | ||
|---|---|---|
| ||
配置数据库连接的时候尤其需要注意：PG的数据库服务器是否已经配置允许外部链接，如果出现无法连接的情况，则需要修改pg_hba.conf文件，重启PG允许远程链接。 一般位置：/etc/postgre/10/main/pg_hba.conf |
...
（六）发布开发成果
在下载的源代码文件夹scripts文件夹，提供了一键打包的自动化脚本：deploy-ci.sh，执行下面的代码：
...
| 信息 |
|---|
由于deploy-ci.sh是一个linux脚本，所以建议将代码下载到DWF服务器上。 |
...
小结
这一讲，主要介绍了DWF的工程目录，前后端开发环境的搭建方法，下一讲，将围绕前端的扩展进行介绍。
...
...