使用 Ktor 在 Kotlin 中创建网站

代码示例: tutorial-server-web-application

所用插件:

Routing

路由是服务器应用程序中用于处理传入请求的核心插件。

,

Static Content

了解如何提供静态内容，例如样式表、脚本、图像等。

,

Thymeleaf

所需依赖项：io.ktor:%artifact_name% 代码示例：tutorial-server-web-application 原生服务器支持：✖️

在本教程中，我们将向你展示如何使用 Ktor 和 Thymeleaf 模板在 Kotlin 中构建交互式网站。

在

上一教程

了解如何使用 Kotlin 和 Ktor 构建后端服务，其中包含一个生成 JSON 文件的 RESTful API 示例。

中，你学习了如何创建 RESTful 服务，我们假设该服务将由用 JavaScript 编写的单页应用程序 (SPA) 使用。尽管这是一种非常流行的架构，但它并不适合所有。

你可能希望将所有实现保留在服务器端，并且只向客户端发送标记，原因有很多，例如：

• 简洁性 - 维护单一代码库。
• 安全性 - 防止将可能为攻击者提供洞察力的数据或代码放置到浏览器上。
• 可支持性 - 允许客户端使用尽可能广泛的客户端，包括旧版浏览器和禁用 JavaScript 的客户端。

Ktor 通过与

多种服务器页面技术

了解如何使用 HTML/CSS 或 JVM 模板引擎构建视图。

集成来支持这种方法。

先决条件

你可以独立完成本教程，但是，我们强烈建议你完成

前一个教程

了解如何使用 Kotlin 和 Ktor 构建后端服务，其中包含一个生成 JSON 文件的 RESTful API 示例。

，以学习如何创建 RESTful API。

我们建议你安装 IntelliJ IDEA，但你也可以使用其他你选择的 IDE。

Hello 任务管理器 Web 应用程序

在本教程中，你将把在

上一教程

了解如何使用 Kotlin 和 Ktor 构建后端服务，其中包含一个生成 JSON 文件的 RESTful API 示例。

中构建的“任务管理器”转换为 Web 应用程序。为此，你将使用多个 Ktor

插件

插件提供常见功能，例如序列化、内容编码、压缩等。

。

尽管你可以手动将这些插件添加到现有中，但生成一个新并逐步整合上一教程中的代码会更容易。我们将在整个过程中提供所有必要的代码，因此你无需手边拥有之前的。

1. 导航到 Ktor 项目生成器 。

2. 在 项目 artifact 字段中，输入 com.example.ktor-task-web-app 作为你的 artifact 名称。

3. 在下一个屏幕中，点击 添加 按钮，搜索并添加以下插件：

   • Routing
   • Static Content
   • Thymeleaf

   一旦你添加了这些插件，你将看到所有 三个插件都列在设置下方。

4. 点击 下载 按钮以生成并下载你的 Ktor 。

1. 打开你的，使用 IntelliJ IDEA 或其他你选择的 IDE。
2. 导航到 src/main/kotlin/com/example 并创建一个名为 model 的子包。
3. 在 model 包内，创建一个新的 Task.kt 文件。

4. 在 Task.kt 文件中，添加一个 enum 来表示优先级，以及一个 data class 来表示：

   同样，我们希望创建 Task 对象并以可显示的形式将其发送给客户端。

   你可能记得：

   • 在
     处理请求和生成响应

     学习如何使用 Kotlin 和 Ktor 构建任务管理器应用程序，从而了解路由、请求处理和形参的基础知识。
     教程中，我们添加了手写的来将转换为 HTML。
   • 在
     创建 RESTful API

     了解如何使用 Kotlin 和 Ktor 构建后端服务，其中包含一个生成 JSON 文件的 RESTful API 示例。
     教程中，我们使用 kotlinx.serialization 库中的 Serializable 类型标注了 Task 类。

   在这种情况下，我们的目标是创建一个服务器页面，能够将的内容写入浏览器。

5. 打开 plugins 包内的 Templating.kt 文件。

6. 在 configureTemplating() 中，添加一个 /tasks 的路由，如下所示：

   当服务器收到 /tasks 的请求时，它会创建一个的

   list
   ，然后将其传递给 Thymeleaf 模板。ThymeleafContent 类型接受我们希望触发的模板名称以及我们希望在页面上可访问的值表。

   在顶部的 Thymeleaf 插件初始化中，你可以看到 Ktor 会在 templates/thymeleaf 中查找服务器页面。与静态内容一样，它会期望此文件夹位于 resources 目录中。它还将期望使用 .html 后缀。

   在这种情况下，名称 all-tasks 将映射到路径 src/main/resources/templates/thymeleaf/all-tasks.html

7. 导航到 src/main/resources/templates/thymeleaf 并创建一个新的 all-tasks.html 文件。

8. 打开 all-tasks.html 文件并添加以下内容：

9. 在 IntelliJ IDEA 中，点击运行按钮 () 来启动。

10. 在浏览器中导航到 http://0.0.0.0:8080/tasks。你应该会看到所有当前以表格形式显示，如下所示：

    

    像所有服务器页面一样，Thymeleaf 模板将静态内容（发送到浏览器）与动态内容（在服务器上执行）混合。如果我们选择了替代，例如 Freemarker，我们本可以以稍微不同的语法提供相同的。

添加 GET 路由

既然你熟悉了请求服务器页面的过程，接下来将之前教程中的转移到本教程中。

因为你包含了 Static Content 插件，以下代码将出现在 Routing.kt 文件中：

这意味着，例如，对 /static/index.html 的请求将从以下路径提供内容：

src/main/resources/static/index.html

由于此文件已是生成的的一部分，你可以将其用作要添加的的主页。

1. 打开 src/main/resources/static 目录下的 index.html 文件，并将其内容替换为以下实现：

2. 在 IntelliJ IDEA 中，点击重新运行按钮 () 以重启。

3. 在浏览器中导航到 http://localhost:8080/static/index.html。你应该会看到一个链接按钮和三个 HTML 表单，它们允许你查看、过滤和创建：

   

   请注意，当你按 name 或 priority 过滤时，你是通过 GET 请求提交 HTML 表单。这意味着将添加到 URL 后的查询字符串中。

   例如，如果你搜索 Medium 优先级的，这将是发送到服务器的请求：

   http://localhost:8080/tasks/byPriority?priority=Medium

的可以与上一教程中的保持一致。

在 model 包内，创建一个新的 TaskRepository.kt 文件并添加以下代码：

现在你已经创建了，你可以实现 GET 请求的路由了。

1. 导航到 src/main/kotlin/com/example/plugins 中的 Templating.kt 文件。

2. 将当前版本的 configureTemplating() 替换为以下实现：

   上述代码可总结如下：

   • 在对 /tasks 的 GET 请求中，服务器从中检索所有，并使用 all-tasks 模板生成发送到浏览器的下一个视图。
   • 在对 /tasks/byName 的 GET 请求中，服务器从 queryString 中检索taskName，找到匹配的，并使用 single-task 模板生成发送到浏览器的下一个视图。
   • 在对 /tasks/byPriority 的 GET 请求中，服务器从 queryString 中检索priority，找到匹配的，并使用 tasks-by-priority 模板生成发送到浏览器的下一个视图。

   为了使所有这些都正常工作，你需要添加额外的模板。

3. 导航到 src/main/resources/templates/thymeleaf 并创建一个新的 single-task.html 文件。

4. 打开 single-task.html 文件并添加以下内容：

5. 在同一个文件夹中，创建一个新文件叫 tasks-by-priority.html 。

6. 打开 tasks-by-priority.html 文件并添加以下内容：

添加对 POST 请求的支持

接下来，你将向 /tasks 添加一个 POST 请求处理程序，以执行以下操作：

• 从表单中提取信息。
• 使用添加新。
• 通过复用 all-tasks 模板来显示。

1. 导航到 src/main/kotlin/com/example/plugins 中的 Templating.kt 文件。

2. 在 configureTemplating() 中添加以下 post 请求路由：

3. 在 IntelliJ IDEA 中，点击重新运行按钮 () 以重启。

4. 导航到 http://0.0.0.0:8080/static/index.html。

5. 在 创建或编辑任务 表单中输入新的详细信息。

   

6. 点击 提交 按钮以提交表单。 然后你将看到新显示在所有的

   list
   中：
   

后续步骤

恭喜！你现在已经完成了将管理器重建为 Web 应用程序，并学习了如何利用 Thymeleaf 模板。

继续阅读

下一教程

学习如何利用 WebSockets 的强大功能来发送和接收内容。

，了解如何使用 Web Sockets。