springboot-thymeleaf

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

  1. Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。
  2. Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。
  3. Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

在SpringBoot中集成Thymeleaf构建Web应用步骤：

pom依赖：

 1 <dependencies>
 2         <dependency>
 3             <groupId>org.springframework.boot</groupId>
 4             <artifactId>spring-boot-starter-web</artifactId>
 5             <exclusions>
 6                 <exclusion>
 7                     <groupId>org.springframework.boot</groupId>
 8                     <artifactId>spring-boot-starter-tomcat</artifactId>
 9                 </exclusion>
10             </exclusions>
11         </dependency>
12         <dependency>
13             <groupId>org.springframework.boot</groupId>
14             <artifactId>spring-boot-starter-jetty</artifactId>
15         </dependency>
16 
17         <dependency>
18             <groupId>org.springframework.boot</groupId>
19             <artifactId>spring-boot-starter-test</artifactId>
20             <scope>test</scope>
21         </dependency>
22         <dependency>
23             <groupId>org.springframework.boot</groupId>
24             <artifactId>spring-boot-starter-thymeleaf</artifactId>
25         </dependency>
26     </dependencies>

 

资源目录

Spring Boot默认提供静态资源目录位置需置于classpath下，目录名需符合如下规则：

  1. /static
  2. /public
  3. /resources
  4. /META-INF/resources

举例：我们可以在src/main/resources/目录下创建static，在该位置放置一个图片文件pic.jpg。 启动程序后，尝试访问http://localhost:8080/pic.jpg。如能显示图片，配置成功。

SpringBoot的默认模板路径为：src/main/resources/templates

添加页面

在src/main/resources/templates下面添加一个index.html首页，同时引用到一些css、js文件，看看Thymeleaf 3的语法：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml"
 3       xmlns:th="http://www.thymeleaf.org">
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta name="renderer" content="webkit">
 8     <title>首页</title>
 9     <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
10     <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
11     <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet"/>
12 </head>
13 <body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
14 <div id="wrapper">
15     <h1 th:text="${msg}"></h1>
16 </div>
17 <script th:src="@{/static/js/jquery.min.js}"></script>
18 <script th:src="@{/static/js/bootstrap.min.js}"></script>
19 
20 </body>
21 </html>

说明：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

加上这个命名空间后就能在页面中使用Thymeleaf自己的标签了，以th:开头。

连接语法 th:href="@{/static/css/bootstrap.min.css}"

访问Model中的数据语法 th:text="${msg}"

在页面里显示的是一个键为msg的消息，需要后台传递过来。

 

编写Controller

接下来编写控制器类，将URL / 和 /index 都返回index.html页面：

 1 @Controller
 2 public class IndexController {
 3 
 4     private static final Logger _logger = LoggerFactory.getLogger(IndexController.class);
 5 
 6     /**
 7      * 主页
 8      *
 9      * @param model
10      * @return
11      */
12     @RequestMapping({"/", "/index"})
13     public String index(Model model) {
14         model.addAttribute("msg", "welcome you!");
15         return "index";
16     }
17 
18 }

在model里面添加了一个属性，key=msg，值为welcome you!。

接下来启动应用后，打开首页看看效果如何。消息正确显示，成功！。

 

posted @ 2019-04-25 11:36  UniqueColor  阅读(222)  评论(0)  编辑  收藏  举报