react spring boot
1.0.0
Создано на: 11-04-2020
Последнее обновление: 10-09-2021 от Джорди Коддер
Участники:
Jeffrey Spaan (Developer @ Codebean @ Codebean)
Jordy Hamwijk (Full Stack Developer @ Codebean)
Добро пожаловать разработчик. Это первое руководство по разработке вашего первого веб -приложения с помощью React и Spring Boot.
Двигаясь вперед, мы будем использовать этот репозиторий в качестве отправной точки для любых дополнительных репозиториев, которые мы опубликуем здесь на Github.
В этом уроке мы рассмотрим основы и настроем фронт реагирования с бэкэнд с пружинным ботинками.
React -это библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательских интерфейсов специально для одностраничных приложений.
Он используется для обработки уровня просмотра для веб -приложений и мобильных приложений. React также позволяет нам создавать многоразовые компоненты пользовательского интерфейса.
Использование компонентов пользовательского интерфейса облегчает разработку и сокращает время разработки вашего применения.
Spring Boot -это фреймворк на основе Java, используемая для создания микрорежины.
Настройка бэкэнд вашего приложения упрощена с помощью Spring Boot -зависимостей, что позволяет вам просто выбрать необходимые зависимости для быстрого настройки бэкэнда вашего приложения.
Говоря об этом, давайте сразу же начнем с создания нашего бэкэнда.
В вашем браузере, Open: https://start.spring.io
Maven ProjectJava2.2.6nl.codebeanreact-spring-bootReact and Spring Boot TutorialJAR8Spring Web Чтобы создать предварительно сгенерированное приложение Spring Boot, нажмите: сгенерировать
Zip-файл загружается на ваш жесткий диск. Откройте файл ZIP и извлеките папку проекта.
Откройте папку проекта в своей любимой IDE.
Модель объекта проекта или POM является фундаментальной единицей работы в Maven.
Это XML -файл, который содержит информацию о проекте и деталях конфигурации, используемых Maven для создания проекта.
В следующем списке показан файл POM.xml , который создается при выборе проекта Maven:
<? 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.6.RELEASE</ version >
< relativePath /> <!-- lookup parent from repository -->
</ parent >
< groupId >nl.codebean</ groupId >
< artifactId >react-spring-boot</ artifactId >
< version >0.0.1-SNAPSHOT</ version >
< name >react-spring-boot</ name >
< description >React and Spring Boot Tutorial</ description >
< properties >
< java .version>1.8</ java .version>
</ properties >
< dependencies >
< dependency >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-starter-web</ artifactId >
</ 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 >
</ dependencies >
< build >
< plugins >
< plugin >
< groupId >org.springframework.boot</ groupId >
< artifactId >spring-boot-maven-plugin</ artifactId >
</ plugin >
</ plugins >
</ build >
</ project > Давайте добавим службу, чтобы сделать приложение выходить некоторые данные.
Для этого добавьте контроллер по имени: GreetController.java
Сохранить контроллер в src/main/java/nl/codebean/reactspringboot/GreetController.java
package nl . codebean . reactspringboot ;
import org . springframework . web . bind . annotation . RequestMapping ;
import org . springframework . web . bind . annotation . RestController ;
@ RestController
public class GreetController {
@ RequestMapping ( "/api/greet" )
public String greet () {
return "Greetings from CodeBean!" ;
}
} @RestController : это аннотация пружинной загрузки , которая отмечает класс как контроллер;
@RequestMapping : это аннотация пружинной загрузки , которая отображает "/api/greet" с методом greet() ; При вызове из браузера или с помощью Curl в командной строке метод возвращает только текст. Это потому, что @RestController объединяет @Controller и @ResponseBody , две аннотации, которые приводят к возвращению данных, а не в представлении.
Теперь давайте запустим приложение в терминале.
Чтобы запустить приложение, откройте командный терминал и выполните следующую задачу (показано с его выводом):
В этом уроке команды терминалов помечены> перед исходной командой.
> mvn spring-boot:run
2020-04-12 10:42:20.303 INFO 2232 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http)
2020-04-12 10:42:20.311 INFO 2232 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat]
2020-04-12 10:42:20.312 INFO 2232 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.33]
2020-04-12 10:42:20.378 INFO 2232 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext
2020-04-12 10:42:20.378 INFO 2232 --- [ main] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 896 ms
2020-04-12 10:42:20.503 INFO 2232 --- [ main] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService 'applicationTaskExecutor'
2020-04-12 10:42:20.610 INFO 2232 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path ''
2020-04-12 10:42:20.612 INFO 2232 --- [ main] n.c.r.ReactSpringBootApplication : Started ReactSpringBootApplication in 1.444 seconds (JVM running for 1.78) После того, как приложение будет запущено, давайте запустим службу (в отдельном командном терминале). Выполнить следующую задачу (показанную с помощью его вывода):
> curl http://localhost:8080/api/greet
Greetings from CodeBean! Отличная работа! Служба Spring Boot Rest теперь работает.
Давайте продолжим доставить данные бэкэнд на фронт.
Теперь мы построим фронт, используя библиотеку JavaScript под названием React.
На фронте мы можем получить данные, которые генерируются бэкэндом. Начнем!
> npx create-react-app frontend
Creating a new React app in ../react-spring-boot/frontend
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
Installing template dependencies using npm...
Removing template package using npm...
Success! Created frontend at ../react-spring-boot/frontend
We suggest that you begin by typing:
cd frontend
npm startИнструкции ясны, давайте продолжим делать это (показано с его выходом):
> cd frontend
> npm start
Compiled successfully!
You can now view frontend in the browser.
Local: http://localhost:3000
Откройте свой браузер и перейдите по адресу http: // localhost: 3000, чтобы просмотреть приложение React .
Это должно выглядеть примерно так:
Наша следующая задача-показать данные API из бэкэнда (сторона сервера) на фронте (клиентская сторона) .
Бэкэнд работает на порту 8080 http://localhost:8080
Frontend работает на порту 3000 http://localhost:3000
Оба порта теперь работают вместе с друг с другом без какой -либо взаимосвязанности. Чтобы разрешить доступ к чтению и записи из порта Frontend в бэкэнд -порт, нам необходимо настроить прокси, который позволяет передавать данные.
Это решается путем добавления поля proxy в ваш файл frontend/package.json , который позволяет порту 3000 передавать данные из/на порт 8080 .
"proxy" : " http://localhost:8080 " , Ваш файл frontend/package.json теперь должен выглядеть примерно так:
{
"name" : " frontend " ,
"version" : " 0.1.0 " ,
"private" : true ,
"dependencies" : {
"@testing-library/jest-dom" : " ^4.2.4 " ,
"@testing-library/react" : " ^9.5.0 " ,
"@testing-library/user-event" : " ^7.2.1 " ,
"react" : " ^16.13.1 " ,
"react-dom" : " ^16.13.1 " ,
"react-scripts" : " 3.4.1 "
},
"scripts" : {
"start" : " react-scripts start " ,
"build" : " react-scripts build " ,
"test" : " react-scripts test " ,
"eject" : " react-scripts eject "
},
"proxy" : " http://localhost:8080 " ,
"eslintConfig" : {
"extends" : " react-app "
},
"browserslist" : {
"production" : [
" >0.2% " ,
" not dead " ,
" not op_mini all "
],
"development" : [
" last 1 chrome version " ,
" last 1 firefox version " ,
" last 1 safari version "
]
}
} Чтобы узнать больше о прокси -запросах API, см. Документацию «Создать приложение React».
Давайте проверим, если мы теперь можем получить доступ к данным с фронта.
Во -первых, перезапустите свой фронт. Чтобы остановить текущий сеанс, введите Ctrl + C в окне терминала IDE.
Как только фронт перезапустится, откройте новое окно терминала и введите следующую команду (показано с его выходом):
> curl http://localhost:3000/api/greet
Greetings from CodeBean! Мы почти там. Теперь мы получим данные из бэкэнда, чтобы показать на фронте.
Откройте папку /frontend/src . Добавьте папку с именем components .
В папке components добавьте файл с именем Greet.js
Согласно лучшим практикам React, папка компонентов будет содержать все файлы, которые действуют как компонент.
Согласно лучшим практикам React, имена компонентов начнутся с заглавного письма.
Структура вашей /src теперь будет выглядеть так:
.
├─ ...
├─ components
│ └─ Greet.js
└─ ...
Добавьте следующий код в свой файл Greet.js .
import React , { useState , useEffect } from 'react' ;
const Greet = ( ) => {
const [ greet , setGreet ] = useState ( "" ) ;
async function fetchData ( ) {
let res = await fetch ( '/api/greet' ) ;
let greet = await res . text ( )
setGreet ( greet ) ;
}
useEffect ( ( ) => {
fetchData ( ) ;
} , [ ] ) ;
return (
< div >
< h4 > { greet } </ h4 >
</ div >
)
}
export default Greet ; Теперь откройте свой файл App.js , расположенный в папке /frontend/src .
Здесь мы импортируем компонент Greet.js , добавив import Greet from './components/Greet'; и <Greet /> в файл App.js
Ваш код должен выглядеть так:
import React from 'react' ;
import logo from './logo.svg' ;
import './App.css' ;
import Greet from './components/Greet' ;
function App ( ) {
return (
< div className = "App" >
< header className = "App-header" >
< img src = { logo } className = "App-logo" alt = "logo" />
< p >
Edit < code > src/App.js </ code > and save to reload.
</ p >
< Greet />
< a
className = "App-link"
href = "https://reactjs.org"
target = "_blank"
rel = "noopener noreferrer"
>
Learn React
</ a >
</ header >
</ div >
) ;
}
export default App ;Ваш фронт реагирования должен теперь отображать текст из вашего API бэкэнда.
Ваш фронта React теперь подключен к вашему бэкэнд с пружинной загрузкой, которая позволяет вашему приложению извлекать и записывать данные с/на ваш сервер.
Надеюсь, вам понравилось следовать этому уроку, не забудьте дать этому репозиторию звезду.
Следите за Университетом кода на GitHub и получите обновление новых интересных учебных пособий.
В нашем следующем учебном пособии мы сделаем приложение API для Restful Spring Boot, которое мы подключаемся к базе данных PostgreSQL.
