Thymeleaf + HTML5 - 找不到 JS 或 CSS - IT屋-程序员软件开发技术分享社区
首页
前端开发
Thymeleaf + HTML5 - 找不到 JS 或 CSS
Thymeleaf + HTML5 - 找不到 JS 或 CSS
[英] Thymeleaf + HTML5 - can't find JS or CSS
本文介绍了Thymeleaf + HTML5 - 找不到 JS 或 CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用基于另一个应用程序的 Thymeleaf 开发一个新应用程序.但是我没有快速推进开发,而是在晚上的大部分时间里都被困在一个问题上.
问题是,Eclipse 说(在其控制台上)在访问应用程序时已加载了 Thymleaf.到现在为止还挺好!但我缺少所有的 CSS 和 JS.我的登陆页面有一个链接到以下但不是花哨的 login.html
文件:
<html xmlns:th="http://www.thymeleaf.org"><head th:include="fragments/login::loginFragment"><meta charset="UTF-8"/>头部><身体><div class="登录容器动画淡入淡出"><div class="loginbox bg-white"><form th:action="@{/login}" method="post"><div class="loginbox-title"><span style="text-transform: uppercase;"th:text="#{gen.signin}"></span></div><div class="loginbox-textbox"><input type="text" id="ssoId" name="ssoId" class="form-control" th:placeholder="#{gen.username}"/>
<div class="loginbox-textbox"><input type="password" id="password" name="password" class="form-control" th:placeholder="#{gen.passwd}"/>
<!-- <div class="loginbox-forgot">--><!-- <a href="#" th:href="@{/forgotPassword}" th:text="#{gen.lostPasswd}">忘记密码?</a>--><!-- </div>--><div class="loginbox-submit"><input type="submit" class="btn btn-primary btn-block" th:value="#{gen.signin}"/>
<div style="text-align: center;"><span th:text="#{gen.appVersion}"></span></div></表单>
<script type="text/javascript">$(document).ready(function() {$('#ssoId').focus();});
</html>
它指的是 loginFragment 定义为:
<html xmlns:th="http://www.thymeleaf.org"><head th:id="loginFragment" th:fragment="loginFragment"><meta charset="UTF-8"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link rel="icon" href="assets/img/favicon.png" type="image/x-icon"/><link th:href="@{/assets/css/bootstrap.min.css}"/><link th:href="@{/assets/css/font-awesome.min.css}"/><link th:href="@{/assets/css/beyond-login.css}"/><link th:href="@{/assets/css/demo.min.css}"/><link th:href="@{/assets/css/animate.min.css}"/><link th:href="@{/assets/css/jquery-ui.css}"/><link th:href="@{/assets/css/login.css}"/><link th:href="@{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300}"/><script th:src="@{/assets/js/skins.min.js}" ></script><script th:src="@{/assets/js/jquery-2.2.3.min.js}" ></script><script th:src="@{/assets/js/bootstrap.min.js}" ></script><script th:src="@{/assets/js/slimscroll/jquery.slimscroll.min.js}" ></script><script th:src="@{/assets/js/beyond.js}" ></script><script th:src="@{/assets/js/bootstrap.min.js}" ></script>头部><身体><div class="容器"></html>
webapp
文件夹结构是:
webapp资产css图片js网络信息html行政片段家登录.html
着陆页使用不同的片段加载 CSS 和 JS,但两个片段都无法读取 CSS 和 JS 文件.我试过与另一个项目进行比较,没有明显的区别.连文件权限都一样.
在登陆页面上,Firebug 向我展示了这个:
每次我尝试在浏览器上调用 CSS 或 JS 文件时,我都会被重定向到登录页面.
我在这里遗漏了什么?
解决方案
默认情况下,Thymeleaf 希望我们将模板放在 src/main/resources/templates
文件夹中.
对于 CSS 和 JavaScript 文件,默认目录为 src/main/resources/static
.
将您的 resources
文件夹结构更改为:
src主要的资源静止的css图片js模板行政片段家登录.html
CSS 用法例如
JS 用法例如
I'm working on a new application using Thymeleaf that's built upon another one. But instead of fast forwarding the development, I'm stuck on a issue for the better part of the night.
The thing is, Eclipse says (on its console) Thymleaf has been loaded upon accessing the application. So far so good! But I lack all CSS and JS. My landing page has a link to the following but not fancy login.html
file:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/login :: loginFragment">
<meta charset="UTF-8" />
</head>
<body>
<div class="login-container animated fadeInDown">
<div class="loginbox bg-white">
<form th:action="@{/login}" method="post">
<div class="loginbox-title"><span style="text-transform: uppercase;" th:text="#{gen.signin}"></span></div>
<div class="loginbox-textbox">
<input type="text" id="ssoId" name="ssoId" class="form-control" th:placeholder="#{gen.username}" />
</div>
<div class="loginbox-textbox">
<input type="password" id="password" name="password" class="form-control" th:placeholder="#{gen.passwd}" />
</div>
<!-- <div class="loginbox-forgot"> -->
<!-- <a href="#" th:href="@{/forgotPassword}" th:text="#{gen.lostPasswd}">Forgot Password?</a> -->
<!-- </div> -->
<div class="loginbox-submit">
<input type="submit" class="btn btn-primary btn-block" th:value="#{gen.signin}"/>
</div>
<div style="text-align: center;" ><span th:text="#{gen.appVersion}"></span></div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#ssoId').focus();
});
</script>
</body>
</html>
It refers to loginFragment defined as:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:id="loginFragment" th:fragment="loginFragment">
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="assets/img/favicon.png" type="image/x-icon" />
<link th:href="@{/assets/css/bootstrap.min.css}" />
<link th:href="@{/assets/css/font-awesome.min.css}"/>
<link th:href="@{/assets/css/beyond-login.css}"/>
<link th:href="@{/assets/css/demo.min.css}" />
<link th:href="@{/assets/css/animate.min.css}" />
<link th:href="@{/assets/css/jquery-ui.css}" />
<link th:href="@{/assets/css/login.css}"/>
<link th:href="@{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300}"/>
<script th:src="@{/assets/js/skins.min.js}" ></script>
<script th:src="@{/assets/js/jquery-2.2.3.min.js}" ></script>
<script th:src="@{/assets/js/bootstrap.min.js}" ></script>
<script th:src="@{/assets/js/slimscroll/jquery.slimscroll.min.js}" ></script>
<script th:src="@{/assets/js/beyond.js}" ></script>
<script th:src="@{/assets/js/bootstrap.min.js}" ></script>
</head>
<body>
<div class="container">
</div>
</body>
</html>
the webapp
folder structure is:
webapp
assets
css
img
js
WEB-INF
html
admin
fragments
home
login.html
The landing page uses a different fragment to load CSS and JS, but neither fragments can't read the CSS and JS files. I've tried comparing with the other project to no evident difference. Even file permissions are the same.
On the landing page, Firebug shows me this:
<script src="/cms-stock/assets/js/jquery-ui.js" type="text/javascript">
Reload the page to get source for: http://localhost:8080/cms-stock/assets/js/jquery-ui.js
</script>
And everytime I try to call a CSS or JS file on the browser, I am redirected to the landing page.
What am I missing here?
解决方案
By default, Thymeleaf expects us to place templates in the src/main/resources/templates
folder.
And for CSS and JavaScript files, the default directory is src/main/resources/static
.
Change your resources
folder structure to:
src
main
resources
static
css
img
js
templates
admin
fragments
home
login.html
CSS usage e.g.
<link th:href="@{/css/beyond-login.css}" rel="stylesheet" />
JS usage e.g.
<script type="text/javascript" th:src="@{/js/beyond.js}"></script>
这篇关于Thymeleaf + HTML5 - 找不到 JS 或 CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文