在 Spring Boot 应用程序和 Docker 中使用 Thymeleaf 将 CSS 和 JS 链接到 HTML 页面

Question

我正在尝试做一件非常简单的事情：将样式表 .css 文件和 .js 文件添加到我的 html 页面，名为：“scalata.html”，但每次我收到这些错误时：

获取https://my-domain.app/css/scalata.css 404（未找到）

GET https://my-domain.app/js/scalata.js net::ERR_ABORTED 404（未找到）

首先，在我的 pom.xml 文件中，我添加了这些行，以便将 ThymeLeaf 正确设置到我的 Spring Boot 项目和 Spring-Boot ResourceLocations 中：

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

这是我完整的 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 https://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.7.0</version>
         <relativePath/> 
    </parent>
    <groupId>com.groom</groupId>
    <artifactId>my-class</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>my-class</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.source>1.8</maven.compiler.source>
        <java.version>1.8</java.version>
        <!--<springsecurity.version>5.1.1.RELEASE</springsecurity.version-->
    </properties>
        <dependencies>
            <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.16.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-mongodb</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
            <dependency> 
                <groupId>org.json</groupId>
                <artifactId>json</artifactId>
                <version>20230227</version>
            </dependency>
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.11.0</version>
            </dependency>
        <dependency>
                <groupId>io.jsonwebtoken</groupId>
                <artifactId>jjwt</artifactId>
                <version>0.9.1</version>
            </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-core</artifactId>
            <version>6.1.0</version>
        </dependency>
        <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <version>1.18.30</version>
                <scope>provided</scope>
            </dependency>
        <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-mail</artifactId>
            </dependency>
            <dependency>
                <groupId>org.apache.httpcomponents</groupId>
                <artifactId>httpclient</artifactId>
            </dependency>
            <dependency>
                <groupId>org.mongodb</groupId>
            <artifactId>mongo-java-driver</artifactId>
                <version>3.8.2</version>
        </dependency>
        </dependencies>
<build>
    <plugins>
        <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>
    </plugins>
</build>

</project>

这是我的“scalata.html”：

<!DOCTYPE html>

<!--Adding Thymeleaf-->
<html lang ="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--Enabling proper responsive behavior-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>My Game</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" >
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link href="../static/css/scalata.css" th:href="@{/css/scalata.css}" rel="stylesheet" />

    <script src="../static/js/scalata.js" th:src="@{/js/scalata.js}">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
    

编辑： 这是我的文件夹结构：

\---src
    +---main
        +---java  
        +---resources  
            +---jquery  
            +---static  
                +---css  
                    -scalata.css  
                +---js  
                    -scalata.js  
            +---templates
                -scalata.html

你能帮我吗？

我尝试了这个：在 spring-boot 项目中将 CSS 等静态文件放在哪里？还有这个：使用 Thymeleaf 将 CSS 链接到 HTML 视图

Answer 1

经过几天的搜索，我终于找到了解决问题的方法。 我忘了提及我的应用程序使用代理 (ui_gateaway)，这是

default.conf

:

server {
    listen 80;
    #timeout attesa back end
    proxy_read_timeout 6000s;

    client_max_body_size 5M;
    client_body_timeout 600s;

    location = / {
        return 301 /login;
    }

    error_page 500 /error.html;
    
    location ~ ^/(scalata|pageA|pagaB|t1) {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass http://my-class-controller-1:8080;
    }

    location ^~ /api {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass http://api_gateway-gateway-1:8090;
    }

    access_log off;
    error_log  /var/log/nginx/error.log error;
}

代理负责将请求路由到不同的端点，但 /css/scalata.css 和 /js/scalata.js 端点处的 GET 未重定向，因此我以这种方式解决：