js脚本在一个模板中不起作用

8hhllhi2 于 2021-07-26 发布在 Java

关注(0)|答案(4)|浏览(359)

我正试图在我的spring应用程序中添加一个默认的404错误页，我想添加这样一个动画模板会很好：https://codepen.io/wikyware-net/pen/xywexe
整个想法是验证表单，如果失败，则重定向到错误页。基本上，重定向工作正常，但我的问题是我不能使js部分运行（tost不会弹出：-/）。。。
下面是我的错误页的样子：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Ooops... Something went wrong!</title>
    <meta name="description" content="Создание адаптивного сайта"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/css/error.css}"/>
    <script type="text/javascript" th:src="@{/static/js/error.js}"></script>
</head>
<body>
<div class="ag-page-404">
    <div class="ag-toaster-wrap">
        <div class="ag-toaster">
            <div class="ag-toaster_back"></div>
            <div class="ag-toaster_front">
                <div class="js-toaster_lever ag-toaster_lever"></div>
            </div>
            <div class="ag-toaster_toast-handler">
                <div class="ag-toaster_shadow"></div>
                <div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
            </div>
        </div>

        <canvas id="canvas-404" class="ag-canvas-404"></canvas>
        <img class="ag-canvas-404_img"
             src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
    </div>
    <div>
        <a th:href="@{/home}" target="_blank" class="btn-primary">Go back</a>
    </div>
</div>
</body>

我使用的css和js代码都包含在我在开始时附加的模板中。
以下是项目资源结构的快照：

我做错什么了？将这样的html模板导入springboot/thymeleaf项目的最佳实践是什么？
事先谢谢你的帮助。
谨致问候，马修

编辑：

所以我把我的html页面改成这样：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Ooops... Something went wrong!</title>
    <meta name="description" content="Создание адаптивного сайта"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/css/error.css}"/>
</head>
<body>
<div class="ag-page-404">
    <div class="ag-toaster-wrap">
        <div class="ag-toaster">
            <div class="ag-toaster_back"></div>
            <div class="ag-toaster_front">
                <div class="js-toaster_lever ag-toaster_lever"></div>
            </div>
            <div class="ag-toaster_toast-handler">
                <div class="ag-toaster_shadow"></div>
                <div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
            </div>
        </div>

        <canvas id="canvas-404" class="ag-canvas-404"></canvas>
        <img class="ag-canvas-404_img" src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
    </div>
</div>
    <div>
        <a th:href="@{/home}" target="_blank" class="btn-primary">Go back</a>
    </div>
    <script src="webjars/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" th:src="@{/js/error.js}"></script>
    <script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</div>
</body>

另外，我还更新了build.gradle文件：

buildscript {
    ext {
        springBootVersion = '2.0.5.RELEASE'
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
}

plugins {
    id 'war'
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'

group = 'pl.mpas'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8
targetCompatibility = 1.8

repositories {
    mavenLocal()
    mavenCentral()
}

dependencies {
    compile('org.springframework.boot:spring-boot-starter-data-jpa')
    compile('org.springframework.boot:spring-boot-starter-thymeleaf')
    compile('org.springframework.boot:spring-boot-starter-web')
    compile group: 'org.springframework.boot', name: 'spring-boot-starter-validation', version: '2.3.7.RELEASE'
    compile group: 'org.webjars', name: 'bootstrap', version: '3.3.6'
    compile group: 'org.webjars', name: 'bootstrap-datepicker', version: '1.0.1'
    compile group: 'org.webjars.bower', name: 'jquery', version: '3.5.1'
    runtime('org.springframework.boot:spring-boot-devtools')
    runtime('com.h2database:h2')
    runtime('mysql:mysql-connector-java')
    testCompile('org.springframework.boot:spring-boot-starter-test')
    compile('org.apache.struts:struts2-core:2.3.16.1')
    providedCompile('javax.servlet.jsp:jsp-api:2.1')
    providedCompile('javax.servlet:javax.servlet-api:3.1.0')
}

多亏了这一点，我在浏览器的控制台中再也看不到任何错误了。然而。。。js仍然无法按预期工作：-/

spring JavaScript Html thymeleaf css

来源：https://stackoverflow.com/questions/65739599/js-script-doesnt-work-in-a-thymeleaf-template

4条答案

按热度按时间

r55awzrz1#

几个注意事项：
更改您的javascript引用 error.js 脚本：

<script type="text/javascript" th:src="@{/js/error.js}"></script>

没有必要包括 /static url的一部分。
另外，页面中是否包含jquery？例如：

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

如果jquery不可用，您将在浏览器控制台中看到一个错误。

赞(0）回复(0）举报 2021-07-26

yr9zkbsy2#

尝试更改html页中的javascript引用：

<link rel="stylesheet" href="../static/css/error.js" type="text/javascript" th:href="@{/error.js}">

赞(0）回复(0）举报 2021-07-26

kwvwclae3#

好了，伙计们，我终于跑起来了。在我的例子中，问题是在html的head部分缺少jquery的script标记。我使用了谷歌的cdn主机：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

因此，我的页面的最终工作版本如下所示：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Ooops... Something went wrong!</title>
    <meta name="description" content="Создание адаптивного сайта"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/css/error.css}"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="ag-page-404">
    <div class="ag-toaster-wrap">
        <div class="ag-toaster">
            <div class="ag-toaster_back"></div>
            <div class="ag-toaster_front">
                <div class="js-toaster_lever ag-toaster_lever"></div>
            </div>
            <div class="ag-toaster_toast-handler">
                <div class="ag-toaster_shadow"></div>
                <div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
            </div>
        </div>

        <canvas id="canvas-404" class="ag-canvas-404"></canvas>
        <img class="ag-canvas-404_img"
             src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
    </div>
</div>
<div>
    <a th:href="@{/home}" target="_blank" class="btn-primary">Go back</a>
</div>
    <script src="webjars/jquery/3.5.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:src="@{/js/error.js}"></script>
</div>
</body>

再次感谢您的帮助！干杯！

赞(0）回复(0）举报 2021-07-26

ttygqcqt4#

你的文件结构看起来不错。您在错误页中添加了js文件

<script type="text/javascript" th:src="@{/static/js/error.js}"></script>

但是我不认为你需要在js的源url中提到static，把它改成

<script type="text/javascript" th:src="@{/js/error.js}"></script>

另外，请在pom.xml中为jquery和bootstrap添加以下依赖项

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.6</version>
</dependency>

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap-datepicker</artifactId>
    <version>1.0.1</version>
</dependency>

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>1.9.1</version>
</dependency>

更改error.html文件，如下所示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Ooops... Something went wrong!</title>
    <meta name="description" content="Создание адаптивного сайта"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/css/error.css}"/>
</head>
<body>
<div class="ag-page-404">
    <div class="ag-toaster-wrap">
        <div class="ag-toaster">
            <div class="ag-toaster_back"></div>
            <div class="ag-toaster_front">
                <div class="js-toaster_lever ag-toaster_lever"></div>
            </div>
            <div class="ag-toaster_toast-handler">
                <div class="ag-toaster_shadow"></div>
                <div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
            </div>
        </div>

        <canvas id="canvas-404" class="ag-canvas-404"></canvas>
        <img class="ag-canvas-404_img" src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
    </div>
</div>
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/js/error.js}"></script>
</body>
</html>

现在可以了。如果有任何疑问，请告诉我。refer:https://www.springboottutorial.com/spring-boot-with-jquery-and-bootstrap-web-jars

赞(0）回复(0）举报 2021-07-26

我来回答

js脚本在一个模板中不起作用

编辑：

4条答案

相关问题

热门标签

最新问答