SpringBoot 集成Thymeleaf 简单使用

Thymeleaf是springboot中提供默认配置支持的模板引擎之一,其他的还有Groovy,FreeMarker,Mustache

.有了springboot提供的配置支持,我们就可以很快的上手开发动态网站.相较与其他的模板引擎,它有如下三个特点:

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

配置依赖:

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
    <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
</properties>

<dependencies>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
   
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

springboot默认的资源目录:

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

Thymeleaf使用方法:头部引入

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

表达式:

变量表达式:$ {...}  取变量(对象)

选择变量表达式:* {...} 取对象的属性,

消息表达式:#{...} 国际化消息表达

链接网址表达式:@ {...} 与url相关

片段表达式:〜{...} 引入公共片段

1.${...}:
th:text="${obj}"把变量值用到这里

2.*{...}:
相对于对象的属性值。即前面设定了th:object时,th:text="*{prop}"中prop是前面对象的属性。

3.#{...}:
根据语言自动选择显示哪个properties中的值,比如home_zh_CN.properties、home_en.properties。
此外,能够像MessageFormat那样使用占位符{0}这些来使用,占位符可用变量表达式。即
home.welcome=Hello {0}(properties中)
#{ home.welcome(${val}) }将用变量val的值替换掉{0}。语法格式显然易见。

4.@{...} :
提供强大的url处理。如开发中href="/a.html",将跳转到根路径下的a.html。但是放到tomcat等外部组件中时,可能需要项目名字,即href="webapp/a.html"这样才是正确的。为了解决这个问题,模板引擎提供@{...}来表示项目根路径,即在需要时href="@{/a.html}"将自动变为href="webapp/a.html"
此外还支持../这样的上层目录,支持内部直接使用变量表达等等。

5.~{...} :引入公共片段时可选择使用

简单的例子:

src/main/resources/templates下新建index.html ,并引入/public下的css,js文件,因为springboot默认会去public下解析静态文件,所以/static/开头.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>首页</title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet"/>
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<div id="wrapper">
    <span><i class="col-lg-6 ">消息:</i></span><input th:value="${msg}" class="col-lg-6"></input>
    <span><i class="col-lg-6 ">时间:</i></span><input class="col-lg-6" th:value="${#dates.format(time,'yyyy-MM-dd HH:mm:ss')}"></input>
    <span><i class="col-lg-6 ">用户名:</i></span><input class="col-lg-6" th:value="${#session.getAttribute('name')}"></input>
</div>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/js/bootstrap.min.js}"></script>
<script>
</script>

</body>
</html>

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

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.Date;

@Controller
public class IndexController {

    private static final Logger _logger = LoggerFactory.getLogger(IndexController.class);

    /**
     * 主页
     *
     * @param model
     * @return
     */
    @RequestMapping({"/", "/index"})
    public String index(Model model, HttpServletRequest request) {
        model.addAttribute("msg", "welcome you!");
        model.addAttribute("time",new Date());
        HttpSession session =request.getSession();
        session.setAttribute("name","younus");
        return "index";
    }

}

接下来启动应用后,打开首页看看效果如何:

可以看到 ,bootstrap样式也成功被引入,model和session中的值也被取到 .

猜你喜欢

转载自blog.csdn.net/weixin_38158701/article/details/85334297
今日推荐