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

例子一 普通公共页面抽取

//公共页面

测i是页面抽取--公共页面

这是左侧导航栏

这是顶部导航栏

//引入页面创建

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

这里验证我们的顶部部分

例子二 基于后台模板 进行公共页面抽取
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 链接地址
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值