Spring Boot入门 (十九) 之 CURD实验员工列表的公共页抽取以及公共代码的抽取-阿里云开发者社区

Spring Boot入门 (十九) 之 CURD实验员工列表的公共页抽取以及公共代码的抽取

2023-08-12 90

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Spring Boot入门 (十九) 之 CURD实验员工列表的公共页抽取以及公共代码的抽取

1.员工列表页

前边我们实现了登录功能,并且登陆进去进去了后台管理页面

下面我们要实现的是,点击Customers就出来员工列表也就是list.html

我们先找到Customers的位置,并把他的href跳转改了

由于我们使用的是restfulCURD,所以可以这么写

记得在HTML里边写上thymeleaf的约束头

下边我们要写controller来实现路由

我们先把list.html放到emps包里边方便管理

然后新建EmployeeController.java类,

package com.zhanshen.springbootweb.controller;
import com.zhanshen.springbootweb.dao.EmployeeDao;
import com.zhanshen.springbootweb.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 {
    /**
     * 这个是员工的Dao层,查询所有员工,之前的代码我们引入了,里边有查询的方法
     */
    @Autowired
    EmployeeDao employeeDao;
    //查询所有员工
    @GetMapping("/emps")
    public String list(Model model) {
        /**
         * 查询得到所有的员工,然后传入Model ,用于把查询得到的查询所有的数据放到请求域中,最后返回到list.html里边
         */
        Collection<Employee> employees = employeeDao.getAll();
        model.addAttribute("emps", employees);
        return "emps/list";
    }
}

这样就可以跳转到list页面

2.公共代码片段的抽取

我们会发现list的侧导航栏和头部导航栏的内容是一样的,所以我们可以让他们去共用一套代码

这里的头部和侧栏都是公用的,我们找到他们的代码

,先来看头部的栏目

代码是body里边的一个叫做<nav>标签的导航栏

通过th:fragment="xxx"可以把它作为公共的模板,然后我们在其他地方引入

利用th:insert"~{模板名 :: 模块名}"来引入

会发现,我们的div里边就是我们引入的模块

当然我们发现,我们在原来的nav标签上边又套了一层div这并不是很友好,所以我们还有其他的两种写法,这三种写法分别如下

th:insert"~{模板名:: 模块名}"

th:replace"~{模板名:: 模块名}"

th:include"~{模板名:: 模块名}"

第一个的用法我们看到了就是在你所写的标签里边插入,这样会多出一层标签,下面两个用法如下

<footer th:fragment="copy">
    &copy; 2011 The Good Thymes Virtual Grocery
</footer>

<body>
...
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>
</body>

我们比较效果如下

<body>
...
<div>
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>
</body>