Kotlin 中的 HTML 构建器 | Baeldung中文网

1. 简介

在开发 Web 应用时，动态生成 HTML 内容往往比较复杂。Kotlin 提供了一个优雅的解决方案：kotlinx.html 库。该库提供了一套类型安全的 DSL（领域特定语言），可以让我们用 Kotlin 的语法来构建 HTML 页面。

✅ 优点：类型安全、结构清晰、可读性强
✅ 适用场景：服务端动态生成 HTML、模板渲染、静态页面生成等

在本文中，我们将通过实际示例了解 kotlinx.html 是如何简化 HTML 构建过程的。

2. 了解 kotlinx.html

kotlinx.html 是一个基于 Kotlin 的 DSL，用于构建 HTML 文档。它通过函数调用模拟 HTML 标签结构，提供类型安全的 API，避免拼写错误和非法标签嵌套。

2.1. 添加依赖

在使用 kotlinx.html 前，需要先引入依赖。以下是 Maven 和 Gradle 的配置方式：

Maven 配置：

<dependency>
    <groupId>org.jetbrains.kotlinx</groupId>
    <artifactId>kotlinx-html-jvm</artifactId>
    <version>0.7.2</version>
</dependency>

Gradle 配置：

dependencies {
    implementation "org.jetbrains.kotlinx:kotlinx-html-jvm:0.7.2"
}

⚠️ 注意版本号可能需要根据最新版本进行更新。

2.2. 构建简单 HTML 页面

下面是一个完整的 HTML 页面构建示例：

fun buildHTML(): String {
    return createHTML().html {
        head {
            title { +"My Kotlin HTML Page" }
        }
        body {
            h1 { +"Welcome to Kotlin HTML Builder" }
            p { +"This is a demonstration of kotlinx.html." }
            ul {
                repeat(5) {
                    li { +"Item $it" }
                }
            }
        }
    }.toString().trim()
}

📌 说明：

createHTML() 创建一个 HTML 构建器
html { ... } 表示整个 HTML 文档的结构
head 和 body 分别对应 HTML 的头部和主体
repeat(5) 动态生成 5 个 <li> 元素

生成结果如下：

<html>
  <head>
    <title>My Kotlin HTML Page</title>
  </head>
  <body>
    <h1>Welcome to Kotlin HTML Builder</h1>
    <p>This is a demonstration of kotlinx.html.</p>
    <ul>
      <li>Item 0</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </body>
</html>

2.3. 添加 HTML 属性

kotlinx.html 支持为标签添加属性。例如，我们可以给 <p> 标签添加 id、class 和 style：

fun buildParagraphWithAttributes(): String {
    return createHTML().p {
        id = "intro-paragraph"
        classes = setOf("intro")
        style = "color: red; font-size: 16px;"
        +"This is a demonstration of kotlinx.html."
    }.toString().trim()
}

生成结果如下：

<p id="intro-paragraph" class="intro" style="color: red; font-size: 16px;">This is a demonstration of kotlinx.html.</p>

📌 常用属性包括：

id
classes（注意是集合）
style
href
src
type
name

2.4. 单元测试验证

为了确保 HTML 构建结果符合预期，我们可以使用 JUnit 编写单元测试：

class HtmlBuilderUnitTest {
    @Test
    fun testBuildHtml() {
        val expectedHtml = """
            <html>
              <head>
                <title>My Kotlin HTML Page</title>
              </head>
              <body>
                <h1>Welcome to Kotlin HTML Builder</h1>
                <p>This is a demonstration of kotlinx.html.</p>
                <ul>
                  <li>Item 0</li>
                  <li>Item 1</li>
                  <li>Item 2</li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                </ul>
              </body>
            </html>
        """.trimIndent()

        val actualHtml = buildHTML()

        assertEquals(expectedHtml, actualHtml)
    }

    @Test
    fun testParagraphAttributes() {
        val expectedHtml = """
        <p id="intro-paragraph" class="intro" style="color: red; font-size: 16px;">This is a demonstration of kotlinx.html.</p>
    """.trimIndent()

        val actualHtml = buildParagraphWithAttributes()

        assertEquals(expectedHtml, actualHtml)
    }
}

📌 踩坑提醒：

使用 trimIndent() 时要注意前后空格是否一致
HTML 标签大小写默认是小写，若需大写需手动处理
不建议直接拼接字符串，应使用 DSL 提供的函数和属性

3. 总结

kotlinx.html 提供了一个强大、类型安全、表达力强的 DSL，非常适合在 Kotlin 项目中动态构建 HTML 内容。相比传统的字符串拼接方式，它更安全、可读性更高，也更容易维护。

✅ 优点总结：

类型安全，避免非法标签嵌套
支持动态内容生成
与 Kotlin 语法无缝集成
易于测试和调试

📌 适用场景：

服务端渲染 HTML 页面
邮件模板生成
静态资源生成
简单的前端模板引擎替代方案

如需查看完整示例代码，欢迎访问：GitHub 示例仓库

Persistence

REST

Security