尝试提供弹簧启动并对来自两个端点的js做出反应

Question

我想构建一个Spring Boot CRUD应用程序，它具有REST API（后端）和React / JS应用程序（前端）。我的应用程序的结构是一个多模块Maven应用程序，如下所示：。我想在localhost：5000上提供REST API，在localhost：8080上提供React / JS应用程序。我正在关注这些教程，here，here，here，here。代码如下：

webpack.config.js

const path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './app/index.html',
    filename: 'index.html',
    inject: 'body'
})
module.exports = {
    entry: [
        /**'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',**/
        path.join(__dirname, 'app', 'index.js')
    ],
    devtool: 'inline-source-map', 
    output: {
        path: path.join(__dirname, 'dist'),
        /**publicPath: '/assets/',**/
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        contentBase: path.join(__dirname, 'dist'),
        port: 8080,
        hot: true,
        proxy: {
        '/api/*': {
            target: 'http://localhost:5000',
            secure: false
        }
        }
    },
    module: {
        loaders: [
        {test: /\.jsx?$/, loaders: ['babel-loader'], include: path.join(__dirname, 'app')},
        {test: /\.css$/, loaders: ['style', 'css'], include: path.join(__dirname, 'app')}
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
}

Ubgrill / pom.xml的

<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>com.example</groupId>
    <artifactId>Ubgrill</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>pom</packaging>

    <modules>
        <module>frontend</module>
        <module>backend</module>
    </modules>

    <name>Ubgrill</name>
    <description>A CRUD application</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.9.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>

</project>

Ubgrill /前端/ 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>
    <parent>
        <groupId>com.example</groupId>
        <artifactId>Ubgrill</artifactId>
        <version>0.0.1-SNAPSHOT</version>
    </parent>

    <artifactId>frontend</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <properties>
        <node.version>v8.9.0</node.version>
        <yarn.version>v1.3.2</yarn.version>
        <frontend-maven-plugin.version>1.6</frontend-maven-plugin.version>
    </properties>

    <build>
    <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>${frontend-maven-plugin.version}</version>

            <executions>
                <execution>
                    <id>install node and yarn</id>
                    <goals>
                        <goal>install-node-and-yarn</goal>
                    </goals>
                    <phase>generate-resources</phase>
                </execution>
                <execution>
                    <id>yarn install</id>
                    <goals>
                        <goal>yarn</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                <execution>
                    <id>yarn build</id>
                    <goals>
                        <goal>yarn</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <arguments>build</arguments>
                    </configuration>
                </execution>
            </executions>
            <configuration>
                <nodeVersion>${node.version}</nodeVersion>
                <yarnVersion>${yarn.version}</yarnVersion>
            </configuration>
        </plugin>
    </plugins>
    </build>
</project>

Ubgrill /后端/ 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>
    <parent>
        <groupId>com.example</groupId>
        <artifactId>Ubgrill</artifactId>
        <version>0.0.1-SNAPSHOT</version>
    </parent>

    <artifactId>backend</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-rest</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

Ubgrill /前端/应用程序/ index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

Ubgrill /前端/应用/ index.html中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>React App Setup</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Ubgrill /前端/应用/组件/ App.jsx

import React from 'react';

export default class App extends React.Component {
    render() {
        return (
            <div style={{textAlign: 'center'}}>
                <h1>Hello World</h1>
            </div>);
        }
}

当我在前端文件夹中运行yarn start并且我在localhost：8080处访问浏览器时，我没有得到任何输出，但在终端中，我得到。我的问题是我如何纠正这个？。感谢。