SpringBoot頁面跳轉訪問css、js等靜態資源引用無效解決（六）
目錄
一、頁面跳轉
如果你還沒有實現頁面跳轉，推薦閱讀：SpringBoot跳轉渲染頁面（詳解）
二、情況說明
SpringBoot整合thymeleaf實現的頁面跳轉，該頁面引用外部css、js等靜態資源。
如果你發現跳轉頁面成功之後出現下圖情況，說明我等的就是你！我為了解決這個問題閱讀了很多部落格，這個問題我整整卡了一天的時間，終於有幸看到了一篇文章解決了我的問題，於是將解決方案總結了。
在瀏覽器中按了F12之後發現，根本就沒有成功訪問靜態資源！但是你發現你在編輯器裡面按著Ctrl用滑鼠點的時候靜態資源都能夠訪問。報些錯誤真的是花裡胡哨的~ No mapping found for HTTP request with URI（靜態資源路徑）
三、 問題解決方案
我一步一步的講，如果您已經完成了某些步驟，可以直接跳過。
1、 引入thymeleaf的依賴包
在pom.xml的檔案中加入
<!-- 引入thymeleaf依賴包 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
2、 專案路徑
TestController裡面寫的是頁面的跳轉程式碼，跳轉的是後臺的登入介面。我還是把程式碼拿出來你參考下吧。
（1） 注意
SpringBoot會預設從下面的目錄去讀取：
（1） static裡面放所有的靜態資源。
（2） templates裡面放頁面，這裡是templates -> admin，我是放在admin這個檔案裡面的。
TestController.java
package com.demo.demo.Controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; @Controller public class TestController { @RequestMapping(value = "/admin",method = RequestMethod.GET) public String index(){ //字尾為.html的檔名 return "admin/index"; } }
（2） 頁面引用外部靜態資源的方式
注意我這裡的靜態資源的路徑，雖然編輯器找不到資源，但是頁面是能夠正確訪問的。
（3） 核心解決方案
請看我的Controller裡面有一個UsingStaticController。
你新建一個Java class，程式碼如下：
package com.demo.demo.Controller;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
@Configuration
public class UsingStaticController extends WebMvcConfigurationSupport {
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}
}再次重新執行專案，問題就解決了。
到此處，我以為我的問題解決了，其實登陸（index.html）成功之後是不能成功跳轉到主頁（admin.html）的。
如果你也遇到了相同的情況，請繼續閱讀以下解決方案。
看一下我是如何跳轉主頁的
index.html
這個涉及到thymeleaf表單提交的問題。因為這個頁面引用的很多外部樣式無法實現頁面效果，所以只選取了關鍵程式碼。
th:action="@{/user}" 這個是提交給後臺的URL地址，請看下方的Controller的程式碼。
<form th:action="@{/user}" method="post">
<div class="row cl">
<div class="formControls col-xs-8">
<inputtype="text" placeholder="賬戶">
</div>
</div>
<div class="row cl">
<div class="formControls col-xs-8">
<input type="password" placeholder="密碼">
</div>
</div>
<div class="row cl">
<input type="submit" value=" 登 錄 ">
<input type="reset"value=" 取 消 ">
</div>
</form>PagesController.java程式碼
package com.demo.demo.Controller;
import com.demo.demo.Model.Message;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class PagesController {
@RequestMapping(value = "/admin",method = RequestMethod.GET)
public String index(){
//字尾為.html的檔名
return "admin/index";
}
//響應表單上的POST請求
@RequestMapping(value = "/user",method = RequestMethod.POST)
public String save(@ModelAttribute(value="message") Message message) {
return "admin/admin";
}
}
成功跳轉到選單之後，左側邊欄的li 大家應該都知道這都是html的頁面。
在我的admin目錄（目錄截圖請往上翻）裡面有幾個圖表html：
這是因為，點選左側邊欄之後找不到頁面造成的，也就是說你傳送的請求沒有得到響應。解決方案如下PagesController的程式碼更改。
package com.demo.demo.Controller;
import com.demo.demo.Model.Message;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class PagesController {
@RequestMapping(value = "/admin",method = RequestMethod.GET)
public String index(){
//字尾為.html的檔名
return "admin/index";
}
@RequestMapping(value = "/charts-1",method = RequestMethod.GET)
public String charts_1(){
return "admin/charts-1";
}
@RequestMapping(value = "/charts-2",method = RequestMethod.GET)
public String charts_2(){
return "admin/charts-2";
}
@RequestMapping(value = "/charts-3",method = RequestMethod.GET)
public String charts_3(){
return "admin/charts-3";
}
@RequestMapping(value = "/charts-4",method = RequestMethod.GET)
public String charts_4(){
return "admin/charts-4";
}
@RequestMapping(value = "/charts-5",method = RequestMethod.GET)
public String charts_5(){
return "admin/charts-5";
}
@RequestMapping(value = "/charts-6",method = RequestMethod.GET)
public String charts_6(){
return "admin/charts-6";
}
@RequestMapping(value = "/charts-7",method = RequestMethod.GET)
public String charts_7(){
return "admin/charts-7";
}
@RequestMapping(value = "/echarts",method = RequestMethod.GET)
public String echarts(){
return "admin/echarts";
}
@RequestMapping(value = "/admin-role",method = RequestMethod.GET)
public String admin_role(){
return "admin/admin-role";
}
@RequestMapping(value = "/user",method = RequestMethod.POST)
public String save(@ModelAttribute(value="message") Message message) {
return "admin/admin";
}
}
左側邊欄的頁面顯示的問題也就解決了！