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>

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

  • 相关阅读:
    hdu 3790 最短路径问题
    hdu 2112 HDU Today
    最短路问题 以hdu1874为例
    hdu 1690 Bus System Floyd
    hdu 2066 一个人的旅行
    hdu 2680 Choose the best route
    hdu 1596 find the safest road
    hdu 1869 六度分离
    hdu 3339 In Action
    序列化和反序列化
  • 原文地址:https://www.cnblogs.com/mark5/p/11720505.html
Copyright © 2011-2022 走看看