Thymeleaf + HTML5 - 找不到 JS 或 CSS [英] Thymeleaf + HTML5 - can't find JS or CSS

查看:35
本文介绍了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 用法例如





        
        
        
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆