搜索
搜索

在Java Spring MVC中运行React JS的问题

Tobias 发表于 Java
55
托比亚斯：

我正在学习使用React，并想在SpringBoot应用程序中使用它，但是我似乎无法正常工作。
我可以使用Spring-MVC创建一个网站，并在其上执行JavaScript代码（无需React，JSX）。但是我只是不知道如何使用使用React的JavaScript代码。

我到目前为止工作的是...

  • 一个带有Spring-MVC后端的网站
  • 在此网站上执行javascript代码
  • 使用Maven构建应用程序的jar
  • 使用create-react-app工具在我的spring项目中创建一个React项目
  • 使用maven插件编译React代码（在本教程之后）（或者至少我认为它可以正常工作，因为maven表示构建成功）
  • 在浏览器中加载React js脚本

不起作用的是...

  • 在浏览器中执行React js脚本或调试脚本

我要执行的简单React代码如下所示：test.js

import React from "react";
import ReactDOM from "react-dom";

export default function TestComponent() {
    return <div>
        <p>Hello There!</p>
    </div>;
}

debugger;

ReactDOM.render(<TestComponent />, document.getElementById('hello_there'));
alert("Hello There!");

它应该只向html文件中添加一些文本以显示其正常工作，但事实并非如此。html（thymeleaf）文件如下所示：home.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Go Server - JFabricationGames</title>
</head>
<body>
    <h1>JFG - Go Server (WIP)</h1>
    <img th:src="@{images/welcome.png}" width=500 />
    <br>
    <a th:href="@{/login}">Login</a>

    <div id="hello_there"></div>
    <div id="hello_there_2"></div>
    <script src="test.js"></script>
    <!-- <script src="test_no_react.js"></script> -->
</body>
</html>

我的Spring项目如下所示：

春季项目结构

并使用以下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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.4.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <groupId>net.jfabricationgames</groupId>
    <artifactId>go_server_spring</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>go_server_spring</name>
    <description>A Go Server</description>

    <properties>
        <java.version>1.8</java.version>

        <frontend-src-dir>${project.basedir}/src/main/app</frontend-src-dir>
        <node.version>v12.3.1</node.version>
        <yarn.version>v1.16.0</yarn.version>
        <frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</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>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
    </dependencies>

    <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>
                    <yarnVersion>${yarn.version}</yarnVersion>
                    <workingDirectory>${frontend-src-dir}</workingDirectory>
                    <installDirectory>${project.build.directory}</installDirectory>
                </configuration>

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

                    <execution>
                        <id>yarn-install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

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

            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>position-react-build</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${frontend-src-dir}/build</directory>
                                    <filtering>false</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

如果您想查看完整的项目代码，则可以在GitHub上找到它：https : //github.com/tfassbender/go_server_spring/tree/react_test_2

Now when opening the website in the browser (firefox 72.0.2 (64-Bit)) and using the developer tools I can see that the script was loaded and I can even see the script code:

Firefox开发人员工具-网络

But what is strange is that I can't seem to debugg the file or even find the file in the debugger...

Firefox开发人员工具-调试器

... although it is loaded and even seems to be executed, because the developer tools show an error in the first line of the script (in the image above).
And what is also kind of strange to me is that the script (test.js) that I can see in the browser (when opening it from the network tab of the developer tools) shows exactly the react code from the test.js file. I would expect it to be compiled to ES5, but I'm very new to React so I don't realy know if this is a problem or an expected behaviour.

So basically the problem is that I can't debugg my javascript/React code and I'm not shure whether I load the correct file or even compiled it correctly (because I'm realy new to React). In fact I have no idea what's going on here and what the problem might be.
So any help would be great.

davnicwil :

The issue here seems to be that you want to run the javascript output by create-react-app on the build, but actually, you're just running a static file test.js which is in the src/main/app/public directory.

This test.js file is not touched by create-react-app at all, so you're right that it's not being compiled to ES5, it's simply being served statically as it is. The error you're seeing in Firefox is exactly because of that - it can't handle the import statements (fixing this directly is a separate issue which I won't get into here, but essentially you won't have this problem with the create-react-app compiled code because it'll be bundled and transpiled to ES5).

Only the code with the entry point at src/main/app/src/index.js will be compiled by create-react-app and indeed it is, and then as per your pom.xml configuration is then copied into target/classes/static/static/{bundle files}.js.

您要做的是链接到这些create-react-app生成的捆绑文件，而不是此test.js文件。这些构建的捆绑包包含的任何React代码都可以正常运行。目前尚不清楚它的作用test.js，但总而言之，它根本没有被编译，这就是错误的原因，与React本身无关。您应该删除它，然后链接到您的create-react-app生成的包。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Java Spring MVC 映射问题

Spring MVC Java教程问题

在 intellij idea 中运行 spring mvc 应用程序的问题

Java脚本无法在JSP文件中运行Spring MVC

接口 java/spring 的问题

Java Spring Data @EnabledJPARepositories问题

Java Spring JSON响应问题

Spring MVC MultipartFile问题

Spring MVC映射问题

从Java（Spring Boot）或Node.js检查/连接到在docker中运行的Redis

Spring MVC中的kendo datepicker问题

Spring MVC中的@Transactional显示问题

Spring MVC Java配置

Java Spring MVC中的记录错误

Java配置中的Spring Mvc Message Bundle

基于Spring MVC Java的配置中的AuthenticationSuccessHandler

在Spring MVC中从JavaScript访问Java变量

Spring MVC中的dbconfig.properties文件出了什么问题？我运行得很好，但在JUnit中却错了

问题与Spring MVC的：注解驱动

Spring MVC重定向问题

Spring MVC：相对URL问题

Spring MVC绝对URL问题

Spring MVC Hello World问题

@PathVariable编码问题-Spring MVC

Spring MVC组合框问题

如何获得大量的JSON使用REST模板的Spring MVC不需要在Java内存问题

使用AOP在SPring MVC项目中出现Java反序列化问题

从Java Spring获取图像以在React中显示

Java Spring 4 @Transactional嵌套事务问题

TOP 榜单

  1. 1

    隐藏发件人没有短信PHP

  2. 2

    Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

  3. 3

    在浏览器中请求URL时会发生什么？

  4. 4

    flask-admin 如何自定义删除按钮

  5. 5

    材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）

  6. 6

    用日期数据透视表和日期顺序查询

  7. 7

    Jqgrid：多级别组摘要

  8. 8

    java io ioexception无法解析服务器地址解析器的响应

  9. 9

    Swift如何使用Base64Url编码JWT标头和有效负载之类的json对象

  10. 10

    sshd AllowGroups组未授予访问权限

  11. 11

    jQuery无限滚动固定div中的滚动

  12. 12

    android 背部按下

  13. 13

    Flexbox CSS 对齐属性环境惰性？

  14. 14

    为什么随机森林中的平均降低基尼系数取决于人口规模？

  15. 15

    ClickHouse 创建临时表

  16. 16

    为什么PlusShare.Builder setRecipients方法不起作用？

  17. 17

    如何在Android中识别MICR代码

  18. 18

    PyQt4.QtCore模块无法向sip模块注册

  19. 19

    正则表达式，用于查找所有以任何字母开头和数字开头的文件

  20. 20

    是否可以通过编程方式对很多动画进行重新着色？

  21. 21

    机器密钥生成

热门标签

归档