Question

我正在使用Thymeleaf开发一个基于另一个的新应用程序。但是，我没有快速转发开发，而是在晚上的大部分时间里都遇到了问题。

问题是，Eclipse说（在其控制台上）Thymleaf在访问应用程序时已加载。到现在为止还挺好！但我缺乏所有的CSS和JS。我的目标网页包含指向以下但不是花哨的login.html文件的链接：

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

它指的是loginFragment，定义为：

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

webapp文件夹结构是：

webapp
    assets
        css
        img
        js
    WEB-INF
        html
            admin
            fragments
            home
            login.html

着陆页使用不同的片段来加载CSS和JS，但这两个片段都无法读取CSS和JS文件。我尝试与其他项目进行比较，没有明显区别。甚至文件权限都是一样的。

在着陆页上，Firebug向我展示了这一点：

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

每当我尝试在浏览器上调用CSS或JS文件时，我都会被重定向到目标网页。

我在这里缺少什么？

Answer 1

默认情况下，Thymeleaf 希望我们将模板放在 @RestController @RequestMapping("/emails") public class EmailController { @RequestMapping(method = RequestMethod.POST, value = "/register", consumes = MediaType.APPLICATION_JSON_VALUE) public ResponseEntity<?> register(@Valid @RequestBody CreateUserDTO createUserDTO) { emailRestService.processCreateUserMessage(createUserDTO); // Implementation of service to send mail to AWS SES return new ResponseEntity<>(HttpStatus.OK); } } 文件夹中。

对于 CSS 和 JavaScript 文件，默认目录为 src/main/resources/templates。

将您的 src/main/resources/static 文件夹结构更改为：

resources

CSS 用法例如

src
   main
      resources
         static
            css
            img
            js
         templates
            admin
            fragments
            home
            login.html

JS 用法例如

<link th:href="@{/css/beyond-login.css}" rel="stylesheet" />

Thymeleaf + HTML5 - 无法找到JS或CSS

1 个答案: