Как добавить реагирующий фронт в весенний ботинок? - PullRequest
Новая
       14

Как добавить реагирующий фронт в весенний ботинок?

0 голосов
/ 31 января 2019

У меня есть интерфейс, который я хочу использовать с моим API-интерфейсом Springboot.Я использовал nwb для создания своего приложения реакции.Я пытаюсь использовать frontend-maven-plugin, но не могу заставить работать мое приложение реакции.Остальные API работает отлично.Не могу найти какую-либо информацию в Интернете.Как это сделать?

Я пробовал различные примеры в Интернете, но ни один из них не включает nwb. 

<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.6</version>
<configuration>
   <installDirectory>target</installDirectory>
    <nodeVersion>v8.9.1</nodeVersion>
    <npmVersion>5.5.1</npmVersion>

</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>

Я бы хотел, чтобы приложение веб-интерфейса реагировало хорошо свесенний отдых.Спасибо!

1 Ответ

0 голосов
/ 31 января 2019

В дополнение к ответу, который я представил здесь: Размещение одностраничного приложения с пружинной загрузкой

Ниже приведена структура каталогов, которая вам понадобится.Очевидно, что ваш REST API будет находиться в каталоге java (обязательно обратите внимание на особенности контроллера в моем другом ответе, который я предоставил выше): 

- sample-project-root
    - src
        - main
            -java
            - js
                app.js
                index.js
            - resources
                - templates
                    index.html
 webpack.config.js
 package.json
 pom.xml

Ниже приведена страница index.html, которую ваш 'MainController'будет оказывать с помощью Thymeleaf.Это необходимо поместить в каталог src / main / resources / templates / (стандартное поведение Spring).

index.html 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head lang="en">
         <meta charset="UTF-8"/>
         <title>Sample Project</title>
    </head>
    <body>

         <!-- Entry point to our ReactJS single page web application -->
         <div id="root"></div>

         <script type="text/javascript" src="built/bundle.js"></script>
    </body>
</html>

Ниже приведена страница index.js, которая на самом деле будетзагрузите ваше приложение React.Обратите внимание, что основная функция рендеринга получает идентификатор документа «root», который находится на вашей странице index.html.

index.js 

const React = require('react');
const ReactDOM = require('react-dom');

import App from './app.js';
import 'bootstrap/dist/css/bootstrap.min.css';

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

Вам понадобится использовать Webpack для управления зависимостями ReactJS.Я поделюсь с вами примером файла webpack.config.js, который находится в корне проекта.

webpack.config.js 

var path = require('path');

module.exports = {
    entry: ['babel-polyfill', './src/main/js/index.js'],
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif|eot|otf|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {}
                    }
                 ]
            }
        ]
    }
};

Не беспокойтесь слишком одва нижних правила, на которых вы хотите сосредоточиться, это точка входа, которая является нашей страницей index.js, и выходной путь, который является результатом запуска вашего файла package.json.

package.json (поместите этотакже на корневом уровне вашего проекта) 

{
  "name": "spring-data-rest-and-reactjs",
  "version": "0.1.0",
  "description": "Demo of ReactJS + Spring Data REST",
  "repository": {
    "type": "git",
    "url": "git@github.com:spring-guides/tut-react-and-spring-data-rest.git"
  },
  "keywords": [
    "rest",
    "hateoas",
    "spring",
    "data",
    "react"
  ],
  "author": "Sample Team",
  "license": "Apache-2.0",
  "bugs": {
  "url": ""
  },
  "homepage": "url",
  "dependencies": {
  "react": "^16.5.2",
  "react-dom": "^16.5.2",
  "rest": "^1.3.1",
  "bootstrap": "^4.2.1",
  "jquery": "^3.3.1",
  "popper.js": "^1.14.6",
  "style-loader": "^0.23.1",
  "css-loader": "^2.1.0",
  "url-loader": "^1.1.2",
  "postcss-loader": "^3.0.0",
  "precss": "^4.0.0",
  "autoprefixer": "^9.4.3",
  "sass-loader": "^7.1.0",
  "react-octicon": "^3.0.1"
},
"scripts": {
   "watch": "webpack --watch -d"
},
"devDependencies": {
  "@babel/core": "^7.1.0",
  "babel-polyfill": "^6.0.16",
  "@babel/preset-env": "^7.1.0",
  "@babel/preset-react": "^7.0.0",
  "babel-loader": "^8.0.2",
  "webpack": "^4.19.1",
  "webpack-cli": "^3.1.0"
  }
}

Вашему приложению React могут потребоваться другие зависимости, но это только пример.

Наконец, добавьте следующее в свои плагины Maven (pom.xml): 

<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>

Ресурсы:

Удачи!

...