专栏首页Android知识点总结SpringBoot-04-之模板引擎--thymeleaf

SpringBoot-04-之模板引擎--thymeleaf

一.前期工作

1.添加依赖
<!--thymeleaf引擎模板-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.thymeleaf 静态资源配置:src\main\resources\application-dev.yml
#默认
spring.thymeleaf.prefix=classpath:/templates/
#默认
spring.thymeleaf.suffix=.html
#默认
spring.thymeleaf.mode=HTML5
#默认
spring.thymeleaf.encoding=UTF-8
#默认
spring.thymeleaf.servlet.content-type=text/html
#关闭缓存,即使刷新(上线时改为true)
spring.thymeleaf.cache=false

二.使用

1.显示静态页面
  • 新建html:src\main\resources\templates\index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloThymeleaf</title>
</head>
<body>
<h1>thymeleaf in spring boot</h1>
</body>
</html>
  • 控制器:toly1994.com.toly01.controller.ThymeleafController
/**
 * 作者:张风捷特烈
 * 时间:2018/7/16:16:08
 * 邮箱:1981462002@qq.com
 * 说明:Thymeleaf模板引擎控制器
 */
@Controller //注意由于是RequestBody 所以这里将@RestController拆分出来了
public class ThymeleafController {

        @GetMapping("/HelloThymeleaf")
        public String say() {
            return "index";
        }
}

thymeleaf.png

2.使用css
  • 配置:src\main\resources\application-dev.yml
  mvc:
    static-path-pattern: /static/** #启用静态文件夹
  • 创建css文件:src\main\resources\static\css\my.css
h1{
    color: #00f;
}
  • 引用:src\main\resources\templates\index.html
<link rel="stylesheet" href="../static/css/my.css">

css使用.png

3.使用js
  • 创建js文件:src\main\resources\static\js\my.js
alert("hello toly!")
  • 引用:src\main\resources\templates\index.html
<script src="../static/js/my.js"></script>

js使用.png

4.动态替换静态页面数据
  • 使用:src\main\resources\templates\index.html
<body>
<h1 th:text="${replace_text}">thymeleaf in spring boot</h1>
</body>
  • 控制器:toly1994.com.toly01.controller.ThymeleafController
    @GetMapping("/useData")
    public String useData(ModelMap map) {
        map.addAttribute("replace_text", "张风捷特烈");
        return "index";
    }

动态修改.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SpringBoot-03-之热部署

    张风捷特烈
  • 【Flutter Unit 重大更新 1 】超好用的组件收藏夹上线

    张风捷特烈
  • 3-VIV-Android控件之ImageView

    张风捷特烈
  • C/C++黑魔法-匿名数组

    Qt君
  • Python学到什么程度才可以去找工作?掌握这4点足够了!

     大家在学习Python的时候,有人会问“Python要学到什么程度才能出去找工作”,对于在Python培训机构学习Python的同学来说这都不是问题,因为按照...

    用户2966292
  • 数据科学家应该掌握的5个工具

    即使是知识渊博的数据科学家也能提升他们的技术水平。当谈及到分析你编纂的数据时,有大量的工具可以帮助你更好的理解数据。我们与我们的数据科学指导者探讨了很久,最后总...

    小莹莹
  • 目标检测(object detection)扩展系列(三) Faster R-CNN,YOLO,SSD,YOLOv2,YOLOv3在损失函数上的区别

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    chaibubble
  • ajax全套

    对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上。

    菲宇
  • 在NVIDIA Xavier上安装SSD卡原来是这样的...操作不好就悲剧了

    之前Lady我一直在犹豫要不要弄一个在NVIDIA Xavier上安装SSD的教程。但既然Jetsonhacks早就出了相关教程,我就不啰嗦了,先上他的视频:

    GPUS Lady
  • 部署在Netweaver应用上的Fiori缓存的调试

    From: Wang, Jerry Sent: Friday, March 06, 2015 4:11 PM

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券