1 概述

本章将介绍如何使用Visual Studio Code建立一个基于DWF SDK的全栈开发环境，包括：前端VUE开发，后端SpringBoot开发以及独立的数据库。

2 配置基础开发环境

使用DWF SDK之前，需要安装基础组件如下

1. Python v3.8.2：https://www.python.org/downloads/
   1. 安装后记得在命令提示符中运行pip，即运行pip3 install pyyaml安装yaml的扩展包。

1. JDK v11：https://www.oracle.com/java/technologies/javase-jdk11-downloads.html
   1. 安装完成之后，需要在系统中明确设置JAVA_PATH环境变量，指向JDK的位置，注意！不要指向JRE所在文件夹的位置。
2. Maven v3.6.3：https://maven.apache.org/download.cgi
   1. 安装完成之后，需要在path中设置maven的bin目录
3. Node v12.16.1：https://nodejs.org/zh-cn/download/
   1. 现在看node最省心，不要额外设置什么
4. Git：https://git-scm.com/downloads
   1. 方便是进行版本控制

开发环境使用VS.Code

1.  VS.Code：https://code.visualstudio.com/download，安装完成后需要在VS.Code中下载如下3个扩展包，用于帮助开发调试：
   
   1. Java Extension Pack：用于进行JAVA程序的调试
   2. Spring Boot Extension Pack：进行DWF后端SpringBoot工程的调试
   3. Vue VS Code Extension Pack：用于进行前端代码调试

如果希望在一台机器上使用数据库则还需要安装一个PostgreSQL

1. PostgreSQL 10：https://www.postgresql.org/download/
   1. 安装以后将PG安装路径下的bin目录添加到path环境变量中

最后，别忘了安装一个Chrome浏览器用于调试。

2  获取并展开SDK

获取DWF SDK的方法非常简单，打开建模工具，进入模型管理\代码装配界面，点击界面的右上角“下载”按钮，即可获得和当前DWF实例配套的SDK

图-直接获取DWF SDK

SDK解压以后看到的目录结构如下图所示

注：如果安装的DWF不具备代码装配能力，SDK需要从DWF小组获得

2.1 SDK的核心代码目录结构

　　文件夹简要介绍如下：

2.2 扩展代码目录结构

在代码包统一存放在dwf-part-all中，每一个代码包有一个独立的子文件夹，内部包含模型：part-model，前端：part-web, 后端：part-svc三个子文件夹，详细的代码结构在下一章介绍。

3 初始化本地数据库

如果存在数据库服务器也希望在一起调试的情况，就需要在本地初始化一个空白的DWF数据库，在DWF SDK的scripts文件夹里已经提供了用于初始化数据库的脚本，具体位置如下：

scripts\db-backup\db-pure.sql

用户只需要在安装完成PostgresSQL服务器后，启动PG自带的pgAdmin服务，以postgres的名义建立一个名为dataway的空数据库。

图-建立空白的dataway数据库

数据库创建完毕后，在VS.Code中新建或者选择一个命令行窗口，执行如下命令，初始化数据库：

psql -U postgres -d dataway -f scripts\db-backup\db-pure.sql

即可完成数据库的初始化工作，如下图所示

4  建立后端开发环境

4.1 启动后端并编译

SDK解压之后，直接在vs.code里打开终端，进入scripts文件夹，启动codeAssemblyScripts.sh，即可启动自动编译生成依赖的工作，此时会自动安装本地包，并且让maven根据pom.xml安装依赖包并且编译。

cd scripts
./codeAssemblyScripts.sh

在codeAssemblyScripts.sh执行完毕以后，如果希望仅仅调试dwf-app或者dwf-modeler，则进入目录下运行mvn clean install即可。

    <mirror>
      <id>nexus-aliyun</id>
      <mirrorOf>central</mirrorOf>
      <name>Nexus aliyun</name>
      <url>http://maven.aliyun.com/nexus/content/groups/public</url>
    </mirror>

4.2 修改默认数据库连接

如果调试后端指向的数据库不是在本地，那么可以在dwf-app\src\main\resources\application.properties中修改连接配置，举例如下：

数据库连接配置

同理，在dwf-modeler\src\main\resources\application.properties也可以修改数据库连接的配置。

4.3 进行后端调试

使用VS.Code的Spring boot扩展插件可以对后端进行调试，在VS.Code中找到

• dwf-app\src\main\java\edu\thss\MyApp.java
• dwf-modeler\src\main\java\edu\thss\MyApp.java

如果正确的将依赖通过maven安装后，VS.Code会自动扫描入口并给出代码提示是否运行或者调试，如下图所示：

图-在VS.Code中启动调试

调试如果正确，则可以通过浏览器打开后端restful api的swagger直接看到后端接口的描述，访问的地址是：

建模服务：http://localhost:9090/swagger-ui.html

对象服务：http://localhost:6060/swagger-ui.html

图-调试启动后端restful api服务

5  建立前端开发环境

5.1  安装依赖

对于前端依赖的安装，只需在VS.Code中打开DWF3.0目录，新建命令行终端分别进入app-web、modeler-web前端工程，打开命令行窗口输入npm install：

图-打开DWF 3.0文件夹

图-在VS.Code中安装前端依赖，（以app-web为例）：

2.2  前端文件结构

DWF源代码的modeler-web、app-web两个工程针对建模工具和应用框架。前端文件可以调用src/api文件夹下定义好的restful api函数，也可调用模块传入的store对象，也可调用util下定义的公用函数包，也可调用styles文件夹下定义的less样式文件。

在VS.Code中打开DWF3.0目录，新建命令行终端，进入工程目录下使用命令npm run dev，即可构建调试服务器，进行热更新调试。使用命令npm run build，即可在工程目录的dist文件夹下生成可部署到web服务器的编译后代码。

前端文件夹结构如下：

5.3  启动调试服务

通过命令行进入相关的前端工程，输入npm run dev启动模拟web服务器。

进入调试准备状态，会提示一个链接地址，拷贝到浏览器地址栏，用浏览器调试工具调试代码。

图-调试启动前端工程

对代码发生的任何修改，虚拟服务会自动更新。

6  小结

这一讲，主要介绍了DWF的工程目录，前后端开发环境的搭建方法，下一讲，将围绕前端的扩展进行介绍。