简体   繁体   English

找不到静态文件Spring MVC + Thymeleaf

[英]Static files can not found Spring MVC + Thymeleaf

I have a spring application which is a starting project. 我有一个spring应用程序,这是一个开始的项目。 I used Thymeleaf as template engine. 我使用Thymeleaf作为模板引擎。 But i have problem which is i can not reach to the static files such as CSS or javascript. 但是我有一个问题,就是我无法访问CSS或javascript等静态文件。 This is my file structure for this application. 这是我针对该应用程序的文件结构。
档案结构


This is the configuration file for Thymeleaf engine. 这是Thymeleaf引擎的配置文件。 And i also tried to add resource handling which is : 而且我还尝试添加资源处理:
SpringBoot with Thymeleaf - css not found 带有Thymeleaf的SpringBoot-找不到CSS
package com.ggk.config; 包com.ggk.config;

import org.springframework.beans.BeansException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.context.ApplicationContextAware;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.thymeleaf.spring4.SpringTemplateEngine;
import org.thymeleaf.spring4.view.ThymeleafViewResolver;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;


@Configuration
@EnableWebMvc
@ComponentScan("com.ggk")
public class ThymeleafConfig extends WebMvcConfigurerAdapter {

    @Bean
    public ServletContextTemplateResolver servletContextTemplateResolver() {
        ServletContextTemplateResolver servletContextTemplateResolver = new ServletContextTemplateResolver();
        servletContextTemplateResolver.setPrefix("/WEB-INF/templates/");
        servletContextTemplateResolver.setSuffix(".html");
        servletContextTemplateResolver.setTemplateMode("HTML5");
        servletContextTemplateResolver.setCacheable(false);

        return servletContextTemplateResolver;
    }

    @Bean
    @Autowired
    public SpringTemplateEngine springTemplateEngine(ServletContextTemplateResolver servletContextTemplateResolver) {
        SpringTemplateEngine springTemplateEngine = new SpringTemplateEngine();
        springTemplateEngine.setTemplateResolver(servletContextTemplateResolver);
        return springTemplateEngine;
    }
    @Bean
    @Autowired
    public ThymeleafViewResolver thymeleafViewResolver(SpringTemplateEngine springTemplateEngine) {
        ThymeleafViewResolver thymeleafViewResolver = new ThymeleafViewResolver();
        thymeleafViewResolver.setTemplateEngine(springTemplateEngine);
        return thymeleafViewResolver;
    }






}

here is my index.html adding css files. 这是我的index.html添加CSS文件。

<link rel="stylesheet" href="../css/animate.css" th:href="@{/css/animate.css}" type="text/css"/>

I guess you cannot view the static resources directly via chrome as well, like: 我想您也不能直接通过chrome查看静态资源,例如:

http://<domain_name>:<port>/<context_root>/css/animate.css

I think it gives you a 404 error. 我认为它给您一个404错误。 If this is the case, that means your app needs a configuration to serve static resources. 如果是这种情况,则意味着您的应用需要配置才能提供静态资源。 Basically you need to add a ResourceHandler to your config. 基本上,您需要在配置中添加一个ResourceHandler See following link for an example: 有关示例,请参见以下链接:

https://stackoverflow.com/a/30663486/878361 https://stackoverflow.com/a/30663486/878361

In summary you need to: 总之,您需要:

  1. extend WebMvcConfigurerAdapter (which you've already done) 扩展WebMvcConfigurerAdapter (您已经完成)
  2. override addResourceHandlers method and add your resource locations like follows: 覆盖addResourceHandlers方法并添加资源位置,如下所示:

     @Override @Override\npublic void addResourceHandlers(ResourceHandlerRegistry registry) { 公共无效addResourceHandlers(ResourceHandlerRegistry注册表){\n    registry.addResourceHandler("/resources/**") Registry.addResourceHandler(“ / resources / **”)\n            .addResourceLocations("/resources/"); .addResourceLocations(“ / resources /”);\n} }\n

将CSS和图像移至webapp。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM