SpringBoot-05 Web開發
阿新 • • 發佈:2021-04-01
# SpringBoot-05 Web開發
![1](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210225193902.png)
## 靜態資源
要解決的第一個問題,靜態資源存放問題,靜態資源放在哪兒能查詢到。
首先檢視**WebMvcAutoConfiguration.class**(可以直接全域性查詢)
```java
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
//是否有自定義配置,有的話這個方法失效
super.addResourceHandlers(registry);
if (!this.resourceProperties.isAddMappings()) {
logger.debug("Default resource handling disabled");
} else {
//新增這個webjars,新增之後路徑為:classpath:/META-INF/resources/webjars/
ServletContext servletContext = this.getServletContext();
this.addResourceHandler(registry, "/webjars/**", "classpath:/META-INF/resources/webjars/");
this.addResourceHandler(registry, this.mvcProperties.getStaticPathPattern(), (registration) -> {
//其餘可以識別的靜態資源位置
registration.addResourceLocations(this.resourceProperties.getStaticLocations());
if (servletContext != null) {
registration.addResourceLocations(new Resource[]{new ServletContextResource(servletContext, "/")});
}
});
}
}
```
那麼,什麼是**webjars**?
WebJars是一個很神奇的東西,可以讓大家以jar包的形式來使用前端的各種框架、元件。WebJars是將客戶端(瀏覽器)資源(JavaScript,Css等)打成jar包檔案,以對資源進行統一依賴管理。
![3](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210225200328.png)
我的理解就是:**以 依賴的形式匯入前端資源**
結合上面的路徑,我們匯入一個`jqury`嘗試:
```xml
org.webjars
jquery
3.5.1
```
可以看出 一一對應,也可以正常訪問。
****
**除了上面這些,還有其他可以識別靜態資源的位置:**
```java
//其餘可以識別的靜態資源位置
registration.addResourceLocations(this.resourceProperties.getStaticLocations());//getStaticLocations() 點選
if (servletContext != null) {
registration.addResourceLocations(new Resource[]{new ServletContextResource(servletContext, "/")});
}
public String[] getStaticLocations() {
return this.staticLocations; //staticLocations 點選
}
private static final String[] CLASSPATH_RESOURCE_LOCATIONS =
new String[]{"classpath:/META-INF/resources/", "classpath:/resources/", "classpath:/static/", "classpath:/public/"};
// 出現了路徑
```
![6](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210225203216.png)
- 在springboot,我們可以使用一下方式處理靜態資源
- webjars --------> localhost:8080/webjars/
- public , static , /** , resources ------>localhost:8080/
- 優先順序 : **resources > static > public**,可以按照自己的需求,放入檔案
> 至於 **templates**資料夾,其中的檔案只能用 **Controller** 控制類,才可以進入。
## 首頁設定
在SpringBoot中,預設自動識別在**靜態資原始檔夾**下的 **index.html**
> **注意:**
>
> - 靜態資原始檔夾為:
> - public
> - static
> - resources
> - 優先順序:**resources > static > public**
> - 預設的首頁檔案為:**index.html**,不要弄錯。
**下面測試放在了public,其餘方法大家可以自行測試:**
![8](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210227234537.png)
## Thymeleaf模板引擎
### 1.匯入依賴
模板引擎有什麼用呢? 可以讓你使用 Controller類 呼叫頁面,沒有Thymeleaf就是不可以。
**首先!!,最重要的是匯入這兩個依賴:**
```xml
org.springframework.boot
spring-boot-starter-thymeleaf
2.4.3
```
> **原因:自己建立的SpingBoor專案,自帶的Thymeleaf版本為2.xxx,而我們要使用的這個版本為3.xx**
大家匯入依賴後確定是否成功:
![10](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210228001112.png)
之後更改一下**pom.xml**中的配置:
```xml
1.8
3.0.11.RELEASE
3.0.4
```
### 2.Controller類測試
建立一個Controller類
> **注意:一定要在 xxxApplication啟動器的同級目錄下建立,不然不可能成功!!(踩了30分鐘的坑)**
```java
@Controller
public class ThymeleafController {
@RequestMapping("/a")
public String test(){
return "tt";
}
}
```
****
建立一個html頁面
> **注意:SpringBoot內部規定要在templates資料夾下建立xxx.html**
```html
Title
Title
``` **** > **th:utext** 修改controller類,使用model傳一個數據: ```java @RequestMapping("/a") public String test(Model model){ model.addAttribute("msg","Title
``` **** > **th:each** 修改controller類,使用model傳一個數據: ```java @RequestMapping("/a") public String test(Model model){ model.addAttribute("users", Arrays.asList("user1","user2","user3")); return "tt"; } ``` 修改html: ```htmlTitle
[[ ${user} ]] ``` ## 擴充套件SpringMVC ### 1.MVC擴充套件原理 diy檢視解析器 ```java @Configuration public class MyMvcConfig { @Bean public ViewResolver MyViewResolver(){ return new MyViewResolver(); } public static class MyViewResolver implements ViewResolver{ @Override public View resolveViewName(String s, Locale locale) throws Exception { return null; } } } ``` ### 2.SpringMVC擴充套件 ```java @Configuration public class MyMvcConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { // 這句話的意思就是訪問 ...8080/test, 跳轉到tt.html頁面 registry.addViewController("/test").setViewName("tt"); } } ``` > 在SpringBoot中,有非常多的 **xxxConfiguration** 幫助我們進行擴充套件配置,只要看見了這個東西,我們就要注意了,可能是增加了一些新的功能。 >個人部落格為: [MoYu's HomePage](https://www.moyuzc.cn/) [MoYu's Gitee Blog](https://moyu-zc.gi
ThymeleafController跳轉
``` **** 之後執行測試: ### 3.Thymeleaf語法 **** > **th:text** 修改controller類,使用model傳一個數據: ```java @RequestMapping("/a") public String test(Model model){ model.addAttribute("msg","Thymeleaf語法測試"); return "tt"; } ``` 修改html: ```htmlThymeleafController跳轉
``` **** > **th:utext** 修改controller類,使用model傳一個數據: ```java @RequestMapping("/a") public String test(Model model){ model.addAttribute("msg","
Thymeleaf語法測試
"); return "tt"; } ``` 修改html: ```htmlThymeleafController跳轉
``` **** > **th:each** 修改controller類,使用model傳一個數據: ```java @RequestMapping("/a") public String test(Model model){ model.addAttribute("users", Arrays.asList("user1","user2","user3")); return "tt"; } ``` 修改html: ```html
ThymeleafController跳轉
[[ ${user} ]] ``` ## 擴充套件SpringMVC ### 1.MVC擴充套件原理 diy檢視解析器 ```java @Configuration public class MyMvcConfig { @Bean public ViewResolver MyViewResolver(){ return new MyViewResolver(); } public static class MyViewResolver implements ViewResolver{ @Override public View resolveViewName(String s, Locale locale) throws Exception { return null; } } } ``` ### 2.SpringMVC擴充套件 ```java @Configuration public class MyMvcConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { // 這句話的意思就是訪問 ...8080/test, 跳轉到tt.html頁面 registry.addViewController("/test").setViewName("tt"); } } ``` > 在SpringBoot中,有非常多的 **xxxConfiguration** 幫助我們進行擴充套件配置,只要看見了這個東西,我們就要注意了,可能是增加了一些新的功能。 >個人部落格為: [MoYu's HomePage](https://www.moyuzc.cn/) [MoYu's Gitee Blog](https://moyu-zc.gi