1.3.2 定义视图

为了保持你的主页简洁，它应该做的只是欢迎用户访问网站。程序清单 1.5 显示了定义 Taco Cloud 主页的基本 Thymeleaf 模板。

{% code title=”程序清单 1.5 Taco Cloud 主页模板” %}

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.       xmlns:th="http://www.thymeleaf.org">
  4.     <head>
  5.         <title>Taco Cloud</title>
  6.     </head>
  8.     <body>
  9.         <h1>Welcome to...</h1>
  10.         <img th:src="@{/images/TacoCloud.png}"/>
  11.     </body>
  12. </html>

{% endcode %}

关于这个模板没有太多要讨论的。唯一值得注意的代码行是显示 Taco Cloud 标志的 <img> 标记。它使用一个 Thymeleaf 的 th:src 属性和一个 @{…} 表达式引用具有上下文相对路径的图片。除去这些，它只是一个 Hello World 页面。

但是让我们再多讨论一下这个图片。我将把它留给你来定义一个你喜欢的 Taco Cloud 标志。你需要将它放在项目中的恰当位置。

该图片是通过上下文相对路径 /images/TacoCloud.png 进行引用的。从我们对项目结构的回顾中可以想起，像图片这样的静态内容保存在 /src/main/resources/static 文件夹中。这意味着 Taco Cloud 标志图片也必须驻留在项目的 /src/main/resources/static/images/TacoCloud.png 中。

现在已经有了处理主页请求的控制器和呈现主页的视图模板，几乎已经准备好启动应用程序并看到它的实际运行效果了。但首先，让我们看看如何针对控制器编写测试。