文章目录
RestfulCRUD（员工列表）
RestfulCRUD：CRUD满足Rest风格；
URI： /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作
| 普通CRUD（uri来区分操作） | RestfulCRUD | |
|---|---|---|
| 查询 | getEmp | emp—GET |
| 添加 | addEmp?xxx | emp—POST |
| 修改 | updateEmp?id=xxx&xxx=xx | emp/{id}—PUT |
| 删除 | deleteEmp?id=1 | emp/{id}—DELETE |
实验的请求架构;
| 实验功能 | 请求URI | 请求方式 |
|---|---|---|
| 查询所有员工 | emps | GET |
| 查询某个员工(来到修改页面) | emp/1 | GET |
| 来到添加页面 | emp | GET |
| 添加员工 | emp | POST |
| 来到修改页面（查出员工进行信息回显） | emp/1 | GET |
| 修改员工 | emp | PUT |
| 删除员工 | emp/1 | DELETE |
1. 员工列表
1.查询所有员工
（1）给员工管理设置超链接，发送请求/emps
（2）请求/emps通过Conteoller层视图解析器到templates/tem/list.html页面，并展示
@Controller
public class EmployeeController {
@Autowired
EmployeeDao employeeDao;
//查询所有员工返回员工列表页面
@GetMapping("/emps")
public String list(Map<String,Object> modelMap){
Collection<Employee> employees = employeeDao.getAll();
modelMap.put("emps",employees);
return "emp/list";
}
}
注意：只要修改dashboard.html中css的引入为thymeleaf，list.html页面的不要修改
我因为修改了导致后面浪费了较长时间
2. thymeleaf公共片段抽取语法
1、抽取公共片段
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
2、引入公共片段
~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名
<div th:insert="~{footer :: copy}"></div>
3、默认效果
insert的公共片段在div标签中
如果使用th:insert等属性进行引入，可以不用写~{}：
如果使用thymeleaf的行内写法加上~{}：[[~{}]];[(~{})]
4、三种引入公共片段的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>
效果
<div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
3. dashboard.html 和 list.html公共页面元素的抽取
将公共片段的代码抽取到templates/commons/bar.html
</head>
<body>
<!--topbar 顶栏公共片段-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0"
th:fragment="topbar">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Company name</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>
<!--sidebar 侧栏公共片段-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar"
id="sidebar">
<div class="sidebar-sticky">
在dashboard.html中引入顶栏和侧栏的公共片段：
<body>
<!--引入topbar-->
<div th:replace="commons/bar::topbar"></div>
<div class="container-fluid">
<div class="row">
<!--引入sidebar-->
<div th:replace="commons/bar::#sidebar"></div>
在list.html中引入顶栏和侧栏的公共片段：
<body>
<!--引入bar.html中抽取的topbar-->
<!--模板名：会使用thymeleaf的前后缀配置规则进行解析-->
<div th:replace="~{commons/bar::topbar}"></div>
<div class="container-fluid">
<div class="row">
<!--引入sidebar-->
<div th:replace="~{commons/bar::#sidebar(activeUri='emps')}"></div>
4. th:class 实现员工管理和Dashboard动态高亮
class属性：class属性的值对应的就是你定义的css的名字，它和class的属性值相对应。
给Dashboard添加动态class：
如果activeUri==‘main.html’，使用class='nav-link active’的css样式
<a th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"
th:href="@{/main.html}">
</a>
在dashboard.html页面中带上activeUri：
<div th:replace="commons/bar::#sidebar(activeUri='main.html')"></div>
给员工管理的添加动态class:
如果activeUri==‘emps’，使用class='nav-link active’的css样式
<a th:class="${activeUri=='emps'?'nav-link active':'nav-link'}"
th:href="@{/emps}">
</a>
在list.html页面中带上activeUri：
<div th:replace="~{commons/bar::#sidebar(activeUri='emps')}"></div>
5. 遍历集合显示员工信息
<body>
<div th:replace="~{commons/bar::topbar}"></div>
<div class="container-fluid">
<div class="row">
<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">
<!--添加员工添加按钮-->
<h2><button class="btn btn-sm btn-success">员工添加</button></h2>
<div class="table-responsive">
<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>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="emp:${emps}">
<td th:text="${emp.id}"></td>
<td th:text="${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')}"></td>
<!--添加编辑和删除按钮-->
<td>
<button class="btn btn-sm btn-primary">编辑</button>
<button class="btn btn-sm btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
2. 员工添加
1. 来到员工添加页面
1.将员工添加按钮变成超链接，提交请求路径：
<!--员工添加为get方式提交，超链接本身就是get方式，因此不用谢提交方式-->
<h2><a class="btn btn-sm btn-success" th:href="@{/emp}">员工添加</a></h2>
2.编写Controller层处理请求：
//来到员工添加页面
@GetMapping("/emp")
public String toAddPage(Map<String,Object> modelMap){
//查询出所有的部门在页面显示
Collection<Department> departments = departmentDao.getDepartments();
modelMap.put("depts",departments);
return "emp/add";
}
3.修改add.html页面：
<form>
<div class="form-group">
<label>LastName</label>
<input type="text" class="form-control" placeholder="zhangsan">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="zhangsan@qq.com">
</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">
<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">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control">
<!--提交的是部门id，根据部门id显示部门名称信息-->
<option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}"></option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" class="form-control" placeholder="zhangsan">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>
效果：
补充知识：
问题：option标签中属性value的值和标签体中的内容有何区别？
2. 点击添加按钮完成员工添加功能
1.设置表单提交的请求路径，添加的请求方式为post方式：
<form th:action="@{/emp}" method="post">
2.编写Controller层处理请求：
//员工添加功能
@PostMapping("/emp")
public String addEmp(Employee employee){
employeeDao.save(employee);
//来到员工列表页面
//redirect:重定向一个地址（request）
//forward：转发到一个地址（response）
return "redirect:/emps";
}
3.如何获取请求参数的值绑定到Employee对象的属性上呢？
SpringMvc可以实现自动封装，前提是前端传递的参数名和 JavaBean对象的属性名必须一致，否则就是null
因此给没给要提交的请求参数加上name属性，并且属性名称要和JavaBean对象的属性名称一致，这个就可以从后端直接获取到前端提交的请求参数的值了。
<form th:action="@{/emp}" method="post">
<div class="form-group">
<label>LastName</label>
<input type="text" name="lastName" class="form-control" placeholder="zhangsan">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="zhangsan@qq.com">
</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">
<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">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<!--提交的是部门id，根据部门id显示部门名称信息-->
<option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}"></option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" class="form-control" name="birth" placeholder="zhangsan">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>
4.修改添加生日时的日期格式：
系统默认的日期格式为2011/12/12，可以在application.properties文件中自己指定想要的日期格式：
# 设置日期格式
spring.mvc.date-format=yyyy-MM-dd
补充知识：
问题1：标签中的name属性有什么用？
例子：
<form action="/example/html/form_action.asp" method="get">
<p>Name: <input type="text" name="fullname" /></p>
<p>Email: <input type="text" name="email" /></p>
<input type="submit" value="Submit" />
</form>
提交的参数为：
fullname=zhangsan&email=zhangsan.com
问题2：如何实现提交的请求参数和JavaBean对象的属性进行自动封装？
注意：name属性的值为请求参数的名称
<form action="book" method="post">
书名： <input type="text" name="bookName"/><br>
作者： <input type="text" name="author"/><br>
库存： <input type="text" name="stock"/><br>
价格： <input type="text" name="price"/><br>
销量： <input type="text" name="sales"/><br>
<input type="submit" value="添加一本图书"/>
</form>
javaBean对象以及里面的属性，请求参数要和属性名一致
public class Book {
private String bookName;
private String author;
private Integer stock;
private Integer price;
private Integer sales;
}
@Controller
public class PojoController {
@RequestMapping("/book")
public String test(Book book){
System.out.println("我要保存的图书:"+book);
return "success";
}
}
如果使用get方式提交，会看到提交的参数为：
bookName=jianai&author=hh&stock=12&price=34&sales=45
3. 员工修改
1. 来到员工修改页面
1.在list.html页面设置点击编辑的请求：
<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
2.在Controller处理请求：
//来到员工修改页面
@GetMapping("/emp/{id}")
public String toEditPage(@PathVariable("id")Integer id,Map<String,Object> modelMap){
Employee employee = employeeDao.get(id);
modelMap.put("emp",employee);
//页面要显示所有我的部门列表
Collection<Department> departments = departmentDao.getDepartments();
modelMap.put("depts",departments);
//回到修改页面（即使修改页面也是添加页面）
return "emp/add";
}
3.修改修改页面add.html：
<!--区分是员工添加还是员工修改,员工修改页面emp!=null-->
<form th:action="@{/emp}" method="post">
<!--发送put请求修改员工数据-->
<!--1.SpringMvc中配置HiddenHTTPMethodFilter(SpringBoot已经配置好了)
2.页面创建一个post表单
3.创建一个input选项，name="_method";值value就是我们制定的跟你去方式-->
<input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
<input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}"/>
<div class="form-group">
<label>LastName</label>
<input type="text" name="lastName" class="form-control" th:value="${emp!=null}?${emp.lastName}">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" 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>
<select class="form-control" name="department.id">
<!--提交的是部门id，根据部门id显示部门名称信息-->
<option th:selected="${emp!=null}?${dept.id==emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}"></option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" class="form-control" name="birth" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy-MM-dd')}">
</div>
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
</form>
效果：
补充：
问题1：inpu标签中的value属性？
<form action="/example/html/form_action.asp" method="get">
First name: <input type="text" name="fname" value="George" /><br />
Last name: <input type="text" name="lname" value="Bush" /><br />
<input type="submit" value="Submit form" />
</form>
提交后：name提交的请求参数 名称，value代表提交的请求参数的值
fname=George&lname=Bush
问题2 ：select标签中的selected属性？
<select>
<option>Volvo</option>
<option selected="selected">Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
2. 点击修改按钮完成员工修改功能
//员工修改
@PutMapping("/emp")
public String updateEmployee(Employee employee){
System.out.println(employee);
employeeDao.save(employee);
return "redirect:/emps";
}
遗留问题：在控制台打印employee对象，但是却打印不出来，修改数据能修改成功
原因：原来是springboot2.2.x后默认不支持put、delete请求。
需在配置文件里手动配置：
spring.mvc.hiddenmethod.filter.enabled=true
8. 员工删除
<form th:action="@{/emp/}+${emp.id}" method="post">
<input type="hidden" name="_method" value="delete"/>
<button type="submit" class="btn btn-sm btn-danger">删除</button>
</form>
//员工删除
@DeleteMapping("/emp/{id}")
public String deleteEmp(@PathVariable("id")Integer id){
employeeDao.delete(id);
return "redirect:/emps";
}
报错405：
原因：原来是springboot2.2.x后默认不支持put、delete请求。
需在配置文件里手动配置：
spring.mvc.hiddenmethod.filter.enabled=true
692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
