Как да настроите Spring-Boot с ReactJS и Webpack

В миналото се сблъсквах с много ситуации, в които исках бързо да завъртя някои леки услуги, създадени с помощта на Spring-Boot, които също се възползваха от ReactJS и реалния компонент, базиран на предния дизайн. Ако не искате да прочетете урока и просто искате да използвате скелета.

https://github.com/liuben10/spring-boot-react-js-example

мотивиране

Защо да използвате Spring-Boot? За мен лично това е богатството на плъгини и чисти малки пакети, което всъщност прави развитието наистина рационално и лесно. Например, всички пакети Spring-data- * са наистина полезни, когато става въпрос за свързване с различни технологии на базата данни; пролетната сигурност и пролетната интеграция също се оказаха наистина полезни, както и в миналото.

Защо да използвате ReactJS? Дизайнът, базиран на компоненти на ReactJS, наистина върши добра работа, насърчавайки повторното използване на кода, както и просто цялостната четимост. Освен това наистина върши добра работа за поддържане на активите на предния край, така че да се подобри навигацията в голям проект.

Предварителни

В този урок, който използвам

  • npm 4.6.1
  • jdk1.8.0_92
  • Git

За личната си среда за разработка използвах IntelliJ IDE, но можете да използвате какъвто редактор искате, въпреки че IntelliJ прави въртенето на нов проект Spring-Boot наистина лесно.

настойнически

Съответното хранилище, което съдържа окончателното изпълнение, е тук. https://github.com/liuben10/spring-boot-react-js-example.

Ако искате да видите как е построен проектът, можете да го следвате стъпка по стъпка, като използвате git log и след това git checkout за всяка от поръчките и преминавайки през историята на промените. В противен случай ще премина през настройката от нулата.

  1. Настройте прост проект за зареждане на пролетта.

Има много начини за настройка на проект за пролетно зареждане. Първо ще премина по начина на инициализатора, както и да го направя ръчно.

Използване на инициатор

Отворете https://start.spring.io/, въведете името на вашата група и артефакт. Също така, добавете Web като зависимост и щракнете върху „Генериране на проект“, за да изтеглите цип с името си на артефакт като име на директория. Преместете тази директория там, където искате да преживеете проекта си за пролетно зареждане.

Правите го ръчно.

Създайте нова директория, вероятно тази, която съответства на вашето име на артефакт. За този урок, просто ще приемем, че има директория, наречена ~ / spring-boot-with-reactjs, и артефактният ни идентификатор е spring-boot-with-react-js

Копирайте това в pom.xml на ниво корен



    4.0.0 

    com.example 
    пружинно зареждане с реагира-JS 
   <Версия> 0.0.1-SNAPSHOT 
   <Опаковки> буркан 

   <Име> артефакт 
    Демонстрационен проект за пролетна обувка 

   <Родител>
       org.springframework.boot 
       пружинно зареждане стартер-майка 
      <Версия> 1.5.9.RELEASE 
       
   

   <свойства>
       UTF-8 
       UTF-8 
       1.8 
   

   <зависимости>
      <Зависимост>
          org.springframework.boot 
          пружинно зареждане стартер 
      
      <Зависимост>
          org.springframework.boot 
          пружинно зареждане стартер-тест 
         <Обхват> тест 
      
        <Зависимост>
             org.springframework.boot 
             пролетно-обувка стартер уеб 
        
    

   <Изгради>
      <Приставки>
         <Плъгин>
             org.springframework.boot 
             пружинно зареждане Maven-приставка 
         
      
   


Създайте тези директории, src / main / java, както и src / main / ресурси (създайте всички директории по пътя, ако е необходимо).

Във вашия src / main / java, добавете

пакет com.example.springbootwithreactjs;

импортиране на org.springframework.boot.SpringApplication;
импортиране на org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
публичен клас SpringBootWithReactJsApplication {

 public static void main (String [] args) {
  SpringApplication.run (SpringBootWithReactJsApplication.class, args);
 }
}

(Или със собствено име на потребителски клас). Важни неща, които трябва да отбележите за това приложение: @SpringBootApplication е пояснение, което почти декларира, че вашият клас ще бъде входната точка за вашия пролетен зареждащ сървър, както и декларирането му като доставчик на боб. Повече информация можете да намерите тук https://docs.spring.io/spring-boot/docs/current/reference/html/using-boot-using-springbootapplication-annotation.html

След това в основната директория на вашия проект (същото ниво като pom.xml) стартирайте mvn install. Това трябва да генерира куп дърводобив и след това да изтегли каквито и да са зависимости, необходими за изграждането на артефакта и след това да изгради и инсталира артефакта. Трябва да видите генерирана целева директория, съдържаща компилирани ресурси.

За да стартирате сървъра на приложения, в основната си директория, стартирайте

mvn пролетна обувка: пусни

Това трябва да стартира сървъра по подразбиране на порт 8080. Ако искате да персонализирате порта, можете да зададете параметър, използвайки -Dserver.port = 8080, или в src / main / ресурси, добавете файл application.properties с server.port = 8080 като първи ред.

За да проверите дали сървърът работи и трябва да отидете на http: // localhost: 8080 и да се уверите, че ще кацнете на страницата с грешка в белия етикет така:

Това просто означава, че трябва да добавим някои методи на контролер.

2. Добавяне на контролер.

Сега трябва да добавим контролер, който по принцип определя маршрути към сървъра Dispatcher (процесът, отговорен за маршрутизиране на http заявки към действия).

Ще добавим PongController, който ще маршрутизира заявките с URI = („/ pong“), за да върне обикновен текстов отговор, който просто казва „pong“

пакет com.example.springbootwithreactjs.controller;

импортиране на org.springframework.web.bind.annotation.CrossOrigin;
импортиране на org.springframework.web.bind.annotation.RequestMapping;
импортиране на org.springframework.web.bind.annotation.RequestMethod;
импортиране на org.springframework.web.bind.annotation.RestController;

/ **
 * /
@RestController
публична класа PongController {

  @RequestMapping (value = "/ pong", method = RequestMethod.GET)
  @CrossOrigin (Origins = "*") // TODO ме промени!
  обществен String pong () {
    връщане "понг";
  }
}

Важни пояснения за забележка:

@RestController е важна забележка през пролетта, защото декларира, че този клас е контролер и следователно трябва да се вземе от приложението за пролетно зареждане и да се зарежда като сингъл-боб в началото на приложението.

@RequestMapping основно определя, че този метод трябва да бъде съпоставен с определен URI път, когато има GET заявка.

@CrossOrigin настройва CORS, в противен случай сървърът ще откаже, ако препращащият е нещо различно от себе си (което е важно за нас, тъй като ще говорим със сървъра от предно приложение). Като алтернатива можете да настроите определенията на CORS на едно място, като създадете WebMvcConfigurer, повече подробности са тук. https://spring.io/guides/gs/rest-service-cors/

Проверете дали това работи, като натиснете http: // localhost: 8080 / pong; сега трябва да видите, че има отговор, който просто казва „понг“.

3. Инсталирайте приложението ReactJS.

Първо се нуждаете от помощната програма за създаване-реагиране на приложение във facebook. Изпълнете тази команда, за да я инсталирате глобално (обърнете внимание, че се нуждаете от npm от предварителното условие).

npm install -g create-react-app

Проверете дали работи, като стартирате create-react-app.

След това бягайте

create-react-app 

След това ще създадете реагиращо приложение отпред, което трябва да стартирате отделно от задния сървър. Проверете дали инсталацията работи, като влезете в новосъздаденото ви приложение отпред и стартирайте прежда, трябва да видите, че приложението се стартира в localhost: 3000. Опитайте да промените малко текст в App.jsand, като проверите дали промените ще се зареждат динамично във вашия браузър.

4. Съдържайте приложението си (Забележка: това не е задължително, но препоръчвам да изпълните следните стъпки, за да можете по-добре да организирате кода за реакция)

Реалното предимство на React е да създава контейнери за многократна употреба. В тази част ще преместим кода от App.js и в контейнер, наречен Main.js, който ще поддържа основното ни състояние на приложението.

cd в директорията отпред ( от стъпката създаване-реагиране на приложението по-горе), създайте src / container / Main.js (създайте всички поддиректории, ако е необходимо).

Преместете logo.svg в поддиректория под src, наречена активи, създайте активите на директория, ако е необходимо.

По същия начин създайте поддиректория под src, наречена css, и преместете App.css в тази директория.

Във вашия Main.js добавете това:

import React, {Component} от 'react';
импортиране на лого от '../assets/logo.svg';
импортиране '../css/App.css';

клас Основен разширява Компонент {
  render () {
    връщане (
      
        
          лого           

Добре дошли в React

                 

          За да започнете, редактирайте src / контейнери / Main.js и запазете, за да презаредите.                     );   } } експортиране по подразбиране Main;

След това заменете вашия App.js с това:

import React, {Component} от 'react';
import Main от './container/Main';
import './css/App.css';

клас приложение разширява компонент {

  render () {
    връщане (
      
        <Главна />            );   } } приложение за експортиране по подразбиране;

Всичко това е, че премества стария код от App.js и в Main.js, така че функционално нищо не се променя. Въпреки това, сега имате структура на проекта, в която не всичко е само в една директория и можете също така да зададете специфично състояние на главния изглед в контейнера Main, а не да имате променлива на едно състояние за цялото приложение.

5. Добавете ping действие.

Сега трябва да модифицираме Main.js, за да има такъв бутон, че когато натискаме бутона, той ще влезе в конзолата за програмисти, че е щракнат.

В Main.js добавете функцията ping така:

ping () {
  console.log ("Ping беше кликнат");
}

И заменете метода на изобразяване по този начин:

render () {
  връщане (
    
      
        

Ping

             

        

          <бутон onClick = {this.ping}> Ping!                        ); }

Така че крайният резултат изглежда така:

import React, {Component} от 'react';
импортиране '../css/App.css';

клас Основен разширява Компонент {

  ping () {
      console.log ("Ping беше кликнат");
  }

  render () {
    връщане (
      
        
          

Ping

                 

          

            <бутон onClick = {this.ping}> Ping!                                );   } } експортиране по подразбиране Main;

Проверете дали това работи, като преминете към http: // localhost: 3000, отваряйте конзолата за програмисти чрез CMD + I или отворете Преглед> Програмист> Инструменти за програмисти> Конзола

След това натиснете бутона и ще видите, че Ping е щракнат. Тя трябва да изглежда така:

Игнорирайте предупрежденията в екрана ми, основното е, че Ping беше щракнат показва в регистрационните файлове на конзолата.

6. Накарайте предния край да говори с бекъна.

В тази част ще използваме ajax клиент на ReactJS, за да говорим с нашата крайна точка PongController, която предварително бяхме дефинирали. Първо, уверете се, че сървърът продължава да работи на http: // localhost: 8080, като отидете до URL адреса и проверите дали сте кацнали на страницата за грешка в Whitelabel. Като алтернатива можете да стартирате lsof -i: 8080, за да видите, че процесът продължава да работи на порт 8080.

След това стартирайте npm инсталирайте axios --save, за да запишете axios във вашия package.json. След това в Main.js добавете линията acios import от „axios“, за да импортирате axios във вашия проект. След това променете метода на ping в основния компонент, за да извикате заявка за получаване на PongController така

ping () {
  axios.get ("http: // localhost: 8080 / pong") .then (res => {
    сигнал ("Получен успешен отговор от сървъра!");
  }, err => {
    сигнал („Сървърът отхвърли отговор с:„ + грешка);
  });
}

Ако всичко е настроено правилно, трябва да видите предупреждение „Получен успешен отговор от сървъра!“, Когато натиснете бутона за ping.

7. Променете така, че заявката за Ping да актуализира състоянието на приложението.

Това е незадължително, но полезно за показване как може да се управлява състоянието в ReactJS компоненти. В този пример ще актуализираме поле с етикет, за да кажем „Ponged“, когато успешно заявка за обратно повикване е била регистрирана след заявката на axios.

В Main.js добавете метод на конструктор така:

конструктор (подпори) {
  супер (подпори);
  this.state = {ponged: 'Not Ponged'}

  this.ping = this.ping.bind (това);
}

И след това в метода на изобразяване добавете етикет като този:

render () {
  връщане (
    
      
        

Ping

             

        

          <бутон onClick = {this.ping}> Ping!           
Ponged: {this.state.ponged}
                       ); }

Това прави, че декларира обект на състояние за Main.js, както и променлива на състоянието, наречена ponged, която по подразбиране е „Not Ponged“. Забележете, че този.ping.bind (този) ред. Това е важно за следващата стъпка, тъй като ще регистрира ключовата дума „това“ в контекста на функцията ping. Позволява ви да използвате „това“ за препратка към компонента.

Сега променете метода ping (), така че той да актуализира състоянието на компонента

ping () {
  axios.get ("http: // localhost: 8080 / pong") .then (res => {
    сигнал ("Получен успешен отговор от сървъра!");
    this.setState ({ponged: 'Ponged!'});
  }, err => {
    сигнал („Сървърът отхвърли отговор с:„ + грешка);
  });
}

Сега, какво ще се случи е, ако успешно получите отговор от сървъра, трябва да видите промяната на етикета, за да бъде показана! така.

Крайният продукт трябва да изглежда така:

Сега успешно създадохте приложение от край до край, което се състои както от предно приложение, така и от бекенд приложение, както и успешно свързани и двете заедно!

Обратна връзка

Така че основно завършва урока. Всякакви въпроси или коментари, не се колебайте да ми пишете на liuben10@gmail.com.