首页 > 解决方案 > 为什么我的 Spring Boot 应用程序无法随机获取 CSS 和 JS 文件?

问题描述

我收到一个非常奇怪的错误,有时没有问题,并且 CSS 和 JS 文件被正确获取,但是突然之间,它抛出了找不到映射的错误。
我怀疑这是某种缓存问题,因为关闭应用程序并运行另一个应用程序,然后再次运行该应用程序可以解决该错误。我的 mapControl.java 看起来像这样:

@Controller
public class MapControl {
    @Autowired
    TrafficAndRoutingService trs;
    
    
    
    @GetMapping(value="/")
    public String read(Model model)
    {
        model.addAttribute("pt",new UrlTransformer());
        model.addAttribute("bbox",trs.getBoundingBox());
        return "index";
    }
    
    @RequestMapping(value="/routing",method=RequestMethod.GET)
    public String load(@ModelAttribute("pt") UrlTransformer pt, BindingResult errors, Model model)
    {
        
    UrlContainer rp=pt.convert();
    RoutePath res=trs.getPath(rp);
    model.addAttribute("route",res);
    model.addAttribute("bbox",res.getBounds());
    return "index";
    }
    
    @ResponseBody 
    @RequestMapping(value = "/routing",method=RequestMethod.GET,produces="application/json")   
     public RoutePath fetchJSONResponse(@ModelAttribute("pt") UrlTransformer pt, BindingResult errors, Model model)
     {
        
         UrlContainer rp=pt.convert();
         RoutePath res=trs.getPath(rp);
         return res;
     }
    
    @RequestMapping(value = "/traffic", method = RequestMethod.GET, produces = "application/json")
    @ResponseBody
    public TrafficData show()
    {
    return trs.getAll();    
    }
    
   
    
 
}

我的 WebConfig.java 看起来像这样:

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

@Override
public void configureContentNegotiation(ContentNegotiationConfigurer configurer) {
  configurer.parameterName("mediaType").
  defaultContentType(MediaType.ALL).
  mediaType("json", MediaType.APPLICATION_JSON);
  }
}

我的 index.html(标题部分)如下所示:

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
   <head>
      <meta charset='utf-8'>
      <title>N.S</title>
      <!-- Loading all relevant scripts and stylesheets  -->
      <!-- Loading relevant leaflet scripts and stylesheets  -->
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
         integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
         crossorigin=""/>
      <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="">  </script>
      <!-- Loading relevant mapbox scripts and stylesheets for geocoding  -->
      <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css" rel="stylesheet">
      <script src="https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js"></script>
      <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js"></script>
      <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css" type="text/css">
      <!-- Loading relevant jquery libraries and bootstrap libraries for toggle mode  -->
      <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous">
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"></script>
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"></script>
      <!-- Loading stylesheet for webpage  -->
      <link rel="stylesheet" th:href="@{/static/css/styles.css}">
      <!-- Loading scripts for canva5 used in traffic display  -->
      <script th:src="@{static/js/leaflet_canvas_layer.js}"></script>
      <script th:src="@{static/js/leaflet_tileloader_mixin.js}"></script>
      <!-- Loading scripts traffic display (fetch and display) -->
      <script th:src="@{static/js/traffic_disp/traffic_layer.js}"></script>
      <script th:src="@{static/js/traffic_disp/traffic_fetch.js}"></script>
      <!-- Loading script for converting string to title case-->
      <script th:src="@{static/js/text_style/title_case.js}"></script>
   </head>

谁能帮我理解我可能做错了什么来间歇性地得到这个错误?以及如何解决。

标签: javaspringspring-bootspring-mvcthymeleaf

解决方案


推荐阅读