Spring ViewComponent 项目教程

最新推荐文章于 2024-09-08 09:32:58 发布

胡同琥Randolph

最新推荐文章于 2024-09-08 09:32:58 发布

阅读量551

点赞数 25

本文链接：https://blog.csdn.net/gitblog_00818/article/details/141733973

版权

Spring ViewComponent 项目教程

spring-view-componentEasily create server-side ui components with spring boot and add interactivity with htmx项目地址:https://gitcode.com/gh_mirrors/sp/spring-view-component

项目介绍

Spring ViewComponent 是一个用于 Spring Boot 的服务器端 UI 组件库。它通过使用 AspectJ 切面和 Spring MVC 容器，自动解析模板并将 ViewContext 放入 ModelAndViewContainer 中。该项目支持多种模板引擎，如 Thymeleaf、JTE 和 KTE，并且提供了热重载功能，便于开发过程中的模板实时更新。

项目快速启动

安装依赖

首先，确保你的项目中包含了 Spring Boot DevTools 依赖，以便启用模板的热重载功能。

Maven

<dependencies>
    <dependency>
        <groupId>de.tschuehly</groupId>
        <artifactId>spring-view-component-thymeleaf</artifactId>
        <version>0.8.3</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
    </dependency>
</dependencies>

Gradle

dependencies {
    implementation("de.tschuehly:spring-view-component-thymeleaf:0.8.3")
    implementation("org.springframework.boot:spring-boot-devtools")
}

创建 ViewComponent

创建一个简单的 ViewComponent 类，并使用 @ViewComponent 注解。

import de.tschuehly.spring.viewcomponent.core.ViewContext;
import de.tschuehly.spring.viewcomponent.core.ViewComponent;

@ViewComponent
public class SimpleViewComponent {
    public record SimpleView(String helloWorld) implements ViewContext { }

    public SimpleView render() {
        return new SimpleView("Hello World");
    }
}

配置模板

在 src/main/resources/templates 目录下创建一个 HTML 模板文件，例如 simple-view.html。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Simple View</title>
</head>
<body>
    <div th:text="${helloWorld}"></div>
</body>
</html>

启动应用

运行你的 Spring Boot 应用，访问相应的路由即可看到效果。

应用案例和最佳实践

案例一：布局组件

创建一个布局组件，并在模板中使用。

@ViewComponent
public class LayoutViewComponent {
    public record LayoutView(String navbar, String content) implements ViewContext { }

    public LayoutView render() {
        return new LayoutView("This is a Navbar", "This is the content");
    }
}

在模板中使用：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Layout View</title>
</head>
<body>
    <nav th:text="${navbar}"></nav>
    <div th:text="${content}"></div>
</body>
</html>