鍍金池/ 問答/HTML5  Java  網(wǎng)絡(luò)安全  HTML/ SpringBoot + Thymeleaf 引入的css、js文件無效

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

今天嘗試用spring boot + thymeleaf 集成 bootstrap 做一個簡單的登錄頁面, 參考著官方教程做:登錄頁

最開始的時候,我先用<link>標(biāo)簽導(dǎo)入bootstrap, 然后因?yàn)榈卿涰撟陨淼腸ss樣式不多,就用<style>做成內(nèi)聯(lián)樣式放在了頁面內(nèi)部,當(dāng)時的情況是內(nèi)聯(lián)樣式起效但外部bootstrap.css沒起作用。 后來把登錄頁的css設(shè)置放到獨(dú)立樣式表中后,整個頁面就徹底不渲染了。

下面是官方教程的效果與我運(yùn)行的結(jié)果:
官方教程中的效果

我運(yùn)行的結(jié)果
css文件夾我已經(jīng)放在了statis路徑下,引入也是用的thymeleaf th:href="@{/css/bootstrap.css}"標(biāo)準(zhǔn)語法,實(shí)在想不通為什么會不起作用。

下面是工程結(jié)構(gòu):
工程結(jié)構(gòu)

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設(shè)置

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";
    }

}
回答
編輯回答
莓森
引用文字
其實(shí)Spring Boot 2.x 版本針對這個問題有最優(yōu)解決方案,直接修改application.properties 文件即可

spring.mvc.static-path-pattern=/static/**

詳情請看https://blog.csdn.net/hadues/...

2018年5月15日 07:44
編輯回答
雅痞

https://segmentfault.com/q/10...
我搗鼓半天才發(fā)現(xiàn)

2018年3月12日 21:06
編輯回答
尐飯團(tuán)

SpringBoot全服務(wù)化(Rest),然后頁面用NG、React、VUE等。

2017年11月17日 11:48
編輯回答
怪痞

不用模板引入,直接正常引入試試

2018年8月13日 15:27
編輯回答
大濕胸

你是不是編寫了mvc的配置類?如果是的話那就繼承WebMvcConfigurerAdapter,不要繼承WebMvcConfigurerationSupport,繼承后者表明完全接管springMvc,會導(dǎo)致springBoot的默認(rèn)設(shè)置都丟棄掉。

2017年3月6日 03:23
編輯回答
九年囚

兄弟 別用模板 追求動靜分離才是正解

2018年9月13日 06:09
編輯回答
懶豬

和你遇到同樣的問題,我覺得是目前thymeleaf的LEGACYHTML5的寫法不夠完善,目前沒有解決

2017年1月16日 11:22
編輯回答
風(fēng)清揚(yáng)

您好,我遇到了跟您相同的問題,請問您現(xiàn)在解決了嗎,我用的模板也跟您一樣,我也正被這個問題困擾著

2017年6月1日 21:11
編輯回答
憶當(dāng)年

我也遇到這兩的問題了,還沒解決。。。。

2018年8月13日 09:20
編輯回答
萌吟

打開瀏覽器的開發(fā)者工具,切換到network看下請求的鏈接吧。

不建議用th:href="@{/css/bootstrap.css}這樣的寫法,推薦使用絕對路徑:

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

2017年5月10日 01:41