react spring boot Download - react spring boot Source Code Download

رد الفعل والإقلاع الربيعي الأول

تم إنشاؤها على: 11-04-2020
آخر تحديث في: 10-09-2021 بواسطة Jordy Coder

المساهمين:
Jeffrey Spaan (مطور مكدس كامل @ codebean)
Jordy Hamwijk (مطور مكدس كامل @ codebean)

ترحيب المطور. هذا هو البرنامج التعليمي الأول في تطوير تطبيق الويب الأول مع React و Spring Boot.
المضي قدمًا ، سنستخدم هذا المستودع كنقطة انطلاق لأي مستودعات أخرى سننشرها هنا على Github.
في هذا البرنامج التعليمي ، سوف نغطي الأساسيات وإعداد واجهة رد فعل مع خلفية الحذاء الربيعي.

ما هو رد فعل؟

React هي مكتبة JavaScript مفتوحة المصدر والتي يتم استخدامها لإنشاء واجهات المستخدم خصيصًا للتطبيقات ذات الصفحات الواحدة.
يتم استخدامه للتعامل مع طبقة العرض لتطبيقات الويب والجوال. يسمح لنا React أيضًا بإنشاء مكونات واجهة المستخدم القابلة لإعادة الاستخدام.
إن استخدام مكونات واجهة المستخدم يخفف من التطوير ويقلل من وقت تطوير طلبك.

ما هو الحذاء الربيعي؟

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
جافا: الإصدار 8
التبعيات: Spring Web

لإنشاء تطبيق Boot Spring الذي تم إنشاؤه مسبقًا ، انقر: إنشاء

يتم تنزيل ملف 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() ؛ عند الاحتجاج من متصفح أو باستخدام حليقة على سطر الأوامر ، تُرجع الطريقة النص فقط. ذلك لأن @RestController يجمع بين @Controller و @ResponseBody ، وهما شرحان ينتج عنه طلبات الويب التي تطلب بيانات إرجاع البيانات بدلاً من طريقة العرض.

الآن دعنا ندير التطبيق في المحطة.

قم بتشغيل تطبيق 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!

عمل رائع! خدمة REST SPRING 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 .
يجب أن تبدو مثل هذا:

عرض خدمات REST من Spring Boot في الواجهة الأمامية 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 "
    ]
  }
}

لمعرفة المزيد حول طلبات Proxying API ، راجع إنشاء وثائق تطبيق React.

دعنا نختبر ما إذا كنا قادرين الآن على الوصول إلى البيانات من الواجهة الأمامية أيضًا.

أولاً ، أعد تشغيل الواجهة الأمامية. لإيقاف الجلسة الحالية ، اكتب Ctrl + C في نافذة محطة IDE الخاصة بك.
بمجرد إعادة تشغيل الواجهة الأمامية ، افتح نافذة طرفية جديدة واكتب الأمر التالي (الموضح مع إخراجها):

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

إحضار البيانات من الواجهة الخلفية للحذاء في الواجهة الأمامية React

نحن هناك تقريبا. سنقوم الآن بإحضار البيانات من الواجهة الخلفية لإظهارها في الواجهة الأمامية.
افتح مجلد /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 ;

يجب الآن عرض الواجهة الأمامية React الخاصة بك النص من واجهة برمجة تطبيقات الواجهة الخلفية.

مبروك!

يتم الآن توصيل الواجهة الأمامية React الخاصة بك مع الواجهة الخلفية للحذاء الربيعي والتي تمكن تطبيقك من جلب البيانات وكتابةها من/إلى الخادم الخاص بك.

أتمنى أن تكون قد استمتعت باتباع هذا البرنامج التعليمي ، لا تنس إعطاء هذا المستودع نجمًا.
اتبع جامعة CodeBean على Github وتحديثها مع البرامج التعليمية الجديدة المثيرة للاهتمام.