我正在运行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>
但是,虽然控制台上没有显示映射错误,但我仍然无法获得我希望的好效果和样式。
我的应用程序配置类上有一段代码:
@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/
。怎么没用呢?
答案 0 :(得分:1)
我开发了和你一样的应用程序。 刚开发它并且对我来说很好。
这是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;
}
....
}
以下是我的结构的截图:
这是我的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>
....
答案 1 :(得分:0)
我认为问题在于这一行。
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>