SpringBoot 十二 Thymeleaf 语法 及 公共页面抽取
6-10 Thymeleaf基本语法及公共页面抽取
理论
做公共抽取的原因(因为用的模板 导航栏什么的 每个页面都有 要改的话太麻烦必须每个页面都去改 所以要做抽取 这样只要改一个地方就可以全部都改了) 为什么要用Thymeleaf JSP和FreeMarker 需要配置发布 非常麻烦 Thymeleaf的语法更加接近HTML,很简单就能用 是Spring Boot官方推荐 用的文件语法
Th语法 : 后补
1 th:fragment = xxxx 代表声明一个代码片段 名字叫xxxx
th:fragment =”commonHeader(title)” 代表定义一个代码片段的名称叫commonHeader
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 链接地址 并且引入时尽量 加一个 th:remove=“tag” (引入时 默认添加层div 整个条语句 就是将多余添加的div删掉)