react spring boot下載 - react spring boot源代碼下載

React和Spring Boot首次設置

創建於：11-04-2020
上次更新：Jordy Coder的10-09-2021

貢獻者：
Jeffrey Spaan（完整堆棧開發人員 @ codeBean）
Jordy Hamwijk（完整堆棧開發人員 @ codeBean）

歡迎開發人員。這是使用React和Spring Boot開發第一個Web應用程序的第一個教程。
向前邁進，我們將使用此存儲庫作為任何其他存儲庫的起點，我們將在Github上發布。
在本教程中，我們將介紹基礎知識，並設置帶有彈簧靴後端的React Frontend。

什麼是反應？

React是一個開源JavaScript庫，用於構建專門用於單頁應用程序的用戶界面。
它用於處理Web和移動應用程序的視圖層。 React還允許我們創建可重複使用的UI組件。
UI組件的使用可以減少開發並減少應用程序的開發時間。

什麼是春季靴？

Spring Boot是一種基於Java的框架，用於創建微型服務。
通過使用Spring Boot依賴項來簡化應用程序的後端，這使您只需選擇所需的依賴項即可快速設置應用程序的後端。
說到這，讓我們從立即創建後端開始。

入門

在您的瀏覽器中，打開：https：//start.spring.io

項目： Maven Project
語言： Java
Spring Boot（版本）：我們將使用最新的穩定版本： 2.2.6
組：這是您的互聯網域，向後。對於CodeBean，我們將使用： nl.codebean
文物：這是您項目的名稱。對於這個項目，我們將使用： react-spring-boot
描述：這是有關您項目的簡短描述。對於這個項目，我們將使用： React and Spring Boot Tutorial
包裝： JAR
Java：版本8
依賴項： Spring Web

要創建預先生成的Spring Boot應用程序，請單擊：生成

在您的硬驅動器上下載zip文件。打開zip文件並提取項目文件夾。
打開您喜歡的IDE中的項目文件夾。

pom.xml

項目對像模型或POM是Maven的基本工作單位。
它是一個XML文件，其中包含有關項目和配置詳細信息用於構建項目的信息。

以下列表顯示您選擇一個Maven項目時創建的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.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()方法；從瀏覽器調用或通過在命令行上使用捲曲時，該方法僅返回文本。這是因為@RestController結合了@Controller和@ResponseBody ，這兩個註釋導致Web請求返回數據而不是視圖。

現在，讓我們在終端運行應用程序。

運行Spring Boot應用程序

要啟動該應用程序，請打開命令終端並執行以下任務（顯示其輸出）：
在本教程中，終端命令在原始命令的前面標有>。

> 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休息服務現在正在啟動並運行。
讓我們繼續將後端數據傳到前端。

創建React前端

現在，我們將使用稱為React的JavaScript庫構建前端。
在前端，我們能夠獲取後端生成的數據。讓我們開始吧！

> 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應用程序。
它應該看起來像這樣：

在React Frontend中查看Spring Boot的REST服務

我們的下一個任務是從前端（客戶端）中顯示後端（服務器端）的API數據。
後端在端口8080 http://localhost:8080
前端在端口3000 http://localhost:3000

現在兩個端口都在彼此並肩運行而沒有任何互連。為了允許從前端端口到後端端口的讀寫訪問，我們需要設置一個允許數據傳輸的代理。

通過將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請求的更多信息，請參見Create React應用程序的文檔。

讓我們測試我們現在是否也能夠從前端訪問數據。

首先，重新啟動您的前端。要停止當前會話，請在IDE終端窗口中鍵入CTRL + C。
重新啟動前端后，打開一個新的終端窗口和鍵入後面的命令（顯示了其輸出）：

> curl http://localhost:3000/api/greet
Greetings from CodeBean!

React Frontend中的Spring Boot後端獲取數據

我們快到了。現在，我們將從後端獲取數據以顯示前端。
打開您的/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 ;

現在，打開位於/frontend/src文件夾中的App.js文件。
在這裡，我們將通過import Greet from './components/Greet';來導入Greet.js組件';和<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 ;