我是网络应用程序编程的新手，我需要一些小项目的帮助。
我使用 create-react-app 创建了一个项目，它正确地在localhost:3000上工作。
然后我使用带有maven的spring boot创建了另一个项目，它再次正确地处理localhost:8080。
现在我想让react应用程序与spring boot app相互作用。
我尝试了一些我找到的东西，它不起作用，如果有人可以向我解释这是如何工作的，以及如何做我想创造的东西，我希望如此。
项目：
一个简单的石头剪刀游戏，客户看到React API，他选择摇滚，纸张或剪刀，它向弹簧靴部分发送请求，在那里选择一个随机的（摇滚，纸张，剪刀），并将响应发送回react客户端，在那里他会看到他是赢还是输，我还希望将所有内容连接到我将存储所有游戏的数据库。
我正在使用的代码：
app.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
greeting: "This is a false greeting"
}
}
componentDidMount() {
fetch("/test").then(function(response) {
return response.text();
}).then((text) => {
this.setState({greeting: text})
});
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get test, edit <code>src/App.js</code> and save to reload.
</p>
<p>{this.state.greeting}</p>
</div>
);
}
}
export default App;
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>pfc.app</groupId>
<artifactId>gs-spring-boot</artifactId>
<version>0.1.0</version>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.2.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>
<properties>
<java.version>1.8</java.version>
</properties>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
package.json
{
"name": "pfc",
"version": "0.1.0",
"private": true,
"dependencies": {
"maven": "^4.4.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8080/"
}
Application.java
package pfc.app;
import java.util.Arrays;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.Bean;
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
@Bean
public CommandLineRunner commandLineRunner(ApplicationContext ctx) {
return args -> {
System.out.println("Let's inspect the beans provided by Spring Boot:");
String[] beanNames = ctx.getBeanDefinitionNames();
Arrays.sort(beanNames);
for (String beanName : beanNames) {
System.out.println(beanName);
}
};
}
}
HelloController.java
package pfc.app;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestMapping;
@RestController
public class HelloController {
@RequestMapping("/test")
public String test() {
return "Greetings from Spring Boot!";
}
@RequestMapping("/test2")
public String test2() {
return "Another greeting!";
}
}
它应该在Greetings from Spring Boot!页面中显示“localhost:3000”，但它没有，它显示了这一点：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <!-- manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ --> <link rel="manifest" href="/manifest.json"> <link rel="shortcut icon" href="/favicon.ico"> <!-- Notice the use of in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> <script type="text/javascript" src="/static/js/bundle.js"></script></body> </html>
有人可以帮我解决这个问题吗？
有人可以向我解释如何使用这些组件进行项目吗？ （将响应中的数据发送到弹簧引导并接收来自弹簧引导的响应）