내 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 템플릿을 Spring Boot / 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는 여전히 예상대로 작동하지 않습니다. :-/