Question

我正在尝试使用ReactJS为前端设置Spring Boot Rest API。在以下情况下，实现此目标的正确方法是什么？

作为Java后端开发人员多年，我在前端使用了JSF和相关组件库。现在，我正在努力想象ReactJS和Spring Boot的集成。我在后端有许多RESTful Spring Boot微服务，它们在代理后面（准确地说是Zuul和SSO和OAuth2-受JWT保护）。我的前端应用程序将包含两个部分。登陆页面和管理面板（仪表板）。对于此设置，将ReactJS和Spring Boot集成的正确方法是什么？我看过两种方法。一种方法是将两个应用程序捆绑在一起，然后使用Maven进行构建，使它们在websocket上进行通信，另一种方法是将两个应用程序完全分开。

我遇到的基于Maven的方法：

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.6</version>
    <configuration>
        <installDirectory>target</installDirectory>
    </configuration>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
                <nodeVersion>v10.11.0</nodeVersion>
                <npmVersion>6.4.1</npmVersion>
            </configuration>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <execution>
            <id>webpack build</id>
            <goals>
                <goal>webpack</goal>
            </goals>
        </execution>
    </executions>
</plugin>

通过遵循上述方法，我是否应该期望我的应用通过安全性具有更多的功能，或者仅使用令牌/ api密钥调用api就可以了，就像我最近已经尝试过的那样。

Answer 1

尽管frontend-maven-plugin插件对于通过maven构建前端应用程序非常有帮助，但是我将前端与Java应用程序完全隔离。前端应用程序具有自己的构建配置和工具，而使用maven强制构建前端应用程序有点麻烦，恕我直言。

关于安全性，我想说这两种实现方式之间并没有太大区别，因为在两种情况下，后端均以403响应，而前端则必须处理它。但是，您的第一个选择是Java应用程序可以控制是否最初允许访问静态文件。如果您不想事先将静态文件发送给未经身份验证的用户，则更高级别的访问管理工具（例如Keycloak）可能会有所帮助。

Answer 2

在pom.xml中添加属性->

<properties>
        <java.version>1.8</java.version>
        <spring-cloud.version>Finchley.SR1</spring-cloud.version>
        <frontendSrcDir>${project.basedir}/src/main/frontend</frontendSrcDir>
        <node.version>v8.11.3</node.version>
        <npm.version>5.6.0</npm.version>
        <frontend-maven-plugin.version>1.6</frontend-maven-plugin.version>
    </properties>

依赖性

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

内置pom.xml

<build>
        <plugins>

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

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

                <configuration>
                    <nodeVersion>${node.version}</nodeVersion>
                    <npmVersion>${npm.version}</npmVersion>
                    <workingDirectory>${frontendSrcDir}</workingDirectory>
                    <installDirectory>${project.build.directory}</installDirectory>
                </configuration>

                <executions>
                    <execution>
                        <id>install-frontend-tools</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                    </execution>

                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <execution>
                        <id>build-frontend</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <version>3.1.0</version>
                <executions>
                    <execution>
                        <id>position-react-build</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${project.build.outputDirectory}/templates/yourdirectory</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${frontendSrcDir}/build</directory>
                                    <filtering>false</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

控制器->

@Controller
@RequestMapping("/sample")
public class WebController {

    @RequestMapping({"/",""})
    public String index() {
        return "redirect:/sample/default/";
    }

    @RequestMapping("/default/**")
    public String catalogsListing() {
        return "shop/index.html";
    }
}

对我有用。.

引用：https://spring.io/guides/tutorials/react-and-spring-data-rest/

将ReactJS与Spring Boot集成的正确方法是什么？

2 个答案: