为什么不能开机春天从angularjs UI应用程序读取网关应用程序？ [英] why can't spring boot angularjs gateway app read from ui app?
问题描述
我正在学习有关春天的可扩展性功能使用教程以下链接。具体来说，<一个href=\"https://spring.io/guides/tutorials/spring-security-and-angular-js/#_multiple_ui_applications_and_a_gateway_single_page_application_with_spring_and_angular_js_part_vi\"相对=nofollow>教程第6部分采用了网关的应用程序来规范进入其他服务器上运行的应用。
I am learning about spring's scalability features using the tutorial at the following link. Specifically, part 6 of the tutorial uses a gateway app to regulate access to apps running on other servers.
我已经按照低于$ P $的步骤pcisely，但是当我启动所有三个应用程序，然后键入本地主机：8080 / UI 进入我的网络浏览器，所有的I得到的是问候语字，没有ID或打招呼的世界，没有CSS。
I have followed the steps below precisely, but when I start all three apps and then type in localhost:8080/ui into my web browser, all I get is the word "Greeting" with no id or hello world, and with no css.
当我打开开发工具在Firefox的请求，我看到了CSS和JS资源GET请求越来越404错误指向的网址，比如的http：//本地主机：8080 / JS / hello.js 而不是指向的http：//本地主机：8080 / UI / JS / hello.js ，作为 表明本教程的测试部分。 我怎样才能改变此问候语显示在浏览器？
When I open the developer tools for the request in Firefox, I see that the GET requests for css and js resources are getting 404 errors pointing to urls like http://localhost:8080/js/hello.js instead of pointing to http://localhost:8080/ui/js/hello.js, as the test section of the tutorial suggests. How can I change this so that the greeting displays in the browser?
下面是我首先重新从第一部分的 UI 出发点和资源分步骤进行，按照教程的步骤六由三部分起点：
Here is what I have done step by step, following the tutorial's step six by first recreating the ui starting point from part one and the resource starting point from part three:
创建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文件夹>完成
Eclipse > File > Import > Existing Maven Projects > Navigate to ui folder > Finish
在的src / main /资源创建并添加以下内容： index.html的 /静态
Create index.html in src/main/resources/static and add the following:
<!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 /资源/ 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引导等：
Add the following to pom.xml in order to download and integrate angular and bootstrap etc using wro4j:
<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）
Eclipse > File > New > Source Folder > (create src/main/wro)
添加以下的src / main / WRO / wro.properties （将更少编译CSS和缩小JavaScript）：
Add the following to src/main/wro/wro.properties (will compile css from less and minify javascript):
preProcessors=lessCssImport
postProcessors=less4j,jsMin
下面加入的src / main / WRO / wro.xml （声明了一个组角引导到与引用CSS，JS和main.less）：
Add the following to src/main/wro/wro.xml (declares a single group angular-bootstrap with references to css, js, and 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 可用于定制引导默认值。
Create src/main/wro/main.less and leave it empty for now. main.less can be used to customize bootstrap defaults.
创建的src / main /资源/静态/ 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);
}
}
//现在添加以下的用户界面应用程序的pom.xml：
// now add the following to the ui app's 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>
创建单独的资源服务器
//浏览到工作区的根
// navigate to root of workspace
# 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项目（导航资源刚刚创建的文件夹）
Eclipse > Import > Existing Maven Project (navigate to resource folder just created)
//添加以下的pom.xml 在资源应用程序：
// add the following to pom.xml in the resource app:
<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 /资源/ application.properties ：
server.port: 9000
security.sessions: NEVER
创建网关应用
导航终端工作区的根目录，然后
navigate terminal to root of workspace, then
# 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项目>（导航到网关目录）
Eclipse > File > Import > Existing Maven Project > (navigate to the gateway directory)
//改变 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 /资源/ 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
然后打开第二个终端并键入
Then open a second terminal and type
# cd /home/username/someworkspace/resource
# mvn spring-boot:run
然后打开第三终端，输入：
Then open a third terminal and type:
# cd /home/username/someworkspace/gateway
# mvn spring-boot: run
//测试通过将本地主机的应用程序：8080 / UI在浏览器
// test the app by putting localhost:8080/ui in the browser
请注意，只有单词问候语在浏览器中显示本地主机：8080 / UI ，并且没有ID，没有内容。此外，Firefox的开发人员工具显示资源的404错误，比如的http：//本地主机：8080 / JS / hello.js 其中而应该是 的http：//本地主机：8080 / UI / JS / hello.js
Note that only the word "Greeting" shows up in the browser at localhost:8080/ui, and that there is no id and no content. Also, the firefox developer tools show 404 errors for resources like http://localhost:8080/js/hello.js which should instead be http://localhost:8080/ui/js/hello.js
然而，当我键入本地主机：8081 在浏览器中，我得到的CSS样式的问候语，其次是ID是和内容 ，但是从资源服务器没有动态内容。 Firefox的开发工具的本地主机：8081 要求给予 HTTP 404：//本地主机：8081 /资源/ 。
However, when I type localhost:8081 in the browser, I get the css-styled "Greeting" followed by "The ID is" and "The content is", but no dynamic content from the resource server. The firefox developer tools for the localhost:8081 request give a 404 for http://localhost:8081/resource/.
需要注意的是，进行测试，以上面的任何改变，你只需在适当的控制台类型控制C，然后键入杀$（lsof的-t -i：8080）或8081或9000，然后 MVN春季启动：运行
Note that, to test any changes to the above, you just type control C in the appropriate console, then type kill $(lsof -t -i:8080) or 8081 or 9000, and then mvn spring-boot:run
那么，更改为我做的code以上，以获得ID和问候通过网关加载？
推荐答案
看起来像HTML页面的问题。您应该确保链接正确。什么Zuul在本质上确实是从网关到后端映射URL。为了让你的榜样工作，你必须在你的角度应用要么改变链接直接 /资源/资源或资源的应用程序控制器更改为 / 。同时确保所有应用有弹簧引导启动安全作为一个依赖，使秒范围内的共享。或禁用安全完全先调试您的问题。
Looks like an issue in your html page. You should make sure that links are correct. What Zuul in essence does is mapping urls from the gateway to the backend. To make your example work you have to either change the url in your angular app to /resource/resource or change the controller in the resource app to /. Also make sure that all of your apps have spring-boot-starter-security as a dependency to allow sharing of the sec context. Or disable security completely to debug your issue first.
这篇关于为什么不能开机春天从angularjs UI应用程序读取网关应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
