zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    常用linux命令及其设置
    shell脚本编写步骤及其常用命令和符号
    浏览器访问php脚本通过sendmail用mail函数发送邮件
    windows server 定期备份数据库脚本
    图片垂直水平居中
    "!function",自执行函数表达式
    jQuery(function(){})与(function(){})(jQuery) 的区别
    在Windows Server 2019通过Docker Compose部署Asp.Net Core
    Redis集群同步问题
    webapi跨域使用session
  • 原文地址:https://www.cnblogs.com/mark5/p/11720505.html
Copyright © 2011-2022 走看看