为什么我的页面无法加载 js 和 css 文件？

Question

我正在运行 SpringMVC + Thymeleaf 应用程序，并希望在我的 HTML5 页面上加载 javascript 和 CSS。

我的login.html是：

<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>

webapp文件夹的结构是：

但是，虽然控制台上没有显示映射错误，但我仍然无法获得我希望的良好效果和样式。

我的应用程序配置类中有一段代码，内容如下：

@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/");
}

/static/文件夹的注释掉的注册表行在 JSP 上运行良好。 我已经尝试过，对于 HTML， /assets/和/WEB-INF/assets/ 。 怎么行不通？

Answer 1

我开发了和你一样的应用程序。 刚刚开发它并且对我来说工作正常。

这是配置：

@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;
    }

    ....

}

这是我的结构的屏幕截图：

这是我的 login.html 代码：

<!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>
....

Answer 2

我认为问题出在这一行。

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

你可以试试这个，而不是：

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

然后尝试链接您的 css 或 js，如下所示：

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

或者

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

为什么我的页面无法加载 js 和 css 文件？

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-03-14 06:59:58

解决方案2
0 2016-03-14 07:04:12

为什么我的页面无法加载 js 和 css 文件？

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-03-14 06:59:58

解决方案2 0 2016-03-14 07:04:12

解决方案1
1 已采纳 2016-03-14 06:59:58

解决方案2
0 2016-03-14 07:04:12