无法将 bootstrap 和 angularjs 与 spring-boot 集成

Question

我在 Eclipse 中设置了一个 spring-boot 项目

我正在尝试集成 bootstrap 和 angularjs 以创建客户端功能，但出现以下错误：

2015-11-15 18:41:33.732 WARN 27978 --- [nio-8080-exec-5] osweb.servlet.PageNotFound : 找不到带有 URI [/webjars/bootstrap/3.3. 1/css/bootstrap.min.css] 在 DispatcherServlet 中，名称为“dispatcherServlet” 2015-11-15 18:41:33.738 WARN 27978 --- [nio-8080-exec-6] osweb.servlet.PageNotFound：没有为带有 URI [/webjars/angularjs/1.3.8/angular 的 HTTP 请求找到映射.min.js] 在 DispatcherServlet 中，名称为“dispatcherServlet”

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.loyola.ws</groupId>
    <artifactId>ws-online-shopping</artifactId>
    <version>0.1.0</version>
    <packaging>jar</packaging>

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

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-rest</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-entitymanager</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-spring-service-connector</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-heroku-connector</artifactId>
        </dependency>

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

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
        </dependency>

        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-asl</artifactId>
            <version>1.9.13</version>
        </dependency>

        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>1.9.13</version>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>

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

        <dependency>
          <groupId>org.webjars</groupId>
          <artifactId>angularjs</artifactId>
          <version>1.3.8</version>
        </dependency>

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

        <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>angular-ui-bootstrap</artifactId>
        <version>0.10.0</version>
        <exclusions>
        <exclusion>
            <groupId>org.webjars</groupId>
            <artifactId>angularjs</artifactId>
        </exclusion>
        <exclusion>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
        </exclusion>
        </exclusions>
    </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-hateoas</artifactId>
        </dependency>
    </dependencies>

    <properties>
        <java.version>1.8</java.version>
        <hibernate.dialect>org.hibernate.dialect.MySQL5Dialect</hibernate.dialect>
    </properties>


    <build>

        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
<!--                <configuration>
                    <additionalClasspathElements>
                        <additionalClasspathElement>src/main/resources</additionalClasspathElement>
                    </additionalClasspathElements>
                </configuration> -->
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <configuration>
                    <redirectTestOutputToFile>true</redirectTestOutputToFile>
                    <reuseForks>false</reuseForks>
                    <forkCount>1</forkCount>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <repositories>
        <repository>
            <id>spring-releases</id>
            <url>https://repo.spring.io/libs-release</url>
        </repository>
    </repositories>
    <pluginRepositories>
        <pluginRepository>
            <id>spring-releases</id>
            <url>https://repo.spring.io/libs-release</url>
        </pluginRepository>
    </pluginRepositories>
</project>

我的 index.html 包含：

<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.1/css/bootstrap.min.css"
      th:href="@{/webjars/bootstrap/3.3.1/css/bootstrap.min.css}"
      rel="stylesheet" media="screen"></link>

Answer 1

我想通了。 spring-boot 的默认类路径映射到 src/main/resources。当我检查错误控制台时，URI 直接在寻找 /static/css。因此，我没有为 /resources/ 定义映射，而是为 /static/ 定义了一个映射，如下所示：

这是工作代码

@Configuration
public class WebMvcAutoConfiguration extends WebMvcConfigurerAdapter {

    private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
            "classpath:/static/", "classpath:/static/css/", "classpath:/static/js/" };

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        if (!registry.hasMappingForPattern("/static/**")) {
            registry.addResourceHandler("/static/**").addResourceLocations(
                    CLASSPATH_RESOURCE_LOCATIONS);
        }
    }
}

Answer 2

静态资源需要使用<mvc:resources/>标签公开。

检查这个 Stackoverflow 问题：Spring 3 MVC resources and tag <mvc:resources />

所以，在您的 Spring XML 中创建一个条目，<mvc:resources mapping="/webjars/**" location="/webjars/" />。

所有静态文件都可以访问。

Answer 3

好吧，这里有一些关于代码的更多指针：

以下代码不是必需的：

@Configuration
public class WebMvcAutoConfiguration extends WebMvcConfigurerAdapter {

private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
        "classpath:/static/", "classpath:/static/css/", "classpath:/static/js/" };

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    if (!registry.hasMappingForPattern("/static/**")) {
        registry.addResourceHandler("/static/**").addResourceLocations(
                CLASSPATH_RESOURCE_LOCATIONS);
    }
}
}

Spring boot 已经为您完成了这项工作，您在上面想要实现的目标。

参考文档： https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot

解决这个问题的正确方法如下：

1.在资源文件夹内创建一个静态文件夹，即在 src.main.resources 内。

2.在静态文件夹中为 css 、js 和 images 文件夹创建单独的文件夹，并将 css /js 或 images 文件放在单独的文件夹中。

3.将你的html文件放在templates文件夹中。（此文件夹与静态文件夹平行）

4.Inside html 代码如下：

<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.1/css/bootstrap.min.css"
      th:href="@{/css/bootstrap.min.css}"
      rel="stylesheet" media="screen" />

和 js 文件，例如：

<script src="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.1/js/bootstrap.js"
      th:src="@{/js/bootstrap.js}"
       type="text/javascript"></script>

再指点一下，请把你的css和js直接放在文件夹里保存网络调用。

希望这会有所帮助。

Answer 4

我只是在几个小时内遇到了这个问题。 只需将 index.html 放在 static 文件夹下即可。