前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SpringBoot-04-之模板引擎--thymeleaf

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

作者头像
张风捷特烈
发布2018-09-26 17:49:01
4890
发布2018-09-26 17:49:01
举报

一.前期工作

1.添加依赖
代码语言:javascript
复制
<!--thymeleaf引擎模板-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.thymeleaf 静态资源配置:src\main\resources\application-dev.yml
代码语言:javascript
复制
#默认
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
代码语言:javascript
复制
<!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
代码语言:javascript
复制
/**
 * 作者:张风捷特烈
 * 时间: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
代码语言:javascript
复制
  mvc:
    static-path-pattern: /static/** #启用静态文件夹
  • 创建css文件:src\main\resources\static\css\my.css
代码语言:javascript
复制
h1{
    color: #00f;
}
  • 引用:src\main\resources\templates\index.html
代码语言:javascript
复制
<link rel="stylesheet" href="../static/css/my.css">

css使用.png

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

js使用.png

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

动态修改.png

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.07.16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.添加依赖
  • 2.thymeleaf 静态资源配置:src\main\resources\application-dev.yml
  • 1.显示静态页面
  • 2.使用css
  • 3.使用js
  • 4.动态替换静态页面数据
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档