1)、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 |
2)、實驗的請求架構
實驗功能 | 請求URI | 請求方式 |
---|---|---|
查詢所有員工 | emps | GET |
查詢某個員工(來到修改頁面) | emp/1 | GET |
來到添加頁面 | emp | GET |
添加員工 | emp | POST |
來到修改頁面(查出員工進行信息回顯) | emp/1 | GET |
修改員工 | emp | PUT |
刪除員工 | emp/1 | DELETE |
1、CRUD-員工列表
thymeleaf公共頁面元素抽取
1、抽取公共片段
<div th:fragment="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:將被引入的片段的內容包含進這個標籤中
引入片段的時候傳入參數:
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active"
th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"
href="#" th:href="@{/main.html}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<!--引入側邊欄;傳入參數-->
<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
員工列表:
<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 th:href="@{/emp/}+${emp.id}" class="btn btn-sm btn-primary">編輯</a>
<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">刪除</button>
</td>
</tr>
controller
@Controller
public class EmpController {
@Autowired
private EmployeeDao employeeDao;
@Autowired
private DepartmentDao departmentDao;
/*
* @Author: jiatp
* Description:查詢員工返回列表頁面
*/
@GetMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
//放在作用域中
model.addAttribute("emps",employees);
//thymeleaf默認就會拼接串 classpath:/templates/ xxx.html
return "emp/list";
}
2、CRUD-員工添加
添加頁面的展示:
/*
* @Author: jiatp
* Description:員工添加頁面的顯示
*/
@GetMapping("/emp")
public String toAddPage(Model model){
//查出所有的部門
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
//來到添加頁面
return "emp/add";
}
添加的頁面:
<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="[email protected]">
</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">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</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>
注意:提交的數據格式不對:生日:日期;
2017-12-12;2017/12/12;2017.12.12;
日期的格式化;SpringMVC將頁面提交的值需要轉換爲指定的類型;
2017-12-12—Date; 類型轉換,格式化;
默認日期是按照/的方式;
可以在springmvc配置類中添加實現日期格式化方法:
@Configuration//擴展springmvc功能
public class MyMvcConfig implements WebMvcConfigurer {
@Override
public void addFormatters(FormatterRegistry registry) {
registry.addFormatter(new DateFormatter("yyyy-MM-dd"));
}
}
或者properties中添加:
application.properties中添加
spring.jackson.date-format=yyyy-MM-dd
controller添加的方法:
/*
* @Author: jiatp
* Description:員工添加
*/
@PostMapping("/emp")
public String addEmp(Employee employee){
//打印一下員工信息
System.out.println(employee);
employeeDao.save(employee);
//這裏不能用/emps,thymeleaf默認會將該值進行模板引擎下查找,
//redirect 重定向到一個地址,/帶邊當前項目路徑 forward:表示轉發到一個地址
return "redirect:/emps";
}
3、CRUD-員工修改
修改員工頁面:查出當前員工並且進行回顯
/*
* @Author: jiatp
* Description:來到修改頁面,查出當前員工在頁面進行回顯
*/
@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";
}
重用add.html(修改和添加頁面展示)
<main role="main" th:href="@{/emp}" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<form th:action="@{/emp}" method="post">
<!--請求方式:post:請求員工添加 put:員工的修改-->
<!--
1.配置請求方式:springmvc中配置hiddenHttpMethodFilter;將請求轉換成指定的方式
2.創建一個post頁面表單
3.創建一個input項,name=_method,值就是指定的方式
-->
<input type="hidden" name="_method" value="put" th:if="${emp!=null}">
<input type="hidden" th:value="${emp.id}" name="id" th:if="${emp!=null}">
<div class="form-group">
<label>LastName</label>
<input type="text" name="lastName" class="form-control" th:value="${emp!=null}?${emp.lastName}" placeholder="zhangsan">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" th:value="${emp!=null}?${emp.email}" placeholder="[email protected]">
</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" th:checked="${emp!=null}?${emp.gender==1}" 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" th:checked="${emp!=null}?${emp.gender==0}" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<option th:value="${dept.id}" th:selected="${emp!=null}?${emp.department.id==dept.id}" th:each="dept:${depts}">[[${dept.departmentName}]]</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" name="birth" class="form-control" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd')}" placeholder="zhangsan">
</div>
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
</form>
注意:<請求方式:post:請求員工添加 put:員工的修改
springmvc中:
1.配置請求方式:springmvc中配置hiddenHttpMethodFilter;將請求轉換成指定的方式(springboot已配置好)
2.創建一個post頁面表單
3.創建一個input項,name=_method,值就是指定的方式
<input type="hidden" name="_method" value="put" th:if="${emp!=null}">
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
區分修改和添加功能:如果emp是null則是添加,反之爲修改;修改和添加按鈕:
員工修改的controller:
/*
* @Author: jiatp
* Description:員工的修改
*/
@PutMapping("/emp")
public String updateEmployee(Employee employee){
System.out.println("修改的員工數據"+employee);
employeeDao.save(employee);
return "redirect:/emps";
}
4、CRUD-員工刪除
刪除按鈕:
<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">刪除</button>
<form id="deleteEmpForm" method="post">
<input type="hidden" name="_method" value="delete"/>
</form>
<script>
$(".deleteBtn").click(function(){
//刪除當前員工的
$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
return false;
});
</script>
點刪除按鈕時 每一行添加自定義屬性attr="del_uri=@{/emp/}+${emp.id},用js提交表單,將自定義的屬性添加到form表單action屬性中