SpringBoot日记——Thymeleaf进阶小篇

我们做好了登录页,那设计一个场景吧,比如我们登录后跳转到公司主页,想从公司主页再跳转到员工列表页;

这样的场景我们该如何实现,首先要知道一些基础知识,就是SpringBoot的一些关于请求的架构知识:

功能 请求URI 请求方式
查询所有员工 emps GET
查询某个员工 emp/{id} GET
跳转到添加页 emp GET
添加员工 emp POST
跳转到修改页 emp GET
修改员工信息 emp{id} PUT
删除员工 emp{id} DELETE

 其实,这些请求在我们做登录页的时候已经有接触过了,那么我们来看后边如何应用。

页面跳转和编写替换

我们从主页中已经写过了如何从主页跳转到列表页,那么我们现在要做的就是,在列表页中展示正确的数据。

1. 首先,添加超链接,也就是点击跳转后的页面,同样适用thymeleaf模板,引入模板和属性

xmlns:th="http://www.thymeleaf.org"

来看没有修改前的跳转页面的几个地方:

  a. 头部的名字不是我们首页的admin;

  b. 侧边栏中我们修改的员工管理的中文不见了;

  c. 列表数据目前OK;

  针对以上的问题,我要做的就是替换头部和侧边栏,但是让我们按照首页一样再写一遍会很麻烦,所以Thymeleaf给了我们一些可以替换的功能;

  看官方文档如何写的:

  效果图:

  两种替换公式:

  ~{templatename: : selector}        :~{模板名::选择器}
  ~{templatename: : fragmentname}  :~{模板名::片段名}

  三个替换属性:

  th:insert    :将声明的片段,整个插入到元素中

  th:replace    :将声明引入的元素替换为公告元素
  th:includ      :将被引入的元素内容包含在标签中
  

  1. 那,在我们的html中应用一下,就是这么写的:(在我们需要替换的顶部栏,也就是用户名那里,把这个元素后边加上这个th的属性)

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">

  2. 然后,在我们的list.htm页中加入这样的一段即可实现:(注意,我这里没有写~{},其实是可以的;一般只有在行内才需要写,比如[[~{}]]或者[(~{})])

<div th:replace="dashboard::topbar"></div>

  实现效果如图:*(看,名字已经替换成了首页我们登录时的用户名)

 

  3. 接下来,替换侧边栏,同样的方法,这会我使用选择器的那个公式:(给想要替换的侧边栏,添加一个id)

<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">

  4. 再到list.html中去引入这个id:

<div th:replace="~{dashboard::#sidebar}"></div>

  看效果:(首页的中文页替换过来了),是不是这样写页面就简单了很多~

  

原文地址:https://www.cnblogs.com/iceb/p/9228931.html

时间: 2024-10-11 05:33:12

SpringBoot日记——Thymeleaf进阶小篇的相关文章

Springboot+JPA+Thymeleaf 校园博客完整小网站

本文所属[知识林]:http://www.zslin.com/web/article/detail/35 此项目是一个比较简易的校园博客.麻雀虽小五脏俱全,虽然是比较简易的但是涉及的知识点还是比较全面的. 此项目涵盖了[知识林]中Springboot和Thymeleaf中所有知识点的内容. 主要功能有: 系统管理 系统初始化 菜单管理 角色管理 用户管理 系统配置管理 用户注册 邮件验证码实现 用户登陆 找回密码 博文分类管理 添加分类 修改分类 博文管理 添加博文 修改博文 博文评论(未实现)

MySQL的进阶实战篇

[版权申明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) http://blog.csdn.net/javazejian/article/details/69857949 出自[zejian的博客] 关联文章: MySQL的初次见面礼基础实战篇 MySQL的进阶实战篇 本篇上一篇博文MySQL的初次见面礼基础实战篇的延续,是mysql的进阶内容的记录,本篇主要知识点如下: 进阶实战篇 进阶实战篇 mysql视图机制 什么是视图 视图创建与使用 视图的本质 高效索引 使用索引的理由 索引

【Android的从零单排开发日记】之入门篇(八)——Android数据存储(下)

废话不多说了,紧接着来讲数据库的操作吧.Come On! 提到数据存储问题,数据库是不得不提的.数据库是用来存储关系型数据的不二利器.Android为开发者提供了强大的数据库支持,可以用来轻松地构造基于数据库的应用.Android的数据库应用,依托于当下最流行的开源嵌入式数据库SQLite.在Android中,应用的数据库文件是该应用私有的,存储在应用数据目录下的databases子目录内.从代码结构来看,Android的数据库实现可以分成两个层次,在底层通过C++调用SQLite的接口来执行S

Spring Boot入门系列六( SpringBoot 整合thymeleaf)

SpringBoot 整合thymeleaf 一.什么是Thymeleaf模板 Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎.类似JSP,Velocity,FreeMaker等,它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎.与其它模板引擎相比,Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用.它的功能特性如下: @Controller中的方法可以直接返回模板名称,接下来Thyme

SpringBoot学习------SpringBoot使用Thymeleaf模块访问不了静态页面

SpringBoot使用Thymeleaf模块访问不了静态页面 最近学习SpringBoot的过程中使用了Thymeleaf模块引擎,页面发送请求后老是无法显示静态页面,所有的步骤都是参考资料来执行,自我检查好久都没有找到问题的答案,哎呦,我这暴脾气就上来了,一个小页面就想难倒我?那我还怎么找到ONE PIECE? 下面就给大家分享一下我悲惨的心路历程: 要使用Thymeleaf模块引擎,我们首先在pom文件中引入相关依赖如下: 这边我们不需要指定版本,因为SpringBoot默认会使用spri

HTML5进阶段内联标签汇总(小篇)

HTML5进阶段内联标签汇总(小篇) 内联元素,与别人公用一行,但是设置宽高无效.其特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>

JMeter学习-011-JMeter 后置处理器实例之 - 正则表达式提取器(三)多参数获取进阶引用篇

前两篇文章分表讲述了 后置处理器 - 正则表达式提取器概述及简单实例.多参数获取,相应博文敬请参阅 简单实例.多参数获取. 此文主要讲述如何引用正则表达式提取器获取的数据信息.其实,正则表达式提取器获取的数据,均可看做一个变量(单个数据,此处指所需获取的测试相关数据)或数组(多个数据),通过引用变量或者数组的数据,达到应用其数据的目的.下面针对此两种方式进行介绍. 第一种:单数据变量 但数据变量的应用比较简单,同我们日常 shell 脚本引用变量相同,引用样式:引用名称.例如要引用下图中的变量,

【Android的从零单排开发日记】之入门篇(四)——Android四大组件之Activity

在Android中,无论是开发者还是用户,接触最多的就算是Activity.它是Android中最复杂.最核心的组件.Activity组件是负责与用户进行交互的组件,它的设计理念在很多方面都和Web页面类似.当然,这种相似性主要体现在设计思想上.在具体实现方面,Android的Activity组件有自己的设计规范,同时,它能够更简便地使用线程.文件数据等本地资源. 一.Activity 的生命周期 Activity 的生命周期是被以下的函数控制的. 1 public class Activity

【Android的从零单排开发日记】之入门篇(六)——Android四大组件之Broadcast Receiver

广播接受者是作为系统的监听者存在着的,它可以监听系统或系统中其他应用发生的事件来做出响应.如设备开机时,应用要检查数据的变化状况,此时就可以通过广播来把消息通知给用户.又如网络状态改变时,电量变化时都可以通过广播来通知用户.要做比喻的话,广播就像是我们的感官,能够有效且快速的从外界获取信息来反馈给自身. 一.广播的功能和特征 广播的生命周期很短,经过 调用对象—实现onReceive—结束 整个过程就结束了.从实现的复杂度和代码量来看,广播无疑是最迷你的Android 组件,实现往往只需几行代码