前面已经实现了登录拦截器和国际化。下面员工列表的增删改查

1.公共元素的抽取

我们登录成功后进入主页面以后，可以看到左侧还有上侧的页面元素基本一样的。不管我们选择哪个功能，变得知识中间的那一块。那么我们就应该把公共的抽取出来作为公用的一部分，让其他页面都可以用，也增加了我们开发的效率

image.png

根据Thymeleaf官方文档：

1、抽取公共片段
<div th:fragment="copy">
&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">
&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>

效果
<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>

在项目中的应用
1.将公共的topbar和sidebar抽取出来；

image.png

2.在其他页面中引入；

image.png

3.高亮问题
这里我们还会遇到一个问题就是，如下图：

image.png

我们知道我们如果点第一个框，第一个框就会高亮，点第二个第二个就会高亮；这是由于 active这个class造成的（做过前端的朋友应该知道）

image.png

那么怎样可以动态到选择哪个页面，哪个高亮呢？
我们用th:class = "" "标签
在bar.html中定义一个变量,当我们跳转到main.html中的时候把这个class的值也带过。看下图：

image.png

这段代码的意思是:定义了一个activeUri的值,如果是main.html的话，值就是nav-link active,否则为nav-link;
在dashboard.html中引入的时候同时指定参数

image.png

这样就能解决高亮问题了~

2.实现员工添加

添加页面
注意我们这里用的th:action标签

image.png

    <form th:action="@{/emp}" method="post">
                        <!--发送put请求修改员工数据-->
                        <!--
                        1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自动配置好的）
                        2、页面创建一个post表单
                        3、创建一个input项，name="_method";值就是我们指定的请求方式
                        -->
                        <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
                        <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">
                        <!--put请求方式修改-->
                        <div class="form-group">
                            <label>LastName</label>
                            <input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input name="email" type="email" class="form-control" placeholder="aaaaa@163.com" th:value="${emp!=null}?${emp.email}">
                        </div>
                        <div class="form-group">
                            <label>Gender</label><br/>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp!=null}?${emp.gender==1}">
                                <label class="form-check-label">男</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender==0}">
                                <label class="form-check-label">女</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>department</label>
                            <!--提交的是部门的id-->
                            <select class="form-control" name="department.id">
                                <option th:selected="${emp!=null}?${dept.id == emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Birth</label>
                            <input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}">
                        </div>
                        <button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
                    </form>

这里可能有些代码看不懂，这里先不解释，下面会提到

Controller层

//跳转到员工页面
    @PostMapping(value = "/emp")
    public String toAddPage(Model model) {
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("depts",departments);
        return "emp/add";
    }

    //员工添加
    //SpringMVC自动将请求参数和入参对象的属性进行一一绑定；要求请求参数的名字和javaBean入参的对象里面的属性名是一样的
    @PostMapping("/emp")
    public String addEmp(Employee employee){
        //来到员工列表页面

        System.out.println("保存的员工信息："+employee);
        //保存员工
        employeeDao.save(employee);
        // redirect: 表示重定向到一个地址  /代表当前项目路径
        // forward: 表示转发到一个地址
        return "redirect:/emps";
    }

3.实现员工修改

这里修改的话我们一般应该再用一个界面来实现这个功能，但是我们可以采取另外一种方式，就是修改添加都合在一个表单里面；
关键在于这个

image.png

还有这个，这段代码的意思是当emp!=null的时候我们就会取emp里面的值，否则的话则为空

image.png

Controller

 //来到修改页面，查出当前员工，在页面回显
    @GetMapping("/emp/{id}")
    public String toEditPage(@PathVariable("id") Integer id,Model model){
        Employee employee = employeeDao.get(id);
        model.addAttribute("emp",employee);

        //页面要显示所有的部门列表
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("depts",departments);
        //回到修改页面(add是一个修改添加二合一的页面);
        return "emp/add";
    }

    //员工修改；需要提交员工id；
    @PutMapping("/emp")
    public String updateEmployee(Employee employee){
        System.out.println("修改的员工数据："+employee);
        employeeDao.save(employee);
        return "redirect:/emps";
    }

4.员工删除

<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>
        <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
        <button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
    </td>
</tr>


<script>
    $(".deleteBtn").click(function(){
        //删除当前员工的
        $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
        return false;
    });
</script>

Controller

  //员工删除
    @DeleteMapping("/emp/{id}")
    public String deleteEmployee(@PathVariable("id") Integer id){
        employeeDao.delete(id);
        return "redirect:/emps";
    }

八.SpringMVC和Thymeleaf的简单应用（2）；员工列表CRUD

八.SpringMVC和Thymeleaf的简单应用（2）；员工列表CRUD

1.公共元素的抽取

2.实现员工添加

3.实现员工修改

4.员工删除