本项目的笔记和资料的Download,请点击这一句话自行获取。

day01-springboot(理论篇) ;day01-springboot(实践篇) ;day01-springboot(Thymeleaf快速入门)

day02-springcloud(理论篇一:Robbin负载均衡) ;

5.Thymeleaf快速入门


SpringBoot不推荐使用jsp,但是支持一些模板引擎技术:

5.1.为什么是Thymeleaf?

简单说, Thymeleaf 是一个模板引擎,它可以完全替代 JSP 。相较于其他的模板引擎,它有如下四个极吸引人的特点:

  • 动静结合:Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。
  • 开箱即用:它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
  • 多方言支持:Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
  • 与SpringBoot完美整合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器,我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别,就是在模板语法上有区别。

接下来,我们就通过入门案例来体会Thymeleaf的魅力:

5.2.提供数据

编写一个controller方法,返回一些用户数据,放入模型中,将来在页面渲染

@GetMapping("/all")
public String all(ModelMap model) {
// 查询用户
List<User> users = this.userService.queryAll();
// 放入模型
model.addAttribute("users", users);
// 返回模板名称(就是classpath:/templates/目录下的html文件名)
return "users";
}

5.3.引入启动器

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

SpringBoot会自动为Thymeleaf注册一个视图解析器:

与解析JSP的InternalViewResolver类似,Thymeleaf也会根据前缀和后缀来确定模板文件的位置:

  • 默认前缀:classpath:/templates/
  • 默认后缀:.html

所以如果我们返回视图:users,会指向到 classpath:/templates/users.html

一般我们无需进行修改,默认即可。

5.4.静态页面

根据上面的介绍,模板默认放在classpath下的templates文件夹,我们新建一个html文件放入其中:

编写html模板,渲染模型中的数据:

注意,把html 的名称空间,改成:xmlns:th="http://www.thymeleaf.org" 会有语法提示。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style type="text/css">
table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}
table, th, td {border: 1px solid darkslategray;padding: 10px}
</style>
</head>
<body>
<div style="text-align: center">
<span style="color: darkslategray; font-size: 30px">欢迎光临!</span>
<hr/>
<table class="list">
<tr>
<th>id</th>
<th>姓名</th>
<th>用户名</th>
<th>年龄</th>
<th>性别</th>
<th>生日</th>
</tr>
<tr th:each="user : ${users}">
<td th:text="${user.id}">1</td>
<td th:text="${user.name}">张三</td>
<td th:text="${user.userName}">zhangsan</td>
<td th:text="${user.age}">20</td>
<td th:text="${user.sex}">男</td>
<td th:text="${user.birthday}">1980-02-30</td>
</tr>
</table>
</div>
</body>
</html>

我们看到这里使用了以下语法:

  • ${} :这个类似与el表达式,但其实是ognl的语法,比el表达式更加强大
  • th-指令:th-是利用了Html5中的自定义属性来实现的。如果不支持H5,可以用data-th-来代替
    • th:each:类似于c:foreach 遍历集合,但是语法更加简洁
    • th:text:声明标签中的文本
      • 例如<td th-text='${user.id}'>1</td>,如果user.id有值,会覆盖默认的1
      • 如果没有值,则会显示td中默认的1。这正是thymeleaf能够动静结合的原因,模板解析失败不影响页面的显示效果,因为会显示默认值。

5.5.测试

接下来,我们打开页面测试一下:

5.6.模板缓存

Thymeleaf会在第一次对模板解析之后进行缓存,极大的提高了并发处理能力。但是这给我们开发带来了不便,修改页面后并不会立刻看到效果,我们开发阶段可以关掉缓存使用:

# 开发阶段关闭thymeleaf的模板缓存
spring.thymeleaf.cache=false


在Idea中,我们需要在修改页面后按快捷键:`Ctrl + Shift + F9` 对项目进行rebuild才可以。

============================

参考资料:

end

14 微服务电商【黑马乐优商城】:day01-springboot(Thymeleaf快速入门)的更多相关文章

  1. 14 微服务电商【黑马乐优商城】:day01-springboot(理论篇)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) :day01-springboot(Thyme ...

  2. 14 微服务电商【黑马乐优商城】:day06-使用nginx反向代理并掌握cors解决跨域

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  3. 14 微服务电商【黑马乐优商城】:day06-了解vue-router和webpack的使用

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  4. 14 微服务电商【黑马乐优商城】:day04-ES6语法入门

    day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一)  :day02-springcloud(理论篇二)  :day ...

  5. 14 微服务电商【黑马乐优商城】:day04-项目搭建(二)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  6. 14 微服务电商【黑马乐优商城】:day04-项目搭建(一)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  7. 14 微服务电商【黑马乐优商城】:day03-springcloud(Zuul网关)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  8. 14 微服务电商【黑马乐优商城】:day03-springcloud(Hystix,Feign)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  9. 14 微服务电商【黑马乐优商城】:day02-springcloud(理论篇四:配置Robbin负载均衡)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  10. 14 微服务电商【黑马乐优商城】:day02-springcloud(搭建Eureka注册中心)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

随机推荐

  1. zabbix_agent_win

    http://mayulin.blog.51cto.com/1628315/514447/ http://www.cnblogs.com/likehua/p/3968689.html 先下载win客户 ...

  2. 考研c语言基础 66++6

    1.数据类型 对于基本的数据类型,如整型int,long,...(考研中涉及处理的整数题目,如果没有特别要求用int足够了),字符型char,浮点型float.double...(对于处理小数问题,在 ...

  3. Vulkan SDK 之 Device

     Enumerate Physical Devices Vulkan instance创建完成之后,vulkan loader是知道你有几个物理设备(显卡),但是程序不知道,需要通过 相关接口获取设备 ...

  4. python利用百度云接口实现车牌识别

    一个小需求---实现车牌识别. 目前有两个想法 调云在线的接口或者使用SDK做开发(配置环境和编译第三方库很麻烦,当然使用python可以避免这些问题) 自己实现车牌识别算法(复杂) ! 一开始准备使 ...

  5. Nginx负载均衡(转发)

    http://www.cnblogs.com/jalja/p/6117881.html 一.反向代理 正向代理: 客户端要获取的资源就在服务器上,客户端请求的资源路径就是最终响应资源的服务器路径,这就 ...

  6. OI常用模板

    long long qpow(long long a,long long b,int mod) { ; while (b) { ) res=res*a%mod; a=a*a%mod; b>> ...

  7. Python基本数据类型之字符串

    Python转义字符 在需要在字符中使用特殊字符时,python用反斜杠(\)转义字符.如下表: 转义字符 描述 \(在行尾时) 续行符 \\ 反斜杠符号 \' 单引号 \" 双引号 \a ...

  8. Centos6.5 安装zabbix3(收藏,非原创)

    1.安装PHP Zabbix 3.0对PHP的要求最低为5.4,而CentOS6默认为5.3.3,完全不满足要求,故需要利用第三方源,将PHP升级到5.4以上,注意,不支持PHP7 rpm -ivh  ...

  9. CTF -攻防世界-crypto新手区(5~11)

    easy_RSA 首先如果你没有密码学基础是得去恶补一下的 然后步骤是先算出欧拉函数 之后提交注意是cyberpeace{********}这样的 ,博主以为是flag{}耽误了很长时间  明明没算错 ...

  10. xdc如何设置输入延时

    常用命令: Set_input_delay,create_clock,set_output_delay以及用于组合逻辑的set_max_delay. Input delay: 什么是输入延时? Tra ...