Thymeleaf 结合SpringBoot 的 CRUD-员工列表

Thymeleaf 结合SpringBoot 的 CRUD-员工列表

 

• 实验要求：

1）、RestfulCRUD：CRUD满足Rest风格；

 

利用2）、实验的请求架构;

URI： /资源名称/资源标识 

 

	普通CRUD（uri来区分操作）	RestfulCRUD
查询	getEmp	emp---GET
添加	addEmp?xxx	emp---POST
修改	updateEmp?id=xxx&xxx=xx	emp/{id}---PUT
删除	deleteEmp?id=1	emp/{id}---DELETE

2）、实验的请求架构

实验功能	请求URI	请求方式
查询所有员工	emps	GET
查询某个员工(来到修改页面)	emp/{id}	GET
来到添加页面	emp	GET
添加员工	emp	POST
来到修改页面（查出员工进行信息回显）	emp/1	GET
修改员工	emp	PUT
删除员工	emp/{id}	DELETE

• 这里主要展示添加和修改两个动能~
• 页面展示：

 案例中将员工添加和员工修改（编辑）的页面合二为一，即使用同一个add.html 页面来显示

• 通过employee是否为空进行判断是添加操作还是修改操作

• th:if="${employee!=null}"

• th:value="${employee!=null}?${employee.lastName}"

<!--引入侧边栏-->
				<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<!--需要区分是添加还是修改-->
					<form th:action="@{/emp}" method="post">
						<!--若是修改：点击修改，发送put请求，同时携带id传到后端controller-->
						<input type="hidden" name="_method" value="put" th:if="${employee!=null}">
						<!--th:if成立，才会生成id-->
						<input type="hidden" name="id" th:if="${employee!=null}" th:value="${employee.id}">
						<div class="form-group">
							<label>LastName</label>
							<input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${employee!=null}?${employee.lastName}">
						</div>
						<div class="form-group">
							<label>Email</label>
							<input name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com" th:value="${employee!=null}?${employee.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="${employee!=null}?${employee.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="${employee!=null}?${employee.gender==0}">
								<label class="form-check-label">女</label>
							</div>
						</div>
						<div class="form-group">
							<label>department</label>
							<select class="form-control" name="department.id">
								<!--每一个th:each都会生成一个option标签-->
								<option th:value="${dept.id}" th:each="dept:${departments}" th:text="${dept.departmentName}" th:selected="${employee!=null}?${employee.department.id == dept.id}">1</option>
							</select>
						</div>
						<div class="form-group">
							<label>Birth</label>
												<!--使用date工具-->
							<input name="birth" th:value="${employee!=null}?${#dates.format(employee.birth, 'yyyy-MM-dd')}" type="text" class="form-control" placeholder="zhangsan">
						</div>
						<button type="submit" class="btn btn-primary" th:text="${employee!=null}?'修改':'添加'">添加</button>
					</form>

• html代码解析 

• 需要注意一点的是：修改操作，需要通过

  type="hidden"

  来发送put请求,同时携带id传到后端controller

• <!--若是修改：点击修改，发送put请求，同时携带id传到后端controller-->
  <input type="hidden" name="_method" value="put" th:if="${employee!=null}">
  <!--th:if成立，才会生成id-->
  <input type="hidden" name="id" th:if="${employee!=null}" th:value="${employee.id}">

• 配置文件也需要添加

  spring.mvc.hiddenmethod.filter.enabled=true

  才能确保生效。

• 我存在的问题如下：

• 进行员工修改时，开始用的是重定向

  return "redirect:/emps";

  发现500错误，提示重定向"redirect:/emps"失败，于是采用页面跳转的方式，跳转到 templates/emp/list.html 页面，就相当于多做了一遍查询。
   

//员工修改
    @PutMapping("/emp")
    public String updateEmp(Employee employee,Model model) {
        System.out.println("修改之后的员工：" + employee);
        ed.save(employee);
        Collection<Employee> employees = ed.getAll();
        model.addAttribute("emps", employees);
        return "emp/list";
    }

 

•  另附上

  查询所有员工返回列表页面

  的代码：

• //查询所有员工返回列表页面
      @GetMapping("/emps")
      public String list(Model model) {
          Collection<Employee> employees = ed.getAll();
          model.addAttribute("emps", employees);
          //thymeleaf默认会拼串 classpath:/templates/ .html
          return "emp/list";
      }