Day35——员工列表-公共页抽取

小灰灰 2023-02-25 02:12 19阅读 0赞

### 文章目录 ###

*  一. 回顾
 *  二. 抽取公共代码
 *   *  2.1 抽取代码语法
     *  2.2 引入公共代码的语法
     *  2.3 例子
 *  三. 员工列表公共页抽取
 *   *  3.1 需求
     *  3.2 效果
     *  3.3 步骤

# 一. 回顾 #

前面学习了[Day34——Restful实验要求][Day34_Restful]，今天学习公共页抽取

# 二. 抽取公共代码 #

## 2.1 抽取代码语法 ##

1.  `th:fragment="片段名"`，片段名随意取。
2.  在需要抽取公共代码的标签里，声明id属性，比如`<nav id="topbar">`

## 2.2 引入公共代码的语法 ##

**语法：**`th:insert="~{ 模板名::片段名}"`或`th:insert="~{模板名::选择器}"`。其中`~{}`可以省略不写

**有3种引入：**

1.  `th:insert="片段名"`，它将公共代码放入到一对`<div>`中，因此使用这种有时会给css布局带来影响
2.  `th:replace="片段名"`，它将声明引入的元素替换为公共片段（即不会加在`<div>`中的`th:fragment`）
3.  `th:include="片段名"`，把声明引入的元素 的标签去掉，然后将声明引入的元素 的内容包含进`<div>`中

模板名根据thymeleaf的前后缀配置规则进行解析，比如在templates文件夹的dashboard.html中抽取公共代码，那么引入的时候就是`th:insert=“~{ dashboard::片段名或选择器}”`

## 2.3 例子 ##

2种声明公共代码方法：

<footer th:fragment="copy">
       © 2020 xxx shangcheng
    </footer>
    
    <footer id="foot">
       © 2020 xxx shangcheng
    </footer>

3种引入公共代码方法：假设前面声明的公共代码在footer.html中

<div th:insert="footer::copy"></div>
    <div th:replace="footer::copy"></div>
    <div th:include="footer::copy"></div>
    
    <div th:insert="footer::#foot"></div>
    <div th:replace="footer::#foot"></div>
    <div th:include="footer::#foot"></div>

引入的效果：

<div>
       <footer>
       © 2020 xxx shangcheng
       </footer>
    </div>
    
       <footer>
       © 2020 xxx shangcheng
       </footer>
    
    <div>
       © 2020 xxx shangcheng
    </div>

# 三. 员工列表公共页抽取 #

## 3.1 需求 ##

点击dashboard.html的侧边栏的员工管理能跳转到list.html，并抽取dashboard.html的顶部栏以及侧边栏的公共代码，在list.html中引入

## 3.2 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]

## 3.3 步骤 ##

设置“员工管理”的请求地址为`@{/emps}`

写controller，使得点击dashboard.html的侧边栏的员工管理能跳转到list.html，如下：

package com.atguigu.springboot.controller;
    
    import com.atguigu.springboot.dao.EmployeeDao;
    import com.atguigu.springboot.entities.Employee;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    
    import java.util.Collection;
    
    @Controller
    public class EmployeeController { 
    
        @Autowired
        EmployeeDao employeeDao;
    
        @GetMapping(value="/emps")
        public String list(Model model){ 
            Collection<Employee> employees = employeeDao.getAll();
            model.addAttribute("emps", employees);
            return "emp/list";
        }
    }

抽取顶部栏以及侧边栏，如下：

在list.html删除公共代码片段，并引入公共代码，如下：

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

每次修改完html页面，都可以按ctrl+F9来编译，使得无需重启程序就可以刷新页面

[Day34_Restful]: https://blog.csdn.net/qq_40634846/article/details/107242392
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: /images/20230209/54c0bffb880043b3b5ca42c6359cbb9a.png