Question

我正在开发一个使用天气api的springboot项目，并使用react显示浏览器上的数据。无论如何，似乎我缺少一些配置或者我可能需要在我的项目中移动文件，错误在浏览器显示无法访问js / css文件：

获取http://localhost:8080/demo/resources/css/neo.css browser.min.js：4 GET http://localhost:8080/demo/resources/js/WeatherManager.js 404（） browser.min.js：4未捕获错误：无法加载http://localhost:8080/demo/resources/js/WeatherManager.js 在XMLHttpRequest.xhr.onreadystatechange（browser.min.js：4）

* WebConfig *

@Configuration
@ComponentScan
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

@Bean
public ViewResolver getViewResolver() {
    InternalResourceViewResolver resolver = new InternalResourceViewResolver();
    resolver.setPrefix("/WEB-INF/jsp/");
    resolver.setSuffix(".jsp");
    return resolver;
}

/**
 * We need to define 3 things to implement  
 * 1- Define message resource
 * 2- Define Local resolver internationalization
 * 3- Override interceptor 
 */
@Bean
public MessageSource messageSource(){
    ResourceBundleMessageSource messageSource=new ResourceBundleMessageSource();
    messageSource.setBasename("messages");
    return messageSource;
}

@Bean
public LocaleResolver localeResolver(){
    SessionLocaleResolver resolver =new SessionLocaleResolver();
    resolver.setDefaultLocale(Locale.ENGLISH);
    return resolver;
}

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry){
    //you can add more resources here 
    registry.addResourceHandler("/css/**").addResourceLocations("/resources/css/");
    registry.addResourceHandler("/js/**").addResourceLocations("/resources/js/");
}

@Override
public void addInterceptors(InterceptorRegistry registry)
{
    LocaleChangeInterceptor changeInterceptor=new LocaleChangeInterceptor();
    changeInterceptor.setParamName("language");
    registry.addInterceptor(changeInterceptor);
}


}

* WebAppInitializer *

public class WebAppInitializer implements WebApplicationInitializer {

@Override
public void onStartup(ServletContext servletContext) throws ServletException {
    WebApplicationContext context = getContext();
    servletContext.addListener(new ContextLoaderListener(context));
    ServletRegistration.Dynamic dispatcher = servletContext.addServlet("DispatcherServlet", new DispatcherServlet(context));
    dispatcher.setLoadOnStartup(1);
    dispatcher.addMapping("*.html");
    dispatcher.addMapping("*.pdf");
    //Enable JSON response 
    dispatcher.addMapping("*.json");
    dispatcher.addMapping("*.jsx");

}

private WebApplicationContext getContext() {
    AnnotationConfigWebApplicationContext context =new AnnotationConfigWebApplicationContext();
    context.register(WebConfig.class);
    return context;
}

* DemoApplication *

@SpringBootApplication
@EnableAutoConfiguration
@EnableAsync
public class DemoApplication extends AsyncConfigurerSupport {

public static void main(String[] args) {
    SpringApplication.run(DemoApplication.class, args);
}

@Override
public Executor getAsyncExecutor() {
    ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
    executor.setCorePoolSize(2);
    executor.setMaxPoolSize(2);
    executor.setQueueCapacity(500);
    executor.setThreadNamePrefix("WeatherService-");
    executor.initialize();
    return executor;
}
}

JS / CSS文件位于 / resources / css / / resources / js /

JSP页面位于 WEB-INF / jsp
下

** weather.jsp第**页

＆＃13;

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="resources/css/neo.css">
 
	<title>Weather </title>
</head>
	<body>
		<div id="main" class="container">
			
		</div>
		<script type="text/babel" src="resources/js/WeatherManager.js"></script> 
	</body>
</html>

＆＃13;

我的源代码是
github ：[https://github.com/saifmasadeh/WeatherBoard][1]

Answer 1

您应该将此添加到您的问题中：

<script type="text/babel" src="resources/js/WeatherManager.js"></script> 
<link rel="stylesheet" type="text/css" href="resources/css/neo.css">

这就是问题所在。您正在通过错误的网址导入。

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry){
    //you can add more resources here 
    registry.addResourceHandler("/css/**").addResourceLocations("/resources/css/");
    registry.addResourceHandler("/js/**").addResourceLocations("/resources/js/");
}

上述方法说明当用户尝试访问路径/js/**的网址时，请查看/resources/js/。

基本上，如果用户要求localhost/context-root/js/script.js Spring会将其视为localhost/context-root/resources/js/script.js

（事实并非如此，但它足以解释这个想法。）

因此，当您尝试导入脚本文件resources/js/WeatherManager.js时，资源处理程序不知道在哪里查找。它对路径resources/**

的任何事情都不了解

您要做的是以这种方式导入：

    <script type="text/babel" src="/js/WeatherManager.js"></script>

这会映射到资源处理程序的"/js/**，并在WeatherManager.js中查找/resources/js/。您需要对CSS文件执行相同的操作。

关于其工作原理的另一个例子，view my answer here.

（另外，如果这不起作用，您可能需要使用classpath:/resources/(js|css)作为资源位置。）

未捕获错误：无法在XMLHttpRequest.xhr.onreadystatechange上加载****

1 个答案: