不会前端没事，用GWT Boot和Spring Boot构建Web程序

刺骨的言语ヽ痛彻心扉 2024-03-26 13:19 60阅读 0赞

本文介绍了一种使用Java构建Web应用程序的方式，其中GWT或者J2CL是必不可少的，另外还有多个UI框架可以配套使用，比如[Domino UI][]、[VueGWT][]、[GWT Material Design (GMD)][GWT Material Design _GMD]，[React4J][]、[WebFX][]，还有一些活跃低的框架[GWTBootstrap3][]、[RedHat PatternFly for Java][]

开始之前先看下LOVE（Learn Once Vse Everywhere） 架构。

![LOVE架构][LOVE]

1、Spring Boot Server： 提供服务端  
2、Shared： 提供公共的API、接口、验证类或实体类等  
3、Client： GWT Boot 是GWT的等效框架，就如同Spring Boot 和 Spring Framework

## 创建Spring Boot后端服务 ##

使用Spring Initializr 创建Spring Boot项目。建立如下文件：  
PersonController、PersonService、PersonRepository、Person实体

![后端服务][b7042155d7248c16e09b03c9df426da9.png]

> 源码地址：  
> https://github.com/gwtboot/intro-gwtboot-springboot/tree/main/intro-gwtboot-springboot-server

## 创建共享模块 ##

共享服务，用于客户端和后端服务之间共享API、验证、异常类等，这里可以自己决定哪些类要共享。

![共享的类、枚举和接口][17af759540af8da3192cea0465d8ae7d.png]

由于GWT Boot 客户端需要使用源码编译成JavaScript，共享模块要使用`Maven Source plugin`导出共享模块源码包。

![打包处理的共享模块][b75e1aaef04ce200e1737cb98be90fcd.png]

分离出共享模块后，将它作为依赖项添加到后端服务中。

![b429f75af1b36361f8af132f156fe10c.png][]

另外我们创建一个`“Module”.gwt.xml`文件，用来转换共享模块的源代码，该文件声明了要转换的包目录，在该例中是`shared`包下的所有Java文件。

![Person.gwt.xml][]

## GWT Boot 客户端 ##

这一部分是最有趣的部分，这里我们将使用`DominoUI`作为前端创建客户端。  
使用GWT Boot Maven Archetype创建：

mvn archetype:generate -DarchetypeGroupId=com.github.gwtboot \
                           -DarchetypeArtifactId=gwt-boot-ui-domino-dagger2-archetype \
                           -DarchetypeVersion=1.0.0 \
                           -DgroupId=com.company.crm \
                           -DartifactId=intro-gwtboot-springboot-client \
                           -Dversion=1.0.0-SNAPSHOT

生成的是一个Todo List 的应用程序，可以直接运行。

![运行DominoUI][DominoUI]

现在将上面创建的`共享模块依赖和源码`添加到该客户端模块中。

![jar包和源码][jar]

随后在客户端模块`module.gwt.xml`中添加`Person.gwt.xml`文件

![4f68cb2df8790e0b11fda28e94f1b315.png][]

GWT Maven plugin 根据`module.gwt.xml`创建真正的GMT 模块 `App.gwt.xml`

![cd23eb6a7cda345bc4693bf38e3be4bd.png][]

后面，我们开始对页面进行布局，将创建如下样式页面：

![e6233b138d03c3e37fce02f00dad88e9.png][]

## Web 布局 ##

默认的DominoUI布局有：导航栏-1、2、3，左侧面板-4，中间面板-5，隐藏页脚-6和隐藏右侧面板。

![DominoUI标准布局][DominoUI 1]

可以使用removeLeftPanel方法删除左侧面板。

Layout layout = Layout.create(CONSTANTS.appTitle()).removeLeftPanel()
        .show(Theme.BLUE);

现在考虑一下我们应该怎么用DominoUI来实现如下布局

![7ea5adf3ea854fb3737d6f1fe803b93e.png][]

为了创建这个UI视图，我们使用三个类：HomeClientBundle、HomeView和HomeComposite，它们是用MVP（Model View Presenter）模式设计的。

![PersonDto, HomeView 和 HomeComposite][PersonDto_ HomeView _ HomeComposite]  
**HomeClientBundle**：一个GWT客户端捆绑包，它将图像、CSS和JavaScript等多种资源组合到一个文件中，以便浏览器高效加载。

**HomeView**：此类负责创建整体布局和所有其他UI元素，这些元素将在presenter/composite中使用。

**HomeComposite**：此类处理表示逻辑，并根据PersonListGroup中的人数创建不同类型的对话框，如警告或错误对话框。

void handleCheckOkClick(PersonDto person) {
        
      personListGroup.removeItem(person);
    
      int size = personListGroup.getItems().size();
      if (size == 2) {
        
        createWarningDialog();
      } else if (size == 0) {
        
        createErrorDialog("Error on personListGroup is empty!");
      }
    
      donePersonListGroup.addItem(person);
     }

## 运行Web ##

1、模拟运行  
首先转到客户端模块目录

mvn gwt:generate-module gwt:devmode -Pdevelopment-mock

![mock 运行][mock]

可以修改代码后，立即在浏览器上看到转换后的JavaScript效果

2、使用server运行

-- 首先转到客户端模块目录
    mvn gwt:generate-module gwt:devmode -- 客户端
    
    -- 首先转到服务端模块目录
    mvn spring-boot:run -- 服务端

![前端][ef90cfb13c61279220909a8fd112bcaf.png]

![服务端][929ea102d3faf514b24df5abc5751baf.png]

## 部署Web ##

可以将客户端静态资源打包到Spring Boot `static`目录中，作为单体应用部署。

1、Client:使用`Maven Assembly plugin`插件和`distribution.xml`文件，这会创建一个intro-gwtboot-springboot-client-1.0.0-SNAPSHOT-javascript.jar  
2、Server：将打包出来的文件解压到`static`目录下，由于路径发生了变化，需要再server中创建一个`index.html`，内容如下

<link type="text/css" rel="stylesheet" href="app/css/domino-ui.css">
      <link type="text/css" rel="stylesheet" href="app/css/themes/all-themes.css">
      <title>Demo GWT Webapp with DominoUI and Dagger2</title>
                                            
      <script type="text/javascript" src="app/app.nocache.js" async=""></script>

![解压缩后的JS文件和静态目录][JS]

使用如下命令运行：

-- 转到服务端模块目录
    java -jar target/intro-gwtboot-springboot-server-1.0.0-SNAPSHOT.jar
    
    -- 使用该地址访问web应用
    http://localhost:9090/intro/

![单体应用部署][0f8bb35905bac80eec1030a4725e99c9.png]

![Server端包含client文件的流转机制][Server_client]

> 参考资料  
> \[1\] Domino UI: https://demo.dominokit.org/home  
> \[2\] VueGWT: https://vuegwt.github.io/vue-gwt/guide/\#features  
> \[3\] GWT Material Design (GMD): https://gwtmaterialdesign.github.io/gmd-core-demo/  
> \[4\] React4J: https://react4j.github.io/  
> \[5\] WebFX: https://webfx.dev/  
> \[6\] GWTBootstrap3: https://github.com/treblereel/gwtbootstrap3  
> \[7\] RedHat PatternFly for Java: https://patternfly-java.github.io/showcase/\#documentation:alert  
> \[8\] GWT Boot https://github.com/gwtboot

> 作者其他文章：  
> 《Prometheus+Grafana 实践派》专栏火热更新中
> 
> 1.  [Grafana 的介绍和安装][Grafana]
> 2.  [Grafana监控大屏配置参数介绍（一）][Grafana 1]
> 3.  [Grafana监控大屏配置参数介绍（二）][Grafana 2]
> 4.  [Grafana监控大屏可视化图表][Grafana 3]
> 5.  [Grafana 查询数据和转换数据][Grafana 4]
> 6.  [Grafana 告警模块介绍][Grafana 5]
> 7.  [Grafana 告警接入飞书通知][Grafana 6]

[Domino UI]: https://demo.dominokit.org/home
[VueGWT]: https://vuegwt.github.io/vue-gwt/guide/#features
[GWT Material Design _GMD]: https://gwtmaterialdesign.github.io/gmd-core-demo/
[React4J]: https://react4j.github.io/
[WebFX]: https://webfx.dev/
[GWTBootstrap3]: https://github.com/treblereel/gwtbootstrap3
[RedHat PatternFly for Java]: https://patternfly-java.github.io/showcase/#documentation:alert
[LOVE]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4e5c04fbb18a400a93d1ddf00f5a296d.png
[b7042155d7248c16e09b03c9df426da9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/15b9d6ad133c4ac7a2af003eceb71036.png
[17af759540af8da3192cea0465d8ae7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3a7e0dbe12f14e0487d492df0f39190d.png
[b75e1aaef04ce200e1737cb98be90fcd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6494a143d2a44346aca3cfc652d55c68.png
[b429f75af1b36361f8af132f156fe10c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ea8fbd0d5aff4ca987afee0dce50b15b.png
[Person.gwt.xml]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/76276388e5634b7286f21f0f6474b6c0.png
[DominoUI]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/427d162b3b6b4391873af79f267a1c42.png
[jar]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/05e591e4b5a84152bfe87329a65cda57.png
[4f68cb2df8790e0b11fda28e94f1b315.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/679fe4271eea4c7d9dd347b9f4996c62.png
[cd23eb6a7cda345bc4693bf38e3be4bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1982b586e95a4129b430009e4f32edbd.png
[e6233b138d03c3e37fce02f00dad88e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/fc36d3cbd7424bb49406692391530274.png
[DominoUI 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3dded51b03a74e008f335d587a07dcb0.png
[7ea5adf3ea854fb3737d6f1fe803b93e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0adb62a459f44e8db98f2b9ff20bb1fc.png
[PersonDto_ HomeView _ HomeComposite]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aab36423173a44b7ad32d9097f6dd74b.png
[mock]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e716172b8cd946e992f651c8a1d8b210.png
[ef90cfb13c61279220909a8fd112bcaf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c9ceb29c5c7b4f97b3d03f7e7bc61d42.png
[929ea102d3faf514b24df5abc5751baf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2b5aacb4f5874fa7b723781a6e793719.png
[JS]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5834b04019a84f52a8cf6274e4cda575.png
[0f8bb35905bac80eec1030a4725e99c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/905b8636a4da439d9b6da960f1c48e77.png
[Server_client]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e6da6aebd99d496d892e74db9523bd35.png
[Grafana]: https://itsaysay.blog.csdn.net/article/details/128260639
[Grafana 1]: https://itsaysay.blog.csdn.net/article/details/128280232
[Grafana 2]: https://blog.csdn.net/weixin_40972073/article/details/128292597
[Grafana 3]: https://itsaysay.blog.csdn.net/article/details/128309734
[Grafana 4]: https://itsaysay.blog.csdn.net/article/details/128379173
[Grafana 5]: https://itsaysay.blog.csdn.net/article/details/128586826
[Grafana 6]: https://itsaysay.blog.csdn.net/article/details/128665497