11、SpringBoot-CRUD-thymeleaf公共頁面元素抽取
阿新 • • 發佈：2019-02-07
dash 獲取 polyline 行高 email .get cer ont common
thymeleaf公共頁面元素抽取
存在一種現象：兩個文件的代碼只有一部分代碼不一樣
其余的均相同，此時就可以提取公共的代碼去簡化開發
1、抽取公共片段 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 2、引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatename::selector}：模板名::選擇器 ~{templatename::fragmentname}:模板名::片段名3、默認效果： insert的公共片段在div標簽中 如果使用th:insert等屬性進行引入，可以不用寫~{}： 行內寫法可以加上：[[~{}]];[(~{})]
三種引入公共片段的th屬性： th:insert：將公共片段整個插入到聲明引入的元素中 th:replace：將聲明引入的元素替換為公共片段 th:include：將被引入的片段的內容包含進這個標簽中
<footer th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </footer> 引入方式 <div th:insert="footer :: copy"></div> <div th:replace="footer :: copy"></div> <div th:include="footer :: copy"></div> 效果 th:insert： <div> <footer> © 2011 The Good Thymes Virtual Grocery </footer> </div> th:replace： <footer> © 2011The Good Thymes Virtual Grocery </footer> th:include： <div> © 2011 The Good Thymes Virtual Grocery </div>
關於模板名： 1.假設在同一目錄： a.html b.html 此時b用a中的公共片段就是 th:replace="~{a::#selector}" 2.不在同一目錄 commons -a.html b.html commons和b.html在同一級目錄 此時b用a中的公共片段是 th:replace="~{commons/a::#selector}"
實例： 1.dashboard.html
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0"
th:fragment="top"> <a class="navbar-brand col-sm-3 col-md-2 mr-0" >[[${session.user}]]</a> <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> <ul class="navbar-nav px-3"> <li class="nav-item text-nowrap"> <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a> </li> </ul> </nav>
list.html
<!-- 引入公共的模板 -->
<!-- 模板名：會使用默認的thymeleaf的前後配置規則進行解析 -->
<div th:replace="~{dashboard::#selector}"></div>
2.dashboard.html
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="selector">
list.html
<div th:replace="~{dashboard::#selector}"></div>
此時使用的是選擇器
class 用 .
id 用 #
引入片段的時候傳入參數
判斷屬性進行高亮的設置 主要是class屬性active值是否存在<li class="nav-item"> <a class="nav-link active" th:class="${activeUri==‘main.html‘?‘nav‐link active‘:‘nav‐link‘}" href="#" th:href="@{/main.html}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> Dashboard <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path> <polyline points="13 2 13 9 20 9"></polyline> </svg> Orders </a> </li> <li class="nav-item"> <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> Products </a> </li> <li class="nav-item"> <a class="nav-link active" th:class="${activeUri==‘emps‘?‘nav‐link active‘:‘nav‐link‘}" th:href="@{/emps}" href="@{/emps}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> 員工列表 </a> </li>
<div th:replace="~{commons/bar::.sider(activeUri=‘emps‘)}"></div>
前臺接受手臺的數據
public class Employee { private Integer id; private String lastName; private String email; //1 male, 0 female private Integer gender; private Department department; private Date birth; ...} public class Department { private Integer id; private String departmentName; ...}
@Repository public class DepartmentDao { private static Map<Integer, Department> departments = null; static{ departments = new HashMap<Integer, Department>(); departments.put(101, new Department(101, "D-AA")); departments.put(102, new Department(102, "D-BB")); departments.put(103, new Department(103, "D-CC")); departments.put(104, new Department(104, "D-DD")); departments.put(105, new Department(105, "D-EE")); } public Collection<Department> getDepartments(){ return departments.values(); } public Department getDepartment(Integer id){ return departments.get(id); } }
@Repository public class EmployeeDao { private static Map<Integer, Employee> employees = null; @Autowired private DepartmentDao departmentDao; static{ employees = new HashMap<Integer, Employee>(); employees.put(1001, new Employee(1001, "E-AA", "[email protected]", 1, new Department(101, "D-AA"))); employees.put(1002, new Employee(1002, "E-BB", "[email protected]", 1, new Department(102, "D-BB"))); employees.put(1003, new Employee(1003, "E-CC", "[email protected]", 0, new Department(103, "D-CC"))); employees.put(1004, new Employee(1004, "E-DD", "[email protected]", 0, new Department(104, "D-DD"))); employees.put(1005, new Employee(1005, "E-EE", "[email protected]", 1, new Department(105, "D-EE"))); } private static Integer initId = 1006; public void save(Employee employee){ if(employee.getId() == null){ employee.setId(initId++); } employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId())); employees.put(employee.getId(), employee); } public Collection<Employee> getAll(){ return employees.values(); } public Employee get(Integer id){ return employees.get(id); } public void delete(Integer id){ employees.remove(id); } }
@Controller public class EmployeeController { @Autowired EmployeeDao employeeDao; //查詢所有員工返回列表頁面 @GetMapping("/emps") public String list(Model model){ Collection<Employee> emps = employeeDao.getAll(); //將查詢到的數值放在請求域中 model.addAttribute("emps",emps); //目標引擎會自動進行拼串 return "emp/list"; } }前段頁面進行數據的獲取
<table class="table table-striped table-sm"> <thead> <tr> <th>#</th> <th>lastName</th> <th>email</th> <th>gender</th> <th>department</th> <th>birth</th> </tr> </thead> <tbody> <!-- 遍歷emps，取出的數值叫emp--> <tr th:each="emp:${emps}"> <td th:text="${emp.id}"></td> <td>[[${emp.lastName}]]</td> <td th:text="${emp.email}"></td> <td th:text="${emp.gender}==0?‘男‘:‘女‘"></td> <td th:text="${emp.department.departmentName}"></td> <td th:text="${#dates.format(emp.birth,‘yyyy-MM-dd HH:mm‘)}"></td> <td> <button class="btn btn-sm btn-primary">修改</button> <button class="btn btn-sm btn-danger">刪除</button> </td> </tr> </tbody> </table>
11、SpringBoot-CRUD-thymeleaf公共頁面元素抽取