SpringBoot + Thymeleaf 引入的css、js文件无效

发布于 2022-09-06 09:26:10 字数 2968 浏览 35 评论 0

今天尝试用spring boot + thymeleaf 集成 bootstrap 做一个简单的登录页面，参考着官方教程做：登录页。

最开始的时候，我先用<link>标签导入bootstrap，然后因为登录页自身的css样式不多，就用<style>做成内联样式放在了页面内部，当时的情况是内联样式起效但外部bootstrap.css没起作用。后来把登录页的css设置放到独立样式表中后，整个页面就彻底不渲染了。

下面是官方教程的效果与我运行的结果：
官方教程中的效果

我运行的结果
css文件夹我已经放在了statis路径下，引入也是用的thymeleaf th:href="@{/css/bootstrap.css}"标准语法，实在想不通为什么会不起作用。

下面是工程结构：

index.html页面代码

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link th:href="@{/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/signin.css}" rel="stylesheet" type="text/css">
    <title>Index</title>

</head>

<body>

<div class="container">

    <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>

</div>

<script th:src="@{/js/jquery-3.2.1.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>

</body>
</html>

application.properties设置

spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML5

Controller代码

package com.wxm.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @Author Created by OracleMing from IMSE of BUAA.
 * @Time 2017-07-07-20:24.
 * @Description 索引页面路由控制器
 */
@Controller
public class IndexController {

    @RequestMapping(name = "/index")
    public String indexPage(){
        return "index";
    }

}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巴黎盛开的樱花 2022-09-13 09:26:11

打开浏览器的开发者工具，切换到network看下请求的链接吧。

不建议用th:href="@{/css/bootstrap.css}这样的写法，推荐使用绝对路径：

th:href="@{~/css/bootstrap.css}

SpringBoot + Thymeleaf 引入的css、js文件无效

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（18）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。