ดาวน์โหลด react spring boot - react spring boot Source Source Download

React และ Spring Boot ตั้งค่าแรก

สร้างขึ้นเมื่อ: 11-04-2020
อัปเดตล่าสุดเมื่อ: 10-09-2021 โดย Jordy Coder

ผู้มีส่วนร่วม:
Jeffrey Spaan (Full Stack Developer @ Codebean)
Jordy Hamwijk (Full Stack Developer @ Codebean)

ยินดีต้อนรับนักพัฒนา นี่เป็นบทช่วยสอนแรกในการพัฒนาเว็บแอปพลิเคชันแรกของคุณด้วย React และ Spring Boot
ก้าวไปข้างหน้าเราจะใช้ที่เก็บนี้เป็นจุดเริ่มต้นสำหรับที่เก็บเพิ่มเติมใด ๆ ที่เราจะโพสต์ที่นี่ใน GitHub
ในบทช่วยสอนนี้เราจะครอบคลุมพื้นฐานและตั้งค่าส่วนหน้า REACE ด้วยแบ็กเอนด์สปริงบูต

React คืออะไร?

React เป็นไลบรารี JavaScript โอเพนซอร์ซที่ใช้สำหรับการสร้างส่วนต่อประสานผู้ใช้โดยเฉพาะสำหรับแอปพลิเคชันหน้าเดียว
มันใช้สำหรับจัดการเลเยอร์มุมมองสำหรับเว็บและแอพมือถือ React ยังช่วยให้เราสามารถสร้างส่วนประกอบ UI ที่นำกลับมาใช้ใหม่ได้
การใช้ส่วนประกอบ UI ช่วยลดการพัฒนาและลดเวลาการพัฒนาของแอปพลิเคชันของคุณ

Spring Boot คืออะไร?

Spring Boot เป็นเฟรมเวิร์กที่ใช้ Java ที่ใช้ในการสร้างบริการไมโคร
การกำหนดค่าแบ็คเอนด์ของแอปพลิเคชันของคุณนั้นง่ายขึ้นด้วยการใช้การพึ่งพาสปริงบูตซึ่งช่วยให้คุณสามารถเลือกการพึ่งพาที่ต้องการเพื่อตั้งค่าแบ็กเอนด์ของแอปพลิเคชันของคุณได้อย่างรวดเร็ว
พูดถึงสิ่งที่เริ่มต้นด้วยการสร้างแบ็กเอนด์ของเราทันที

เริ่มต้น

ในเบราว์เซอร์ของคุณเปิด: 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

ในการสร้างแอปพลิเคชันสปริงบูตที่สร้างไว้ล่วงหน้าคลิก: สร้าง

ไฟล์ zip ถูกดาวน์โหลดบนฮาร์ดไดรฟ์ของคุณ เปิดไฟล์ zip และแยกโฟลเดอร์โครงการ
เปิดโฟลเดอร์โครงการใน IDE ที่คุณชื่นชอบ

pom.xml

โมเดลวัตถุโครงการหรือ 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 สองคำอธิบายประกอบที่ส่งผลให้เว็บคำขอส่งคืนข้อมูลแทนที่จะเป็นมุมมอง

ตอนนี้เรามาเรียกใช้แอปพลิเคชันในเทอร์มินัลกันเถอะ

เรียกใช้แอปพลิเคชัน 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 Rest กำลังเปิดใช้งานแล้ว
มารับข้อมูลแบ็กเอนด์ไปยังส่วนหน้าต่อไป

สร้าง React Frontend

ตอนนี้เราจะสร้างส่วนหน้าโดยใช้ไลบรารี 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
มันควรจะดูอะไรแบบนี้:

ดูบริการ REST จาก Spring Boot ใน Frontend React

งานต่อไปของเราคือการแสดงข้อมูล 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 พร็อกซ์ให้ดูที่สร้างเอกสารของแอป 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 ของคุณ

ยินดีด้วย!

ตอนนี้ส่วนหน้าของปฏิกิริยาของคุณเชื่อมต่อกับแบ็กเอนด์สปริงบูตของคุณซึ่งช่วยให้แอปพลิเคชันของคุณสามารถดึงข้อมูลและเขียนข้อมูลจาก/ไปยังเซิร์ฟเวอร์ของคุณ

ฉันหวังว่าคุณจะสนุกกับการติดตามบทช่วยสอนนี้อย่าลืมที่จะให้ดาวที่เก็บนี้เป็นดารา
ติดตาม Codebean University บน GitHub และได้รับการอัปเดตด้วยแบบฝึกหัดที่น่าสนใจใหม่ ๆ