Fatal编程技术网
  • javascript/
  • Javascript JS脚本没有'；t在Thymeleaf模板中工作

Javascript JS脚本没有'；t在Thymeleaf模板中工作

javascript html css spring

Javascript JS脚本没有'；t在Thymeleaf模板中工作,javascript,html,css,spring,thymeleaf,Javascript,Html,Css,Spring,Thymeleaf,我正试图在我的Spring应用程序中添加一个默认的404错误页面，我想最好添加一个动画模板，如下所示： 整个想法是验证表单，如果失败，则重定向到错误页面。 基本上，重定向工作正常，但我的问题是我无法使JS部分运行（tost不会弹出：-/） 下面是我的错误页面的外观： 哎呀。。。出了点问题！ 我使用的CSS和JS代码都包含在我在开始时附带的模板中 以下是项目资源结构的快照： 我做错了什么？ 将这样的HTML模板导入Spring Boot/Thymeleaf项目的最佳实践是什么 提前感谢您的帮

我正试图在我的Spring应用程序中添加一个默认的404错误页面，我想最好添加一个动画模板，如下所示：

整个想法是验证表单，如果失败，则重定向到错误页面。 基本上，重定向工作正常，但我的问题是我无法使JS部分运行（tost不会弹出：-/）

下面是我的错误页面的外观：


哎呀。。。出了点问题！
我使用的CSS和JS代码都包含在我在开始时附带的模板中

以下是项目资源结构的快照：

我做错了什么？ 将这样的HTML模板导入Spring Boot/Thymeleaf项目的最佳实践是什么

提前感谢您的帮助

亲切问候,， 马修

编辑： 因此，我将html页面更改为该表单：


哎呀。。。出了点问题！
此外，我还更新了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仍然无法按预期工作：-/

几个注意事项：

将
error.js
脚本的JavaScript引用更改为：

<script type="text/javascript" th:src="@{/js/error.js}"></script>
如果jQuery不可用，您将在浏览器控制台中看到错误。

您的文件结构看起来不错。您已将js文件添加到错误页面中

 <script type="text/javascript" th:src="@{/static/js/error.js}"></script>
但我不认为你们需要在JS的源URL中提到静态，把它改为

<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>



org.webjars

尝试更改HTML页面中的JavaScript引用：


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



好了，伙计们，我终于让它运行起来了。在我的例子中，问题是html的头部缺少jQuery的脚本标记。我使用了谷歌的CDN主机：





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



哎呀。。。出了点问题！



再次感谢你的帮助！干杯
 嗨，阿吉特，谢谢你的回答！所以，我应用了您的建议，但是jQuery显然仍然有一些问题，因为我在浏览器的控制台中仍然有错误。我是否可能需要比您发送的依赖项更新的依赖项？请检查一次，因为同样的依赖项也适用于我。不幸的是，我再次检查-仍然相同…：-/我得到：“未捕获的引用错误：$未定义”…嗨，钱德拉，努奥普，这实际上让事情变得更糟…：）更改后也不会正确显示CSS或JS。

<!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>



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