在 Spring Boot 中集成 JQuery答案

【问题标题】：Integrating JQuery in Spring Boot在 Spring Boot 中集成 JQuery
【发布时间】：2017-03-27 22:18:28
【问题描述】：

我在将 JQuery 集成到 Spring 引导项目（Spring 新手）时遇到问题。我尝试按照文档进行操作，但仍然无法正常工作。我正在使用 Java/Spring + Thymeleaf。文档说我必须执行以下操作：

WebJar 必须是您的应用程序的依赖项

WebJar 需要位于应用程序运行的 CLASSPATH 中

您的容器、Web 框架或应用程序需要提供来自 Jar 文件的静态资产

参考：http://www.webjars.org/documentation#springboot

这是我的 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>

<groupId>org.springframework</groupId>
<artifactId>gs-securing-web</artifactId>
<version>0.1.0</version>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.2.RELEASE</version>
</parent>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!-- tag::security[] -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <!-- end::security[] -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.2.0</version>
    </dependency>  
</dependencies>

<properties>
    <java.version>1.8</java.version>
</properties>
<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>
</project>

然后我还在我的 Config 类中添加了资源处理程序，该类扩展了 WebMvcConfigurerAdapter 类。我添加了以下方法：

        @Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
    registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}

然后在我的 HTML 文件中，我有以下几行：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <title>Hello World!</title>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        alert("JQuery works");
    });
    </script>
</head>
<body>
    <h1 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]]!</h1>
    <form th:action="@{/logout}" method="post">
        <input type="submit" value="Sign Out"/>
    </form>
     <script type="text/javascript" src="webjars/jquery/3.2.0/jquery.min.js"></script>
</body>
</html>

但是 JQuery 仍然没有加载。它说它是未定义的。谁能告诉我怎么了？

【问题讨论】：

标签： spring-boot webjars

【解决方案1】：

好的，我发现了问题。配置的一切都是正确的，但我必须在文档准备功能之前添加<script type="text/javascript" src="webjars/jquery/3.2.0/jquery.min.js"></script>。有人可以解释为什么会这样吗？

【讨论】：

好的。我找到了这篇文章：idiallo.com/javascript/async-jquery。看起来它必须与时间有关。要深入挖掘。但无论如何，我的问题解决了。案件结案。
你必须先加载jQuery才能使用jQuery。