Ktor 創建了一套 DSL (domain-specific language)來處理前端畫面產生的邏輯

下面我們來嘗試用這個系統畫出頁面

設置

编辑

在 build.gradle 裡面加上新的 dependencies

implementation "io.ktor:ktor-html-builder:$ktor_version"

基本用法

编辑

下面以路徑 127.0.0.1:8080/html 為例,基本畫面的宣告方式如下

get("/html") {
    call.respondHtml {
        head {
            title { +"Async World" }
        }
        body {
            h1 {
                +"Title"
            }
        }
    }
}

連線進 127.0.0.1:8080/html 之後,我們就可以看到 HTML 頁面了,其 HTML 原始碼如下

<!DOCTYPE html>
<html>
  <head>
    <title>Async World</title>
  </head>
  <body>
    <h1>Title</h1>
  </body>
</html>

語言結構

编辑

因為是以 Kotlin 程式語言的方式撰寫,所以可以在裡面加入 Kotlin 的程式

比方說

get("/test") {
    call.respondHtml {
        head {
            title { +"Async World" }
        }
        body {
            h1 {
                +"Title"
            }
            for (i in 1 .. 10) {
                p {
                    +"Title"
                }
            }
        }
    }
}

所生成的頁面是

<!DOCTYPE html>
<html>
  <head>
    <title>Async World</title>
  </head>
  <body>
    <h1>Title</h1>
    <p>Title</p>
    <p>Title</p>
    <p>Title</p>
    <p>Title</p>
    <p>Title</p>
    <p>Title</p>
    <p>Title</p>
    <p>Title</p>
    <p>Title</p>
    <p>Title</p>
  </body>
</html>

樣板

编辑