spring-boot

为什么无法从ui应用程序中读取spring boot angularjs网关应用程序？

发布于 2021-02-02 11:36:09

我通过以下链接的教程学习了spring的可伸缩性功能。具体来说，本教程的第6部分使用网关应用程序来规范对在其他服务器上运行的应用程序的访问。

我已经严格按照以下步骤操作，但是当我启动所有三个应用程序并输入localhost:8080/uiWeb浏览器时，我得到的只是“问候”一词，没有id或hello世界，也没有CSS。

当我打开开发者工具在Firefox的要求，我看到了CSS和JS资源的GET请求越来越404错误指向的URL喜欢http://localhost:8080/js/hello.js
的，而不是
指向http://localhost:8080/ui/js/hello.js，作为本教程的测试部分建议。 如何更改此设置，以便在浏览器中显示问候语？

这是我逐步完成的工作，紧跟本教程的第六步，首先是重新创建了第一ui部分的resource起点和第三部分的起点：

创建UI示例入门应用

# mkdir ui 
# chmod -R 777 ui
# cd ui
# curl https://start.spring.io/starter.tgz -d style=web -d style=security -d name=ui | tar -xzvf -

Eclipse>文件>导入>现有Maven项目>导航到ui文件夹>完成

创建index.html中src/main/resources/static，并添加以下：

<!doctype html>
<html>
<head>
<title>Hello AngularJS</title>
<link href="css/angular-bootstrap.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}
</style>
</head>

<body ng-app="hello">
  <div class="container">
    <h1>Greeting</h1>
    <div ng-controller="home" ng-cloak class="ng-cloak">
      <p>The ID is {{greeting.id}}</p>
      <p>The content is {{greeting.content}}</p>
    </div>
  </div>
  <script src="js/angular-bootstrap.js" type="text/javascript"></script>
  <script src="js/hello.js"></script>
</body>
</html>

将以下行添加到src/main/resources/application.properties：

security.user.password=some.password
server.port: 8081
security.sessions: NEVER  // The "security.sessions" setting means that Spring Security will accept cookies as authentication tokens but won’t create them unless they already exist.

添加以下内容以pom.xml使用wro4j下载并集成angular和bootstrap等：

<build>
  <resources>
    <resource>
      <directory>${project.basedir}/src/main/resources</directory>
    </resource>
    <resource>
      <directory>${project.build.directory}/generated-resources</directory>
    </resource>
  </resources>
  <plugins>
    <plugin>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>
    <plugin>
      <artifactId>maven-resources-plugin</artifactId>
      <executions>
        <execution>
          <!-- Serves *only* to filter the wro.xml so it can get an absolute
            path for the project -->
          <id>copy-resources</id>
          <phase>validate</phase>
          <goals>
            <goal>copy-resources</goal>
          </goals>
          <configuration>
            <outputDirectory>${basedir}/target/wro</outputDirectory>
            <resources>
              <resource>
                <directory>src/main/wro</directory>
                <filtering>true</filtering>
              </resource>
            </resources>
          </configuration>
        </execution>
      </executions>
    </plugin>
    <plugin>
      <groupId>ro.isdc.wro4j</groupId>
      <artifactId>wro4j-maven-plugin</artifactId>
      <version>1.7.6</version>
      <executions>
        <execution>
          <phase>generate-resources</phase>
          <goals>
            <goal>run</goal>
          </goals>
        </execution>
      </executions>
      <configuration>
        <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
        <cssDestinationFolder>${project.build.directory}/generated-resources/static/css</cssDestinationFolder>
        <jsDestinationFolder>${project.build.directory}/generated-resources/static/js</jsDestinationFolder>
        <wroFile>${project.build.directory}/wro/wro.xml</wroFile>
        <extraConfigFile>${basedir}/src/main/wro/wro.properties</extraConfigFile>
        <contextFolder>${basedir}/src/main/wro</contextFolder>
      </configuration>
      <dependencies>
        <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.2.0</version>
        </dependency>
      </dependencies>
    </plugin>
  </plugins>
</build>

Eclipse>文件>新建>源文件夹>（创建src / main / wro）

将以下内容添加到src/main/wro/wro.properties（将通过更少的代码编译CSS并最小化javascript）：

preProcessors=lessCssImport
postProcessors=less4j,jsMin

将以下内容添加到src/main/wro/wro.xml（声明单个组angular-bootstrap并引用css，js和main.less）：

<groups xmlns="http://www.isdc.ro/wro">
  <group name="angular-bootstrap">
  <css>webjar:bootstrap/3.2.0/less/bootstrap.less</css>
    <css>file:${project.basedir}/src/main/wro/main.less</css>
    <js>webjar:jquery/2.1.1/jquery.min.js</js>
    <js>webjar:angularjs/1.3.8/angular.min.js</js>
  </group>
</groups>

src/main/wro/main.less现在创建并将其留空。 main.less可用于自定义引导程序默认值。

创建src/main/resources/static/js/hello.js并添加以下内容：

angular.module('hello', [])
  .controller('home', function($scope, $http) {
  $http.get('/resource/').success(function(data) {
    $scope.greeting = data;
  })
});

更改com.example.UiApplication.java为：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.session.data.redis.config.annotation.web.http.EnableRedisHttpSession;

@SpringBootApplication
@EnableRedisHttpSession
public class UiApplication {

    public static void main(String[] args) {
        SpringApplication.run(UiApplication.class, args);
    }

}

//现在将以下内容添加到ui应用程序的pom.xml中：

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

创建单独的资源服务器

//导航到工作区的根

# cd /home/username/someworkspace
# mkdir resource 
# chmod -R 777 resource 
# cd resource
# curl https://start.spring.io/starter.tgz -d style=web -d name=resource -d language=java | tar -xzvf -

Eclipse>导入>现有Maven项目（导航到刚刚创建的资源文件夹）

// pom.xml在resource应用程序中添加以下内容：

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

//更改com.example.ResourceApplication.java为以下内容：

import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.session.data.redis.config.annotation.web.http.EnableRedisHttpSession;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
@RestController
@EnableRedisHttpSession
public class ResourceApplication {

  @RequestMapping("/resource")
  public Map<String,Object> home() {
    Map<String,Object> model = new HashMap<String,Object>();
    model.put("id", UUID.randomUUID().toString());
    model.put("content", "Hello World");
    return model;
  }

  public static void main(String[] args) {
    SpringApplication.run(ResourceApplication.class, args);
  }

}

//将以下内容添加到src/main/resources/application.properties：

server.port: 9000
security.sessions: NEVER

创建网关应用

将终端导航到工作区的根，然后

# cd /home/username/someworkspace
# mkdir gateway 
# chmod -R 777 gateway 
# cd gateway
# curl https://cloud-start.spring.io/starter.tgz -d style=web -d style=security -d style=cloud-zuul -d name=gateway -d style=redis | tar -xzvf -

Eclipse>文件>导入>现有Maven项目>（导航到网关目录）

//更改GatewayApplication.java为：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.netflix.zuul.EnableZuulProxy;
import org.springframework.session.data.redis.config.annotation.web.http.EnableRedisHttpSession;

@SpringBootApplication
@EnableRedisHttpSession
@EnableZuulProxy
public class GatewayApplication {

    public static void main(String[] args) {
        SpringApplication.run(GatewayApplication.class, args);
    }
}

//更改src/main/resources/application.properties为：

zuul.routes.ui.url: http://localhost:8081
zuul.routes.resource.url: http://localhost:9000
security.user.password: password
security.sessions: ALWAYS

。
启动并测试应用程序：

# cd /home/username/someworkspace/ui
# mvn spring-boot:run

然后打开第二个终端并键入

# cd /home/username/someworkspace/resource
# mvn spring-boot:run

然后打开第三个终端并键入：

# cd /home/username/someworkspace/gateway
# mvn spring-boot: run

//通过将localhost：8080 / ui放在浏览器中来测试应用

请注意，浏览器中的处仅显示“问候”一词localhost:8080/ui，并且没有id，也没有内容。此外，Firefox的开发人员工具显示404错误的资源，比如http://localhost:8080/js/hello.js哪些
应该改为 http://localhost:8080/ui/js/hello.js

但是，当我localhost:8081在浏览器中键入内容时，会看到css样式的“问候语”，后接“
ID为”和“内容为”，但是资源服务器中没有动态内容。该localhost:8081请求的firefox开发人员工具会为给出404
http://localhost:8081/resource/。

请注意，要测试对以上所做的任何更改，只需在相应的控制台中键入control C，然后键入kill $(lsof -t -i:8080)or
8081或9000，然后mvn spring-boot:run

那么，我对上面的代码进行了哪些更改以获取ID和问候语以通过网关加载？

关注者
0
被浏览
100
举报
1 个回答
  • 面试哥
    面试哥 2021-02-02
    为面试而生，有面试问题，就找面试哥。

    看起来像是您的html页面中的问题。您应该确保链接正确。Zuul本质上所做的是将URL从网关映射到后端。为了使示例正常工作，您必须将angular应用程序中的url更改为，/resource/resource或将资源应用程序中的控制器更改为/。还要确保所有应用程序都具有spring-
    boot-starter-security作为依赖项，以允许共享sec上下文。或完全禁用安全性以首先调试问题。



推荐阅读
知识点
面圈网VIP题库

面圈网VIP题库全新上线，海量真题题库资源。 90大类考试，超10万份考试真题开放下载啦

去下载看看