SpringBoot框架：Thymeleaf模板引擎应用

一、简介

　　Thymeleaf 是可以渲染HTML5 内容的Java模板引擎，与JSP等模板引擎类似可以与Spring MVC等框架集成。它可以直接被浏览器打开，浏览器会忽略未定义的Thymeleaf标签属性，展示模板的静态页面效果。而通过Web 应用程序访问时，则会动态地替换掉静态内容来使页面动态显示。

二、引入依赖

　　pom文件引入thymeleaf依赖包：

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

三、配置yml配置文件

　　在yml文件中添加如下配置：

spring:
    thymeleaf:
        prefix: classpath:/templates/
        suffix: .html
        encoding: UTF-8
        cache: false
        mode: HTML5
        enabled: true

　　prefix：配置模板静态文件放置的路径，classpath:/templates/表示文件放置在resource资源文件的templates文件夹下。

　　suffix：配置模板静态文件的后缀名，配置了这个属性之后在跳转页面时就可以直接写文件名即可，不用写带后缀名的全文件名（例：文件为index.html，在跳转页面时直接跳转到"index"而不用写"index.html"）。

　　encoding：配置模板文件的编码格式。

　　cache：配置模板文件的缓存是否启用，可选填false或true（在开发阶段建议关闭，否则修改文件后容易无法及时看到效果）。

　　mode：应用于模板的模板模式。

　　enabled：是否启用MVC Thymeleaf视图分辨率。

四、接口开发

　　Controller文件要使用@Controller而不是@RestController，因为后者会把返回的结果转化成json格式，无法返回到页面。

@Controller
public class WebController {

    @RequestMapping("/mainWeb")
    public String mainWeb(Model model){
        
        //执行一些查询服务或者规定操作
        
        //返回执行后获取的数据，放置在模型中
        model.setAttribute("result",result);

        //跳转到主页
        return "/index";
    }

}

　　在浏览器中访问接口/mainWeb时，会在后台进行一些查询服务或者其他一些需要的操作，执行完数据操作后如果需要数据返回到页面，则通过model.setAttribute来将数据放置到模型中，return "/index"则是返回到templates文件夹下名称为index的html模板文件页面。

五、页面动态加载

　　html模板引擎中通过xmlns:th="http://www.thymeleaf.org"在 html 标签中声明此名称空间，可避免编辑器出现 html 验证错误。

　　1、常用属性

　　th:text ：通过${}来将该属性替换该标签的内容文本替换，会转义其中的特殊字符。

　　th:utext ：通过${}来将该属性替换该标签的内容文本替换，不转义其中的特殊字符。

　　th:object ：通过${}来替换父标签内容，在该父标签下的子标签则可以通过*{}来显示内容。（表单中可以使用该属性标注form标签，内部的各数据项的value使用*{}来使用）

　　th:value ：通过${}来替换标签的value属性，用来接参数较多。

　　th:style ：通过' '单引号中包含的css属性来对标签进行行内样式绑定。

　　th:each ：通过${ item ： list }的方式进行遍历循环，子标签可以使用${ item.*** }来使用元素的某个属性。

　　th:if ：通过${}中的判断条件来控制标签是否显示，如果true则显示。相反th:unless则是true则不显示。

　　th:switch：通过${}中的数据项来进行判断，在th:case=""中填写相应的分支，满足不同值时进行不同内容的显示。

　　th:src：通过@{url}来进行资源的引用。

　　th:selected：通过等于" "来选中当前选择框，适用于选择器。

　　th:onclick：通过' '中的事件来切换点击触发的事件。

　　th:inline：添加在javascript标签上，分别有text、none和javascript等选择，设置为javascript时可以在js中获取页面对应接口中的值。

　　th:action：替换表单提交时访问的接口，通过@{ url }来进行访问，url为提交的接口地址。

　　th:href：替换链接地址，无参数直接用@{ url }即可，有参数在地址后加括号进行附带@{ url(name="***",value="***") }

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf</title>
</head>
<body>
    <div th:each="item : ${news}">
        <span th:text="${item.title}"></span>
    </div>
</body>
</html>

　　括号中的数据项直接使用model.setAttribute中添加的属性即可。

六、注意事项

　　1、接口跳转页面：

　　一般查询数据列表返回的接口直接跳转到对应页面即可，而执行一些新增、修改、删除等逻辑操作的接口最好使用重定向跳转至对应页面，即return "redirect：/mainWeb"。

　　因为在刷新时会重复访问同一个接口，会造成逻辑操作重复执行，所以除了查询列表信息加载页面之外最好还是通过重定向跳转到查询列表的接口再跳转到对应的主页面。

　　2、表单提交：

　　接口的@RequestMapping中要注明post方式，接参数的实体要使用@ModelAttribute注解来接参数：

　　 @RequestMapping(value = "/submitPartnersApply",method = RequestMethod.POST)
    public String submitPartnersApply(@ModelAttribute(value = "partnersPo") PartnersPo partnersPo,Model model){
        ResultBean resultBean = resourceCenterService.addPartner(partnersPo);
        model.setAttribute("submitRes",resultBean);
        return "redirect:/resourceCenter";
    }

七、session扩展使用

　　1、引入依赖

<dependency>
      <groupId>org.springframework.session</groupId>
      <artifactId>spring-session-core</artifactId>
</dependency>

　　2、接口赋值

　　在接口的形参中添加HttpSession session，代码中使用session.setAttribute进行赋值：

　　@RequestMapping("/submit")
    public String submit(HttpSession session){
        
        session.setAttribute("response",resultBean);

        return "redirect:/mainWeb";
    }

　　3、页面取值

　　通过${ session.* }来进行使用，即和model的区别就是model赋的值可以直接使用，session需要使用前缀。

__EOF__

本文作者：我命倾尘
本文链接：https://www.cnblogs.com/guobin-/p/16585522.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！