使用Spring Boot和Thymeleaf的htmx简单源码

21-05-26 banq

如果你出于性能和安全方面的考虑,打算迁移回SPA应用程序的服务器端呈现SSR,这个项目演示了无需安装Node.js、npm或任何其他工具即可获得丰富的动态UI,而只需html,css,htmx,bootstrap和一些hyperscript即可。没有npm,没有JavaScript框架,没有REST服务会生成JSON,然后在浏览器中将其转换回HTML。

只需运行mvn spring-boot:run并单击http:// localhost:8080,您将看到一个索引页面,其中包含指向各个演示的链接。

 

入门

WebJars用于包括Bootstrap,jQuery,htmx和hyperscript。尽管Bootstrap v5从技术上讲不再需要jQuery,但为防万一,我暂时将其保留了下来。

您可以将htmx和hyperscrip的WebJars添加到pom.xml中,如下所示:

<dependencies>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>htmx.org</artifactId>
        <version>1.4.0</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>hyperscript.org</artifactId>
        <version>0.0.9</version>
    </dependency>
</dependencies>

...然后将以下内容添加到您的应用程序Thymeleaf / HTML中以使用htmx和hyperscript:

<head>
    <script type="text/javascript" th:src="@{/webjars/htmx.org/dist/htmx.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/hyperscript.org/dist/_hyperscript.js}"></script>
</head>

请注意,您实际上并未在HTML声明中指定htmx或hyperscript的版本号-所有这些都由WebJars和您的Maven pom.xml处理。

 点击标题见Github

猜你喜欢