11.1 模板布局

---

th:fragment="模板的名字" 可以把一块标签，模板/组件化。然后让其它的页面进行复用。

th:insert="~{资源文件名::模板的名字}"：插入一个资源下声明的模板。

th:replace="~{资源文件名::模板的名字}"：替换当前这个标签为模板。

所以我们可以尝试抽取 出 导航栏和侧边栏，进行复用。并且 还有一个好处。那就是 在 复用的时候可以传参。

我们来看下图，发现确实是 可以 传参。那么为啥要用到传参呢？
答：因为我们可以通过参数 知道 点击的是 哪个 栏目

在不同的 页面 进行 复用的时候，可以 传递 该参数 不同的值。表示现在的页面是谁。

下图的操作，已经实现了 点击某个栏目高亮的需求。

---

11.2 员工功能的实现

1. 查询功能

• 编写 Controller

package top.muquanyu.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import top.muquanyu.dao.EmployeeDao;
import top.muquanyu.pojo.Employee;

import java.util.Collection;

@Controller
public class EmployeeController {
    @Autowired
    EmployeeDao employeeDao;

    @RequestMapping("/emps")
    public String list(Model model){
        Collection<Employee> employees = employeeDao.getAll();
        model.addAttribute("emps",employees);
        return "emp/list";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 编写 list.html 可以直接通过 ${...} 取到值 和 th:each="emp:${emps} 进行遍历。

---

2. 添加员工

思路：按钮点击提交、跳转到添加的页面、然后添加员工、返回到员工页面。

我们只能 在这个地方 传入 一个 id。然后 通过 这个 id 拿到 相关的 信息。

这个地方就有点儿 意思了，我们 deparment 在这个页面 是怎么 传入前端的呢？答：肯定是 访问这个页面的时候 有一个 请求呀，然后 存储的 departments。

    @GetMapping("/emp")
    public String toAddpage(Model model){
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("departments",departments);
        return "/emp/add";
    }
1
2
3
4
5
6

我们的 Controller 其实 也可以 拿到 这个id 去 获取到 完整的 department

    @PostMapping("/emp")
    public String add(Employee employee){
        employee.setDepartment(departmentDao.getDepartmentByID(employee.getDepartment().getId()));
        employeeDao.addEmployee(employee);
        return "redirect:/emps";
    }
1
2
3
4
5
6

我们可能用到的 时间格式是 前端的这个格式：yyyy-MM-dd，导致我们 无法接收到 date 的数据。所以要进行 日期格式化。

日期格式化 还可以 在 配置文件中 实现。

# 时间日期格式化
spring.mvc.format.date=yyyy-MM-dd

1
2
3

---

3. 更新员工

• 用 thymeleaf 尝试 Restful 传参

直接用 加号 连接 就可以，爆红 没啥问题。

<td>
	<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑a>
	<a class="btn btn-sm btn-danger" th:href="@{/delemp/}+${emp.getId()}">删除a>
td>
1
2
3
4

    @RequestMapping("/emp/{id}")
    public String toUpdateEmp(@PathVariable("id") Integer id, Model model){
        Employee employee = employeeDao.getEmployeeByID(id);
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("emp",employee);
        model.addAttribute("departments",departments);
        return "emp/update";
    }
1
2
3
4
5
6
7
8

    // 修改员工通过 id
    public void updateEmployeeByID(Integer id,Employee employee){
        employees.put(id, employee);
    }
1
2
3
4

写这个 修改的 Controller

    @PostMapping("/updateEmp")
    public String updateEmp(Employee employee){
        employee.setDepartment(departmentDao.getDepartmentByID(employee.getDepartment().getId()));
        employeeDao.updateEmployeeByID(employee.getId(),employee);

        return "redirect:/emps";
    }
1
2
3
4
5
6
7

4. 删除员工

    @RequestMapping("/delemp/{id}")
    public String deleteEmp(@PathVariable("id") Integer id){
        employeeDao.deleteEmployeeByID(id);
        return "redirect:/emps";
    }
1
2
3
4
5

5. error 404 页面

404 页面，在 SpringBoot 当中 配置起来 非常非常的 简单！

直接 在 template/error 目录下 有个 404.html 文件就行了。它会自动配置。

6. 注销 的编写

    @RequestMapping("/user/logout")
    public String logout(HttpSession session){
        session.removeAttribute("userInfo");
        return "redirect:/main.html";
    }
1
2
3
4
5

---

11.3 谈一谈所谓的 WEB 应用该怎么开发

我们其实 用 Java 开发 WEB 应用，只需要解决三个问题！

SpringBoot 框架的使用 + 前端 + Java 后端 + 数据库

• SpringBoot 框架：只要 会 使用 MVC 的 Controller，和拓展 MVC 的 视图解析器、拦截器、国际化 的配置就可以了。

• 前端：html + css + js 基础三大件、thymeleaf 的使用、前端的框架 Vue+ElmentUI、Bootstrap、Layui、semantic-ui（但是大多数开发个小项目，其实直接用 现成的 原生态 前端的模板文件就可以了！）

这里 推荐 模板之家

• Java 后端：这一部分 就是考验 你的 Java SE 能力，如果这部分能力不足，那肯定 是 不行的。否则 你连 最基本的 代码 都写不明白。。

• 数据库：设计一个数据库（实际开发中，这是一个难点），然后 可以 用 JDBC、也可以用 一些 数据库框架mybatis 来操纵这个数据库。

• 如果要是 单独的就光是 写 接口的话，那简单的不得了。直接 用 @RestController 注解即可。然后 用 JSON 的库，把 Java 的 类型变量、数组集合、对象 都转为 JSON 数据 返回给页面即可。

建议入手的第一个项目的技术栈：

X-admin 前端 + MySQL 数据库 + SpringBoot + Mybatis