7、SpringBoot頁面跳轉訪問css、js等靜態資源引用無效解決

原文鏈接：https://blog.csdn.net/qq_41647999/article/details/83788265

原文章地址 https://blog.csdn.net/qq_41647999/article/details/83788265#commentBox

目錄

一、頁面跳轉

二、情況說明

三、 問題解決方案

1、 引入thymeleaf的依賴包

2、 項目路徑

注意

（1） 頁面引用外部靜態資源的方式

（2） 核心解決方案

---

一、頁面跳轉

如果你還沒有實現頁面跳轉，推薦閱讀：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="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;錄&nbsp;">
          <input type="reset"value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
      </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";
    }
}
 

左側邊欄的頁面顯示的問題也就解決了！