创建网站
使用 Ktor 在 Kotlin 中创建网站
代码示例： tutorial-server-web-application
使用的插件：
在本教程中，您将学习如何使用 Kotlin 结合 Ktor 和 Thymeleaf 模板构建一个交互式网站。
在
出于多种原因，您可能希望将所有实现保留在服务器上，并且只向客户端发送标记，例如：
- 简单性 – 维护单一代码库。
- 安全性 – 防止在浏览器中放置可能为攻击者提供洞察的数据或代码。
- 可支持性 – 允许尽可能广泛的客户端使用，包括旧版浏览器和禁用 JavaScript 的浏览器。
Ktor 通过集成
前提条件
您可以独立学习本教程，但我们强烈建议您先完成
我们建议您安装 IntelliJ IDEA，但您也可以使用其他自选的 IDE。
Hello Task Manager Web 应用程序
在本教程中，您将把在
虽然您可以手动将这些插件添加到现有项目中，但生成一个新项目并逐步合并上一篇教程中的代码会更容易。我们将全程提供所有必要的代码，因此您不需要手头备有之前的项目。
在 Project artifact 字段中，输入 com.example.ktor-task-web-app 作为项目构件的名称。
在下一个屏幕中，通过点击 Add 按钮搜索并添加以下插件：
- Static Content
- Thymeleaf
添加插件后，您将看到项目设置下方列出的所有三个插件。 
点击 Download 按钮以生成并下载您的 Ktor 项目。
- 在 IntelliJ IDEA 或其他自选 IDE 中打开您的项目。
- 导航至 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 按钮提交表单。 然后，您将看到新任务显示在所有任务的列表中：
下一步
恭喜！您现在已完成将任务管理器重新构建为 Web 应用程序，并学习了如何使用 Thymeleaf 模板。
继续阅读