我计划建立一个Spring-Angular应用程序。我立即从Hello World-example 开始,以测试如何设置环境。我最终要做的是:
Hello World
创建一个Spring项目并在该应用程序内创建一个Angular应用程序。现在,我可以Spring-REST- Controllers通过HttpClientAngular模块访问。(代码示例请参见下文)。
Spring-REST- Controllers
HttpClient
优点:我可以使用mvn包将Angular和Spring部件打包到一个jar中,然后将其部署到我的tomcat上。可悲的是,当我运行时,ng serve只执行前端,而无法访问后端中的数据。有没有办法设置我的环境,以便我可以享受一个项目解决方案的优势,并且仍然可以使用ng serve进行测试?
ng serve
我试过的
打包jar并通过terminal(java -jar %jar- file%)执行它,并localhost:8080/hello作为my的路径HttpClient而不是简单的/hello。这并没有令人遗憾地解决。
java -jar %jar- file%
localhost:8080/hello
/hello
到目前为止我得到的代码:
app.component.ts
import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'HelloWorld'; message: string; constructor(private http : HttpClient) {} ngOnInit() : void { //this is where I tried to use localhost:8080/hello instead this.http.get('/hello').subscribe( data => { console.log('DATA', data); this.message = data['message']; }); } }
休息控制器:
package com.example.helloWorld.controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class HelloWorldController { @GetMapping("/hello") public String sayHello() { return "{\"message\": \"Hello, World!\"}"; } }
pom.xml http://maven.apache.org/xsd/maven-4.0.0.xsd“> 4.0.0
<groupId>com.example</groupId> <artifactId>helloWorld</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>helloWorld</name> <description>Demo project for Spring Boot</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.0.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework.restdocs</groupId> <artifactId>spring-restdocs-mockmvc</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-autoconfigure</artifactId> <version>2.1.0.RELEASE</version> <type>jar</type> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <executions> <execution> <phase>validate</phase> <goals> <goal>exec</goal> </goals> </execution> </executions> <configuration> <executable>ng</executable> <workingDirectory>src/main/ui</workingDirectory> <arguments> <argument>build</argument> </arguments> </configuration> </plugin> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>
为此做
this.http.get('/hello').subscribe( data => { console.log('DATA', data); this.message = data['message']; });
您需要进行一些代理配置。proxy-config.json在项目中的相同目录中创建一个文件package.json。
proxy-config.json
package.json
{ "/": { "target": "http://localhost:8080", "secure": false } }
然后在package.json内部带有scriptsupdate 之后的try 命令中运行您的项目。"start"``"start": "ng serve --proxy-config proxy-config.json",``npm start
scripts
"start"``"start": "ng serve --proxy-config proxy-config.json",``npm start