實驗要求:
1)、RestfulCRUD:CRUD知足Rest風格;
URI: /資源名稱/資源標識 HTTP請求方式區分對資源CRUD操做
2)、實驗的請求架構
效果圖:
3)、員工列表:
thymeleaf公共頁面元素抽取html
一、抽取公共片斷 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 二、引入公共片斷 <div th:insert="~{footer :: copy}"></div> ~{templatename::selector}:模板名::選擇器 ~{templatename::fragmentname}:模板名::片斷名 三、默認效果: insert的公共片斷在div標籤中 若是使用th:insert等屬性進行引入,能夠不用寫~{}: 行內寫法能夠加上:[[~{}]];[(~{})];
三種引入公共片斷的th屬性:java
th:insert:將公共片斷整個插入到聲明引入的元素中web
th:replace:將聲明引入的元素替換爲公共片斷json
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>
引入片斷的時候傳入參數:架構
<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>
6)、CRUD-員工添加
添加頁面app
<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@atguigu.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"> <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; 類型轉換,格式化;
默認日期是按照/的方式;
7)、CRUD-員工修改
修改添加二合一表單ide
<!--須要區分是員工修改仍是添加;--> <form th:action="@{/emp}" method="post"> <!--發送put請求修改員工數據--> <!-- 一、SpringMVC中配置HiddenHttpMethodFilter;(SpringBoot自動配置好的) 二、頁面建立一個post表單 三、建立一個input項,name="_method";值就是咱們指定的請求方式 --> <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 name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}"> </div> <div class="form-group"> <label>Email</label> <input name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com" 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> <!--提交的是部門的id--> <select class="form-control" name="department.id"> <option th:selected="${emp!=null}?${dept.id == emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option> </select> </div> <div class="form-group"> <label>Birth</label> <input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"> </div> <button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button> </form>
8)、CRUD-員工刪除svg
<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 class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">編輯</a> <button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">刪除</button> </td> </tr> <script> $(".deleteBtn").click(function(){ //刪除當前員工的 $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit(); return false; }); </script>
默認效果:
1)、瀏覽器,返回一個默認的錯誤頁面,瀏覽器發送請求的請求頭:
2)、若是是其餘客戶端,默認響應一個json數據
原理:
能夠參照ErrorMvcAutoConfiguration;錯誤處理的自動配置;post
給容器中添加了如下組件
一、DefaultErrorAttributes:
幫咱們在頁面共享信息; @Override public Map<String, Object> getErrorAttributes(RequestAttributes requestAttributes, boolean includeStackTrace) { Map<String, Object> errorAttributes = new LinkedHashMap<String, Object>(); errorAttributes.put("timestamp", new Date()); addStatus(errorAttributes, requestAttributes); addErrorDetails(errorAttributes, requestAttributes, includeStackTrace); addPath(errorAttributes, requestAttributes); return errorAttributes; }
二、BasicErrorController:處理默認/error請求
@Controller @RequestMapping("${server.error.path:${error.path:/error}}") public class BasicErrorController extends AbstractErrorController { @RequestMapping(produces = "text/html")//產生html類型的數據;瀏覽器發送的請求來到這個方法處理 public ModelAndView errorHtml(HttpServletRequest request, HttpServletResponse response) { HttpStatus status = getStatus(request); Map<String, Object> model = Collections.unmodifiableMap(getErrorAttributes( request, isIncludeStackTrace(request, MediaType.TEXT_HTML))); response.setStatus(status.value()); //去哪一個頁面做爲錯誤頁面;包含頁面地址和頁面內容 ModelAndView modelAndView = resolveErrorView(request, response, status, model); return (modelAndView == null ? new ModelAndView("error", model) : modelAndView); } @RequestMapping @ResponseBody //產生json數據,其餘客戶端來到這個方法處理; public ResponseEntity<Map<String, Object>> error(HttpServletRequest request) { Map<String, Object> body = getErrorAttributes(request, isIncludeStackTrace(request, MediaType.ALL)); HttpStatus status = getStatus(request); return new ResponseEntity<Map<String, Object>>(body, status); }
三、ErrorPageCustomizer:
@Value("${error.path:/error}") private String path = "/error"; 系統出現錯誤之後來到error請求進行處理;(web.xml註冊的錯誤頁面規則)
四、DefaultErrorViewResolver
@Override public ModelAndView resolveErrorView(HttpServletRequest request, HttpStatus status, Map<String, Object> model) { ModelAndView modelAndView = resolve(String.valueOf(status), model); if (modelAndView == null && SERIES_VIEWS.containsKey(status.series())) { modelAndView = resolve(SERIES_VIEWS.get(status.series()), model); } return modelAndView; } private ModelAndView resolve(String viewName, Map<String, Object> model) { //默認SpringBoot能夠去找到一個頁面? error/404 String errorViewName = "error/" + viewName; //模板引擎能夠解析這個頁面地址就用模板引擎解析 TemplateAvailabilityProvider provider = this.templateAvailabilityProviders .getProvider(errorViewName, this.applicationContext); if (provider != null) { //模板引擎可用的狀況下返回到errorViewName指定的視圖地址 return new ModelAndView(errorViewName, model); } //模板引擎不可用,就在靜態資源文件夾下找errorViewName對應的頁面 error/404.html return resolveResource(errorViewName, model); }
*步驟:
一但系統出現4xx或者5xx之類的錯誤;ErrorPageCustomizer就會生效(定製錯誤的響應規則);就會來到/error請求;就會被BasicErrorController處理;
1)響應頁面;去哪一個頁面是由DefaultErrorViewResolver解析獲得的;*
protected ModelAndView resolveErrorView(HttpServletRequest request, HttpServletResponse response, HttpStatus status, Map<String, Object> model) { //全部的ErrorViewResolver獲得ModelAndView for (ErrorViewResolver resolver : this.errorViewResolvers) { ModelAndView modelAndView = resolver.resolveErrorView(request, status, model); if (modelAndView != null) { return modelAndView; } } return null; }
1)、如何定製錯誤的頁面;
(1)、有模板引擎的狀況下;error/狀態碼; 【將錯誤頁面命名爲 錯誤狀態碼.html 放在模板引擎文件夾裏面的 error文件夾下】,發生此狀態碼的錯誤就會來到 對應的頁面;
咱們可使用4xx和5xx做爲錯誤頁面的文件名來匹配這種類型的全部錯誤,精確優先(優先尋找精確的狀態碼.html);
頁面能獲取的信息;
timestamp:時間戳
status:狀態碼
error:錯誤提示
exception:異常對象
message:異常消息
errors:JSR303數據校驗的錯誤都在這裏
(2)、沒有模板引擎(模板引擎找不到這個錯誤頁面),靜態資源文件夾下找;
(3)、以上都沒有錯誤頁面,就是默認來到SpringBoot默認的錯誤提示頁面;
2)、如何定製錯誤的json數據;
(1)、自定義異常處理&返回定製json數據;
@ControllerAdvice public class MyExceptionHandler { @ResponseBody @ExceptionHandler(UserNotExistException.class) public Map<String,Object> handleException(Exception e){ Map<String,Object> map = new HashMap<>(); map.put("code","user.notexist"); map.put("message",e.getMessage()); return map; } } //沒有自適應效果...
(2)、轉發到/error進行自適應響應效果處理
@ExceptionHandler(UserNotExistException.class) public String handleException(Exception e, HttpServletRequest request){ Map<String,Object> map = new HashMap<>(); //傳入咱們本身的錯誤狀態碼 4xx 5xx,不然就不會進入定製錯誤頁面的解析流程 /** * Integer statusCode = (Integer) request .getAttribute("javax.servlet.error.status_code"); */ request.setAttribute("javax.servlet.error.status_code",500); map.put("code","user.notexist"); map.put("message",e.getMessage()); //轉發到/error return "forward:/error"; }
(3)、將咱們的定製數據攜帶出去;
出現錯誤之後,會來到/error請求,會被BasicErrorController處理,響應出去能夠獲取的數據是由getErrorAttributes獲得的(是AbstractErrorController(ErrorController)規定的方法);
一、徹底來編寫一個ErrorController的實現類【或者是編寫AbstractErrorController的子類】,放在容器中;
二、頁面上能用的數據,或者是json返回能用的數據都是經過errorAttributes.getErrorAttributes獲得;
三、容器中DefaultErrorAttributes.getErrorAttributes();默認進行數據處理的;自定義ErrorAttributes
//給容器中加入咱們本身定義的ErrorAttributes
@Component
public class MyErrorAttributes extends DefaultErrorAttributes {
@Override public Map<String, Object> getErrorAttributes(RequestAttributes requestAttributes, boolean includeStackTrace) { Map<String, Object> map = super.getErrorAttributes(requestAttributes, includeStackTrace); map.put("company","atguigu"); return map; }
}最終的效果:響應是自適應的,能夠經過定製ErrorAttributes改變須要返回的內容