我打算设置一个Spring-Angular应用程序.我立即开始使用Hello World示例来测试如何设置环境.我最终做了什么:
在此应用程序中创建Spring-Project并创建Angular-application.现在我可以通过HttpClient角度模块访问Spring-REST-Controllers. (代码示例见下文).
优点:我可以使用mvn包将Angular和Spring部分打包到一个jar中,然后将它部署到我的tomcat上.可悲的是,当我运行服务时,只执行了前端,我无法访问后端的数据.有没有办法设置我的环境,以便我可以获得单项目解决方案的优势,仍然使用ng服务来测试它?
我尝试了什么:
打包并通过终端(java -jar%jar-file%)执行它,并使用localhost:8080 / hello作为我的HttpClient的路径而不是简单/ 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'];
});
}
}
REST的控制器:
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\”\u0026gt;
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'];
});
您需要执行一些代理配置.
在项目内的package.json所在的同一目录中创建一个proxy-config.json文件.
{
"/": {
"target": "http://localhost:8080",
"secure": false
}
}
在package.json里面脚本用“start”更新“start”命令:“ng serve –proxy-config proxy-config.json”,
之后尝试使用npm start命令来运行您的项目.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。