建立網站
使用 Kotlin 與 Ktor 建立網站
程式碼範例： tutorial-server-web-application
使用的外掛程式：
在本教學中，您將學習如何使用 Kotlin、Ktor 與 Thymeleaf 範本建置一個互動式網站。
在
您可能希望將所有實作保留在伺服器上，僅將標記傳送到用戶端，原因有很多，例如：
- 簡單性 – 維護單一程式碼庫。
- 安全性 – 防止將可能讓攻擊者洞察系統的資料或程式碼放在瀏覽器上。
- 可支援性 – 允許用戶端使用盡可能廣泛的用戶端，包括舊版瀏覽器以及停用 JavaScript 的瀏覽器。
Ktor 透過整合
先決條件
您可以獨立完成本教學，但我們強烈建議您先完成
我們建議您安裝 IntelliJ IDEA，但您也可以使用您選擇的其他編輯器。
Hello Task Manager Web 應用程式
在本教學中，您將把在
雖然您可以手動將這些外掛程式新增到現有專案中，但產生一個新專案並逐漸納入先前教學中的程式碼會更容易。我們將在過程中提供所有必要的程式碼，因此您不需要手邊有先前的專案。
在 Project artifact 欄位中，輸入 com.example.ktor-task-web-app 作為您的專案構件名稱。
在下一個畫面中，點擊 Add 按鈕來搜尋並新增以下外掛程式：
- Static Content
- Thymeleaf
新增外掛程式後，您將看到專案設定下方列出了所有三個外掛程式。 
點擊 Download 按鈕以產生並下載您的 Ktor 專案。
- 在 IntelliJ IDEA 或您選擇的其他編輯器中開啟專案。
- 導航至 src/main/kotlin 並建立一個名為 model 的子套件。
- 在 model 套件內，建立一個新的 Task.kt 檔案。
在 Task.kt 檔案中，新增一個
enum來表示優先級，以及一個data class來表示任務：kotlin再次地，您想要建立
Task物件並以可以顯示的形式傳送給用戶端。您可能還記得：
- 在處理請求並產生回應教學中，您新增了手寫的擴充函式來將任務轉換為 HTML。透過建置任務管理器應用程式，學習使用 Ktor 與 Kotlin 處理請求、參數以及路由的基礎知識。
- 在建立 RESTful API教學中，您使用瞭解如何使用 Kotlin 與 Ktor 建置後端服務，其中包含一個產生 JSON 檔案的 RESTful API 範例。
kotlinx.serialization程式庫中的Serializable型別對Task類別進行了註解。
在這種情況下，目標是建立一個伺服器頁面，將任務內容寫入瀏覽器。
- 在
- 開啟 src/main/kotlin 中的 Routing.kt 檔案。
在
.configureRouting()函式中，為/tasks新增一條路由，如下所示：kotlin當伺服器收到對
/tasks的請求時，它會建立一個任務清單，然後將其傳遞給 Thymeleaf 範本。ThymeleafContent型別接收要觸發的範本名稱，以及要在頁面上存取的值表。- 開啟 src/main/kotlin 中的 Thymeleaf.kt 檔案。
您應該會看到以下
.configureThymeleaf函式：kotlin在 Thymeleaf 外掛程式的初始化過程中，Ktor 會在 templates/thymeleaf 資料夾中尋找伺服器頁面。與靜態內容一樣，它預期此資料夾位於 resources 目錄中。它也預期有 .html 後綴。
在這種情況下，名稱
all-tasks對應到路徑src/main/resources/templates/thymeleaf/all-tasks.html- 導航至 src/main/resources 並建立一個新的 templates/thymeleaf 目錄。
- 在 src/main/resources/templates/thymeleaf 中，建立一個新的 all-tasks.html 檔案。
開啟 all-tasks.html 檔案並新增以下內容：
html在 IntelliJ IDEA 中，點擊執行按鈕 (
) 來啟動應用程式。在瀏覽器中導航至 http://0.0.0.0:8080/tasks。您應該會看到所有目前任務顯示在表格中，如下所示：
與所有伺服器頁面架構一樣，Thymeleaf 範本混合了靜態內容（要傳送到瀏覽器）與動態內容（要在伺服器上執行）。如果您選擇了其他架構，例如 Freemarker，您也可以使用稍微不同的語法提供相同的功能。
新增 GET 路由
現在您已經熟悉了請求伺服器頁面的過程，請繼續將先前教學中的功能轉移到本教學中。
因為您包含了 Static Content 外掛程式，所以 Routing.kt 檔案中會存在以下程式碼：
這意味著，例如，對 /static/index.html 的請求會由以下路徑的內容提供：
src/main/resources/static/index.html由於此檔案已經是產生的專案的一部分，您可以將其用作您希望新增的功能的首頁。
開啟 src/main/resources/static 中的 index.html 檔案，並將其內容替換為以下實作：
html在 IntelliJ IDEA 中，點擊重新執行按鈕 (
) 以重新啟動應用程式。 在瀏覽器中導航至 http://localhost:8080/static/index.html。您應該會看到一個連結按鈕和三個 HTML 表單，允許您查看、篩選與建立任務：
請注意，當您按
name或priority篩選任務時，您是透過 GET 請求提交 HTML 表單。這意味著參數會新增到 URL 後方的查詢字串中。例如，如果您搜尋
Medium優先級的任務，傳送到伺服器的請求如下所示：http://localhost:8080/tasks/byPriority?priority=Medium
任務的存儲庫可以保持與先前教學中的內容完全相同。
在 model 套件內建立一個新的 TaskRepository.kt 檔案並新增以下程式碼：
- 導航至 src/main/kotlin 中的 Routing.kt 檔案。
將目前版本的
.configureRouting()替換為以下實作：kotlin上述程式碼可以總結如下：
- 在對
/tasks的 GET 請求中，伺服器從存儲庫中檢索所有任務，並使用 all-tasks 範本產生傳送至瀏覽器的下一個檢視。 - 在對
/tasks/byName的 GET 請求中，伺服器從queryString中檢索參數name，找到相符的任務，並使用 single-task 範本產生傳送至瀏覽器的下一個檢視。 - 在對
/tasks/byPriority的 GET 請求中，伺服器從queryString中檢索參數priority，找到相符的任務，並使用 tasks-by-priority 範本產生傳送至瀏覽器的下一個檢視。
為了使這一切正常運作，您需要新增額外的範本。
- 在對
- 導航至 src/main/resources/templates/thymeleaf 並建立一個新的 single-task.html 檔案。
開啟 single-task.html 檔案並新增以下內容：
html在同一個資料夾中，建立一個名為 tasks-by-priority.html 的新檔案。
開啟 tasks-by-priority.html 檔案並新增以下內容：
html
現在您已經建立了存儲庫，可以實作 GET 請求的路由。
新增對 POST 請求的支援
接下來，您將在 /tasks 中新增一個 POST 請求處理常式，以執行以下操作：
- 從表單參數中提取資訊。
- 使用存儲庫新增新任務。
- 透過重複使用 all-tasks 範本來顯示任務。
- 導航至 src/main/kotlin 中的 Routing.kt 檔案。
在
.configureRouting()方法中新增以下post請求路由：kotlin在 IntelliJ IDEA 中，點擊重新執行按鈕 (
) 以重新啟動應用程式。 - 在瀏覽器中導航至 http://0.0.0.0:8080/static/index.html。
在 Create or edit a task 表單中輸入新任務詳細資訊。
點擊 Submit 按鈕以提交表單。 接著您將看到新任務顯示在所有任務的清單中：
後續步驟
恭喜！您現在已完成將 Task Manager 重建為 Web 應用程式，並學習了如何使用 Thymeleaf 範本。
繼續閱讀