[Day 8] 談 Ktor 的 HTML DSL

第 12 屆 iThome 鐵人賽

DAY 8

Modern Web

最好用的非同步網頁框架！開始用 Ktor 寫 Kotlin Server系列第 8 篇

12th鐵人賽 kotlin ktor

ReccaChao

團隊Kotlin 鐵人陣

2020-09-17 22:35:22

1999 瀏覽

分享至

程式撰寫的規則都設定好了，接著，我們可以來看看怎麼寫我們要的功能了

今天我們來看看怎麼利用 kotlin 的 HTML DSL 來產生前端畫面。

HTML DSL

首先，我們要先來談談什麼是 DSL。

DSL，也就是 domain-specific language，指的是使用在特定領域的專門語言。在我們這裡，指的是 kotlin 生成 HTML 所設計的一套函式。

幸運的是，我們之前透過 Ktor plugin 建立專案時，已經幫我們產生了一個範例函式了：

get("/html-dsl") {
    call.respondHtml {
        body {
            h1 { +"HTML" }
            ul {
                for (n in 1..10) {
                    li { +"$n" }
                }
            }
        }
    }
}

可以看到，kotlin 的 HTML DSL 的宣告方式利用了 kotlin 的函式語法，雖然是一個個的函式，但是使用起來很像是一個個的標籤。

我們到 http://127.0.0.1:8080/html-dsl 的話，然後檢視原始碼的話，可以看到這段 DSL 產生的 HTML

<!DOCTYPE html>
<html>
  <body>
    <h1>HTML</h1>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </body>
</html>

如果想知道更多，可以看看 https://ktor.io/docs/html-dsl.html ，裡面會提到更多的函式以及寫法。