springboot05-RestfulCRUD

原創 weixin_44172800 2020-04-20 10:49

RestfulCRUD

案例分析

1）、默認訪問首頁

 
//使用WebMvcConfigurerAdapter可以來擴展SpringMVC的功能
//@EnableWebMvc   不要接管SpringMVC
@Configuration
public class MyMvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/yjsj").setViewName("success");
}


@Bean
public WebMvcConfigurer webMvcConfigurer(){
   WebMvcConfigurer webMvcConfigurer = new WebMvcConfigurer() {
      //註冊視圖映射組件
      @Override
      public void addViewControllers(ViewControllerRegistry 			            registry) {
                //後面的setView如同controller的返回值
                registry.addViewController("/").setViewName("index");
                registry.addViewController("/index.html").setViewName("index");
                registry.addViewController("/main.html").setViewName("dashboard");
      }
}

2）、國際化

1）、編寫國際化配置文件；
2）、使用ResourceBundleMessageSource管理國際化資源文件 3）、在頁面使用fmt:message取出國際化內容

步驟：
1）、編寫國際化配置文件，抽取頁面需要顯示的國際化消息
在這裏插入圖片描述
2).springboot已經幫我們配好了管理國際化資源的文件

3）、去頁面獲取國際化的值；
在這裏插入圖片描述
效果：根據瀏覽器語言設置的信息切換了國際化；

原理：
國際化Locale（區域信息對象）；LocaleResolver（獲取區域信息對象）；
4）、點擊鏈接切換國際化

/**
* 可以在連接上攜帶區域信息
*/ 
public class MyLocaleResolver implements LocaleResolver {
   
   @Override
   public Locale resolveLocale(HttpServletRequest request) {
       String l = request.getParameter("l");
       Locale locale = Locale.getDefault();
       if(!StringUtils.isEmpty(l)){
           String[] split = l.split("_");
           locale = new Locale(split[0],split[1]);
       }
       return locale;
   }

   @Override
   public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale  locale) {

   }
}


@Bean
   public LocaleResolver localeResolver(){
       return new MyLocaleResolver();
   }
}

3）、登陸

開發期間模板引擎頁面修改以後，要實時生效
1）、禁用模板引擎的緩存

# 禁用緩存
spring.thymeleaf.cache=false

2）、頁面修改完成以後ctrl+f9：重新編譯；

4）、攔截器進行登陸檢查

攔截器

/**
* 登陸檢查，
*/
public class LoginHandlerInterceptor implements HandlerInterceptor {
//目標方法執行之前
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
Object user = request.getSession().getAttribute("loginUser");
if(user == null){
//未登陸，返回登陸頁面
request.setAttribute("msg","沒有權限請先登陸");
request.getRequestDispatcher("/index.html").forward(request,response);
return false;
}else{
//已登陸，放行請求
return true;
}
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
}
}

註冊攔截器

//所有的WebMvcConfigurerAdapter組件都會一起起作用
@Bean //將組件註冊在容器
public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("login");
registry.addViewController("/index.html").setViewName("login");
registry.addViewController("/main.html").setViewName("dashboard"); }
//註冊攔截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
//super.addInterceptors(registry);
//靜態資源； *.css , *.js
//SpringBoot已經做好了靜態資源映射
registry.addInterceptor(new
LoginHandlerInterceptor()).addPathPatterns("/**")
//Springboot2以後對wabjars內容也會攔截
.excludePathPatterns("/index.html","/","/user/login","/webjars/**"
);
}
};
return adapter;
}

5）、CRUD-員工列表

實驗要求：
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
來到添加頁面 emps GET
添加員工 emp POST
來到修改頁面（查出員工進行信息回顯） emp/1 GET
修改員工 emp PUT
刪除員工 emp/1 DELETE

3）、員工列表：
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：將被引入的片段的內容包含進這個標籤中  

<footer th:fragment="copy">
&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>
    &copy; 2011 The Good Thymes Virtual Grocery     </footer>
</div>
 
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
 
<div>
&copy; 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-員工添加

  • 添加頁面
<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="description" content="">
   <meta name="author" content="">

   <title>Dashboard Template for Bootstrap</title>
   <!-- Bootstrap core CSS -->
   <link th:href="@{/webjars/bootstrap/4.4.1-1/css/bootstrap.css}" rel="stylesheet">

   <!-- Custom styles for this template -->
   <link th:href="@{asserts/css/dashboard.css}" rel="stylesheet">
   <style type="text/css">
       /* Chart.js */

       @-webkit-keyframes chartjs-render-animation {
           from {
               opacity: 0.99
           }
           to {
               opacity: 1
           }
       }

       @keyframes chartjs-render-animation {
           from {
               opacity: 0.99
           }
           to {
               opacity: 1
           }
       }

       .chartjs-render-monitor {
           -webkit-animation: chartjs-render-animation 0.001s;
           animation: chartjs-render-animation 0.001s;
       }
   </style>
</head>

<body>
<!-- 引入抽取的topBar -->
<!-- 模板名：使用thymeleaf的前後綴配置規則進行解析-->
<!-- ~{模板名::抽取塊名} -->
<div th:replace="commons/bar::topBar"></div>
<div class="container-fluid">
   <div class="row">
       <div th:replace="commons/bar::#leftBar(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請求修改員工數據-->
               <!--
               1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自動配置好的）
               2、頁面創建一個post表單
               3、創建一個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="[email protected]" 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}?${dep.id == emp.department.id}" th:value="${dep.id}" th:each="dep:${deps}" th:text="${dep.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>
       </main>
   </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/webjars/jquery/3.4.1/jquery.js}"></script>
<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/popper.js/2.0.2/cjs/popper.js}"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.4.1-1/js/bootstrap.js}"></script>

<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/asserts/js/feather.min.js}"></script>
<script>
   feather.replace()
</script>

<!-- Graphs -->
<script type="text/javascript" th:src="@{asserts/js/Chart.min.js}"></script>
<script>
   var ctx = document.getElementById("myChart");
   var myChart = new Chart(ctx, {
       type: 'line',
       data: {
           labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
           datasets: [{
               data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
               lineTension: 0,
               backgroundColor: 'transparent',
               borderColor: '#007bff',
               borderWidth: 4,
               pointBackgroundColor: '#007bff'
           }]
       },
       options: {
           scales: {
               yAxes: [{
                   ticks: {
                       beginAtZero: false
                   }
               }]
           },
           legend: {
               display: false,
           }
       }
   });
</script>

</body>

</html>`
  • 修改頁面
<!‐‐需要區分是員工修改還是添加；‐‐>
<form th:action="@{/emp}" method="post">
   <!‐‐發送put請求修改員工數據‐‐>
   <!‐‐
1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自動配置好的） 2、頁面創建一個post表單
3、創建一個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="[email protected]" 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>
  • 刪除頁面
<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>

springbooe2則需要配置：spring.mvc.hiddenmethod.filter.enabled=true

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

SpringBoot錯誤處理機制以及自定義異常響應原理解析

一、SpringBoot默認的錯誤處理機制 首先看一下SpringBoot的默認處理結果 這是頁面響應 這是非頁面響應 看到不同的響應信息，大家可能有疑惑“訪問同一個地址，爲什麼展示效果卻不一樣呢？”，其實這跟SpringBo

山就在那里 2020-06-19 18:24:29

SpringBoot自動配置原理解析

一、原理剖析 1、@SpringBootApplication SpringBoot程序會有一個主程序啓動類，這個類上會有一個註解**@SpringBootApplication** @SpringBootApplication

山就在那里 2020-06-19 17:28:37

Failed to resolve org.junit.platform:junit-platform-launcher:1.5.2

這個問題好像只存在於2.0版本 使用Spring Initializr快速構建的SpringBoot項目，我的版本是2.2.7(特意測試了一下1.0版本，好像不存在這樣的問題)。在進行單元測試時，提示： Failed to res

山就在那里 2020-06-19 17:28:37

1-1 創建簡單SpringBoot應用

使用組件 hibernate、mysql、springboot、lombok 步驟： 1、創建項目 example Springboot官網 -> Quick start -> 輸入groupId、artifactId -> 選擇需要的組

H_crab 2020-06-11 02:41:59

1-4 事務抽象 事務的傳播性與隔離性

Springboot有一致的事務模型 JDBC/Hibernate/myBatis DataSource/JTA 事務抽象的核心接口 PlatformTransactionManager     DataSourceTransationM

H_crab 2020-06-11 02:41:59

3-2 瞭解 12-Factors

基礎代碼     一份基礎代碼、多份部署 依賴     顯式聲明依賴關係 配置     在環境中存儲配置 後端服務     把後端五福當做附加資源 構建、發佈、運行     嚴格分離構建和運行 進程     以一個或多個無狀態進程運行應用

H_crab 2020-06-11 02:41:59

2-2 Springboot自動配置Bean原理和配置自動配置的Bean

認識Springboot     SpringBoot不是什麼     不是應用服務器     不是JavaEE之類的規範     不是代碼生成器     不是Spring Framework的升級版（幫助大家更好地使用Spring F

H_crab 2020-06-11 02:41:59

springboot12-shiro

想当一个程序员 2020-06-02 14:55:33

springboot11-阿里雲視頻點擊

想当一个程序员 2020-05-22 22:48:23

MybatisAnnotationTools-1.0使用教學

想当一个程序员 2020-05-13 20:08:07

Springboot08-mybatisPlus

weixin_44172800 2020-05-08 23:37:35

Springboot10-easyExcle

weixin_44172800 2020-05-08 23:37:35

springboot03-log(日誌框架)

weixin_44172800 2020-04-20 10:49:15

springboot02-HelloWord(spring Initializer)

weixin_44172800 2020-04-20 10:49:15

springboot04-Web

weixin_44172800 2020-04-20 10:49:15