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

时间:2015-11-16 02:11:51

标签: angularjs twitter-bootstrap spring-mvc spring-boot

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

我正在尝试集成bootstrap和angularjs来创建客户端功能,但是我收到以下错误:

2015-11-15 18:41:33.732 WARN 27978 --- [nio-8080-exec-5] osweb.servlet.PageNotFound:找不到带URI的HTTP请求的映射[/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的HTTP请求的映射[/webjars/angularjs/1.3.8/angular DispatcherServlet中的.min.js],名称为“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>

4 个答案:

答案 0 :(得分: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);
        }
    }
}

答案 1 :(得分:0)

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

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

因此,在Spring XML中创建一个条目<mvc:resources mapping="/webjars/**" location="/webjars/" />

可以访问所有静态文件。

答案 2 :(得分:0)

嗯,这里有一些关于代码的更多指示:

以下代码不是必需的:

@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或图像文件放在单个文件夹中。

3.将您的html文件放在模板文件夹中。(此文件夹与静态文件夹并行)

4.在代码下面的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放在文件夹中保存网络电话。

希望这有帮助。

答案 3 :(得分:0)

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