SpringBoot 十二 Thymeleaf 语法 及 公共页面抽取

6-10 Thymeleaf基本语法及公共页面抽取

理论

做公共抽取的原因（因为用的模板 导航栏什么的 每个页面都有 要改的话太麻烦必须每个页面都去改 所以要做抽取 这样只要改一个地方就可以全部都改了） 为什么要用Thymeleaf JSP和FreeMarker 需要配置发布 非常麻烦 Thymeleaf的语法更加接近HTML，很简单就能用 是Spring Boot官方推荐 用的文件

语法
Th语法 ： 后补

1 th:fragment = xxxx 代表声明一个代码片段 名字叫xxxx
th:fragment =”commonHeader(title)” 代表定义一个代码片段的名称叫commonHeader
Title 代表是代码片段得形参 也可以没有形参 就不用括号了

声明代码片段后 这个代码片段得名字 就跟整个对象绑定了 这个的意思是 后面的Text 文本 “测试页面抽取 公共页面” 会被title 替换 而 title 得值 会被形参传来得值 赋值

声明代码片段后 这个代码片段得名字 就跟整个对象绑定了

这是顶部导航栏

**## 标题 2 th:replace="/xxxx/sssd/ssss::commonHeader('验证我们的公共页面 表头') 代表替换某个值 代码片段内的其他东西 依然保留 其中/xxxx/sssd/ssss 代表要调用的代码片段在什么位置 默认在template文件夹内 如果没有创建文件夹 直接写文件名字就行 **

使用只注意 想使用thymeleaf 首先要在当前页面先引入thymeleaf

例子一 普通公共页面抽取

//公共页面

这是左侧导航栏

这是顶部导航栏

//引入页面创建

这里是我们 验证得导航部分

这里验证我们的顶部部分

例子二 基于后台模板 进行公共页面抽取
1 首先将网页模板复制进入templates文件夹内 （template 和static内的文件 都需要rebuild 一下）
2 模板一般分成四块 只要写好公共的三块就好 如果在代码上找不到 就按F12勾选 选择页面元素 直接指向单机 即可

3 遇到比较长的 就将其折叠 然后写个div 写上Thymeleaf 代码 将折叠的信息放入 这样不会影响文件结构

4将其他公共页面 都用整个方法 设置好

并且还可以把CDN或者本地文件的导入设置 设置为公共页面

5 引入页直接创建 如果遇到body里的 元素 就尽量将其上一级

直到级以下 也考入进去
并且引入时尽量 加一个 th:remove=“tag” （引入时 默认添加层div 整个条语句 就是将多余添加的div删掉）

6 如果想让每次创建都默认导入这些内容 就file -》 setting-》editor -》 file and code Templates 想让那个文件默认什么内容 就默认什么内容 Thymleaf 语法 1、常用属性 Thymeleaf语法的使用,都是通过在html页面的标签中添加th:xx关键字来实现模板套用,且其属性与html页面标签基本类似，常用属性有下面这些： th:action 表单提交的地址 th:each 属性赋值 th:field 常用于表单字段绑定 th:href 链接地址