spring boot + thymeleaf 3 + bootStrap,配置bootstrap返回404错误

问题描述 投票:0回答:1

当我在Spring-boot中配置thymeleaf和Bootstrap时,我无法导入Bootstrap静态资源。我知道有很多类似的问题,但我无法为我解决。

如果我使用网络资源

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

,它适用于我,但我需要使用静态资源,当我进行以下配置,它给我404错误

像这样的网页, book.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>book</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet"/>
</head>
<body>

<div class="container" style="max-width: 700px;">
    <h2 class="page-header" style="margin-top: 70px;">note</h2>
<div class="well" th:object="${book2}">
    <p>
        <strong>at:</strong><span th:text="*{at}">default</span>
    </p>
    <p>
        <strong>name:</strong><span th:text="*{name}">default</span></p>
    <p>
        <strong>number:</strong><span th:text="*{number}">default</span></p>
    <p>
        <strong>retest:</strong><span th:text="*{retest}">default</span></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>




</body>
</html>

Maven设置 pom.xml中:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ahua</groupId>
    <artifactId>springdemo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springdemo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>11</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mariadb.jdbc</groupId>
            <artifactId>mariadb-java-client</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

spring-boot yml设置,我使用过“context-path:/ path”,

我不知道它是否会影响资源路径。 应用uat.yml:

server:
  port: 8081
  servlet:
    context-path: /path    
logging:
  level:
    root: WARN
    com:
      ahua:
        springdemo: Debug
  file: log/mylog
book:
  name: 測試參數UAT
  number: 77777
  at: at參數${random.uuid}
  retest: ${book.name},try it
spring:
  datasource:
    driver-class-name: org.mariadb.jdbc.Driver
    url: jdbc:mariadb://127.0.0.1:3306/book?useUnicode=true&characterEncoding=utf-8
    username: fansofcheer
    password: cheerstyle

  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true

![项目配置]:https://drive.google.com/open?id=1MPti9SzDdllsGsipVtnpHCeZQtSgFgmk

![错误页面]:https://drive.google.com/open?id=1qWghnGlyCV4lG0684-1kj_scIyX2dFaM

css twitter-bootstrap spring-boot thymeleaf
1个回答
0
投票

尝试改变

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

<link href="/css/bootstrap.css" rel="stylesheet" th:href="@{/css/bootstrap.css}">
© www.soinside.com 2019 - 2024. All rights reserved.