Проблемы бега реагируют js в java пружине mvc - PullRequest
Новая
       8

Проблемы бега реагируют js в java пружине mvc

1 голос
/ 18 февраля 2020

Я учусь использовать React и хотел использовать его в приложении SpringBoot, но я просто не могу заставить его работать.
Я могу создать сайт с помощью Spring- MVC, а также выполнить JavaScript код на нем (без React, JSX). Но я просто не могу понять, как использовать JavaScript код, который использует React.

Я до сих пор работал ...

  • Сайт с бэкэндом Spring- MVC
  • Выполнение javascript кода на этом сайте
  • Создание фляги приложения с использованием maven
  • Создание проекта React внутри моего Spring проект с использованием инструмента create-реагировать-приложение
  • Компиляция кода React с использованием плагина maven (после этого урока ) (или, по крайней мере, я думаю, что он работает, потому что 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 выглядит так:

Spring project structure

и собирается с использованием этого 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

Теперь при открытии сайта в браузере (firefox 72.0.2 (64-бит)) и использовании инструментов разработчика Я вижу, что скрипт был загружен, и я даже вижу код скрипта:

Firefox developer tools - network

Но странно то, что я не могу отладить файл или даже найти файл в отладчике ...

Firefox developer tools - debugger

... хотя он загружен и даже, кажется, выполняется, потому что инструменты разработчика показывают ошибку в первой строке скрипта (на изображении выше).
И что для меня также немного странно, это скрипт (test. js), который я вижу в браузере (при открытии из вкладка сеть инструментов разработчика) показывает именно код реакции из файла test. js. Я ожидаю, что он будет скомпилирован в ES5, но я очень плохо знаком с React, поэтому я не знаю, является ли это проблемой или ожидаемым поведением.

Так что в основном проблема в том, что я могу ' Я не отлаживаю свой код javascript / React, и я не уверен, загружу ли я правильный файл или даже скомпилировал его правильно (потому что я действительно новичок в React). На самом деле я понятия не имею, что здесь происходит и в чем может быть проблема.
Так что любая помощь будет отличной.

1 Ответ

3 голосов
/ 21 февраля 2020

Проблема здесь заключается в том, что вы хотите запустить вывод javascript с помощью create-Reaction-app в сборке, но на самом деле вы просто запускаете файл * stati c test.js, который находится в каталоге src/main/app/public.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 1008 '* не так " для ES5 это просто статически, как есть. Ошибка, которую вы видите в Firefox, именно из-за этого - она ​​не может обработать операторы import (исправить это напрямую - отдельная проблема, с которой я не буду здесь сталкиваться, но по сути у вас не будет эта проблема с скомпилированным кодом create-реагировать-app , поскольку он будет объединен и перенесен в ES5).

Только код с точкой входа в src/main/app/src/index.js будет скомпилирован create-Reaction-app , и это действительно так, а затем, согласно вашей конфигурации pom.xml, затем копируется в target/classes/static/static/{bundle files}.js.

Вам нужно сделать ссылку на эти сгенерированные create-реагировать-приложения файлы комплектов вместо этого test.js файла. Какой бы код React не содержался в этих сборках, он будет работать нормально. Непонятно, какова роль test.js, но в заключение следует сказать, что он просто не компилируется вообще, и это является причиной ошибки, не имеющей ничего общего с React как таковым. Вам нужно просто удалить его и вместо этого создать ссылку на ваши create-реагировать-приложение сгенерированные пакеты.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...