Why can't I load js and css files on my pages?

I'm running a SpringMVC + Thymeleaf application and would like to load javascript and CSS on my HTML5 pages.

My login.html is:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"></meta>
<title>Login Page</title>

<meta name="description" content="login page"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link rel="shortcut icon" href="../assets/img/favicon.png"
type="image/x-icon"></link>

<link href="../assets/css/bootstrap.min.css" rel="stylesheet"></link>
<link id="bootstrap-rtl-link" href="" rel="stylesheet"></link>
<link href="../assets/css/font-awesome.min.css" rel="stylesheet"></link>

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300"
rel="stylesheet" type="text/css"></link>

<link id="beyond-link" href="../assets/css/beyond.min.css" rel="stylesheet" ></link>
<link href="../assets/css/demo.min.css" rel="stylesheet"></link>
<link href="../assets/css/animate.min.css" rel="stylesheet"></link>
<link id="skin-link" href="" rel="stylesheet" type="text/css"></link>

<script src="../assets/js/skins.min.js"></script>

<script src="../assets/js/jquery-2.0.3.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/slimscroll/jquery.slimscroll.min.js"></script>

<script src="../assets/js/beyond.js"></script>
</head>

<body>
    <div class="login-container animated fadeInDown">
        <div class="loginbox bg-white">
            <div class="loginbox-title">SIGN IN</div>

            <div class="loginbox-textbox">
                <input type="text" class="form-control" placeholder="Email"></input>
            </div>
            <div class="loginbox-textbox">
                <input type="text" class="form-control" placeholder="Password"></input>
            </div>
            <div class="loginbox-forgot">
                <a href="">Forgot Password?</a>
            </div>
            <div class="loginbox-submit">
                <input type="button" class="btn btn-primary btn-block" value="Login"></input>
            </div>
            <div class="loginbox-signup">
                <a href="register.html">Sign Up With Email</a>
            </div>
        </div>
        <div class="logobox"></div>
    </div>
</body>
</html>

The structure of the webapp folder is:

But, though no mapping errors show on the console, I still can't get the nice effects and styles I'm hoping for.

I have a piece of code on my application configuration class that reads:

@Bean
public ViewResolver viewResolver() {
    ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver();
    templateResolver.setTemplateMode("HTML5");
    templateResolver.setCharacterEncoding("UTF-8");
    templateResolver.setPrefix("/WEB-INF/html/");
    templateResolver.setSuffix(".html");

    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setTemplateResolver(templateResolver);

    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
    viewResolver.setTemplateEngine(engine);

    return viewResolver;
}

/*
 *  Configure ResourceHandlers to serve static resources like CSS/ Javascript etc...
 */
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
// registry.addResourceHandler("/static/**").addResourceLocations("/static/");
registry.addResourceHandler("/WEB-INF/assets/**").addResourceLocations("/WEB-INF/assets/");
}

The commented out registry line for the /static/ folder works nicely on JSP. I've tried, for HTML, both /assets/ and /WEB-INF/assets/. How come it's not working?

回答1:

I have developed same application like you. Just developed it and working fine for me.

Here is config:

@EnableWebMvc
@Configuration
@ComponentScan(basePackages = { "org.tnt.base.api" })
public class MvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/css/**").addResourceLocations("/css/");
    }

    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }

    @Bean
    public InternalResourceViewResolver jspViewResolver() {
        InternalResourceViewResolver bean = new InternalResourceViewResolver();
        bean.setPrefix("/WEB-INF/views/");
        bean.setSuffix(".html");
        return bean;
    }

    ....

}

Here's a screenshot of my structure that works:

Here's my login.html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TnT Quick Login</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
....

回答2:

I think problem is in this line.

registry.addResourceHandler("/WEB-INF/assets/**").addResourceLocations("/WEB-INF/assets/");

you can try this instead of:

registry.addResourceHandler("assets/**").addResourceLocations("/WEB-INF/assets/");

and then try to link your css or js, like this:

<script src="assets/js/jquery-2.0.3.min.js"></script>

<script src="/assets/js/jquery-2.0.3.min.js"></script>