4_5.springboot2.x之Web開發RestfulCRUD操作

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">
&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屬性中