آموزش با Spring Boot به Full Stack بروید و واکنش نشان دهید [ویدئو]

سرفصل ها و درس ها

معرفی Introduction

• برنامه Full Stack با React و Spring Boot - مقدمه Full Stack Application with React and Spring Boot - Introduction

• برنامه Full Stack با React و Spring Boot - مقدمه Full Stack Application with React and Spring Boot - Introduction

شروع به کار با React - اصول اولیه با کامپوننت ها Getting Started with React - Basics with Components

• مرحله 01 - درک معماری برنامه های کاربردی Full Stack Step 01 - Understanding Full Stack Application Architecture

• مرحله 02 - از Create React App برای ایجاد و راه اندازی یک React Application استفاده کنید Step 02 - Using Create React App to Create and Launch a React Application

• مرحله 03 - وارد کردن React App به Visual Studio Code Step 03 - Importing React App into Visual Studio Code

• مرحله 04 - کاوش ساختار پروژه React Step 04 - Exploring React Project Structure

• مرحله 05 - مقدمه ای بر React Components Step 05 - Introduction to React Components

• مرحله 06 - بازی با اجزای کلاس React Step 06 - Playing with React Class Components

• مرحله 07 - مقدمه ای بر Function Components در React Step 07 - Introduction to Function Components in React

• مرحله 08 - کاوش در JSX بیشتر - Babel و موارد دیگر Step 08 - Exploring JSX Further - Babel and more

• مرحله 09 - بازسازي مؤلفه‌ها به ماژول‌ها و بازنگري سريع جاوا اس Step 09 - Refactoring components to individual modules and Quick Review of JavaS

• مرحله 10 - تمرین - ایجاد ماژول های جداگانه برای سایر اجزا Step 10 - Exercise - Creating separate modules for other components

مراحل بعدی با React - Building Counter Application Next Steps with React - Building Counter Application

• مرحله 01 - مقدمه ای بر بخش - برنامه پیشخوان ساختمان Step 01 - Introduction to Section - Building Counter Application

• مرحله 02 - ایجاد مؤلفه اصلی React Counter Step 02 - Creating Basic React Counter Component

• مرحله 03 - اضافه کردن یک دکمه و یک شمارنده به مؤلفه شمارنده React Step 03 - Adding a Button and a Counter to the React Counter Component

• مرحله 04 - مدیریت رویداد کلیک روی دکمه افزایش Step 04 - Handling click event on the increment button

• مرحله 05 - اضافه کردن حالت به یک React Counter Component Step 05 - Adding State to a React Counter Component

• مرحله 06 - درک React - پشت صحنه - Virtual Dom Step 06 - Understanding React - Behind the scenes - Virtual Dom

• مرحله 07 - درک setState و استفاده از توابع پیکان برای جلوگیری از این اتصال Step 07 - Understanding setState and Using Arrow Functions to avoid this binding

• مرحله 08 - تعریف Inline Javascript CSS در JSX Step 08 - Defining Inline Javascript CSS in JSX

• مرحله 09 - تعریف چند دکمه شمارنده و افزودن یک پایه کامپوننت Step 09 - Defining Multiple Counter Buttons and Adding a Component Prop

• مرحله 10 - درک React Component Props - مقدار پیش‌فرض و محدودیت نوع Step 10 - Understanding React Component Props - Default Value and Type Constrain

• مرحله 11 - استفاده از React Developer Tools Chrome Plugin Step 11 - Using React Developer Tools Chrome Plugin

• مرحله 12 - حرکت حالت به بالا - بازسازی به اجزای دکمه شمارنده و شمارنده Step 12 - Moving State Up - Refactoring to Counter and Counter Button Components

• مرحله 13 - حرکت حالت به بالا - اضافه کردن حالت به مولفه شمارنده Step 13 - Moving State Up - Adding state to Counter Component

• مرحله 14 - بهترین تمرین - استفاده از حالت قبلی در setState Step 14 - Best Practice - Using Previous State in setState

• مرحله 15 - اضافه کردن دکمه های کاهش و دکمه تنظیم مجدد Step 15 - Adding Decrement Buttons and Reset Button

• مرحله 16 - بررسی سریع مثال شمارنده Step 16 - Quick Review of the Counter Example

ترکیب Spring Boot و React برای ساخت برنامه مدیریت کامل Stack Todo Combining Spring Boot and React to Build Full Stack Todo Management Application

• مرحله 01 - مقدمه ای بر برنامه مدیریت Todo Step 01 - Introduction to Todo Management App

• مرحله 02 - شروع به کار با مولفه ورود Step 02 - Getting Started with Login Component

• مرحله 03 - درک React Controlled Component - افزودن حالت به ورود Step 03 - Understanding React Controlled Component - Adding State to Login

• مرحله 04 - Refactoring به Common Change Event برای عناصر فرم چندگانه Step 04 - Refactoring to Common Change Event for Multiple Form Elements

• مرحله 05 - افزودن احراز هویت هاردکد شده به کامپوننت ورود Step 05 - Adding Hardcoded Authentication to Login Component

• مرحله 06 - درک رندر شرطی با && در React JSX Step 06 - Understanding Conditional Rendering with && in React JSX

• مرحله 07 - پیاده سازی مسیریابی برای اجزای ورود و خوش آمد گویی با React Route Step 07 - Implementing Routing for Login and Welcome Components with React Route

• مرحله 08 - پیاده‌سازی مسیریابی از ورود به مؤلفه خوش‌آمدگویی Step 08 - Implementing Routing from Login to Welcome Component

• مرحله 09 - اضافه کردن یک مؤلفه خطا برای URI های نامعتبر Step 09 - Adding an Error Component for Invalid URIs

• مرحله 10 - افزودن پارامتر مسیر برای مؤلفه خوش آمد گویی Step 10 - Adding Route Parameter for Welcome Component

• مرحله 11 - 01 - ایجاد یک جزء اصلی React List Todo Step 11 - 01 - Creating a Basic React List Todo Component

• مرحله 11 - 02 - افزودن پیوند از صفحه خوش آمدید به Todo و ویژگی های جدید Todo Step 11 - 02 - Adding a Link from Welcome to Todo Page and New Todo Attributes

• مرحله 12 - افزودن چارچوب بوت استرپ و ایجاد کامپوننت برای هدر و پا Step 12 - Adding Bootstrap Framework and Creating Components for Header and Foot

• مرحله 13 - با استفاده از Bootstrap برای ایجاد یک منو با پیوندهای ناوبری Step 13 - Using Bootstrap to Create a Menu with Navigation Links

• مرحله 14 - بهبود پاورقی و ایجاد کامپوننت خروج Step 14 - Enhancing Footer and Creating Logout Component

• مرحله 15 - استایل کردن Login، List Todo و سایر کامپوننت ها با CSS و Bootstrap Step 15 - Styling Login, List Todo and Other Components with CSS and Bootstrap

• مرحله 16 - استفاده از Session Storage برای ذخیره رمز احراز هویت کاربر Step 16 - Using Session Storage to Store User Authentication Token

• مرحله 17 - پیاده سازی Logout برای حذف رمز احراز هویت کاربر Step 17 - Implementing Logout to remove User Authentication Token

• مرحله 18 - فعال کردن پیوندهای منو بر اساس رمز احراز هویت کاربر Step 18 - Enabling Menu Links Based on User Authentication Token

• مرحله 19 - ایمن سازی اجزا با استفاده از مسیر تأیید شده Step 19 - Securing Components using Authenticated Route

• مرحله 20 - Refactoring React Components در ماژول های جاوا اسکریپت Step 20 - Refactoring React Components into JavaScript Modules

• مرحله 21 - بررسی سریع - مسیرها، مسیرهای تأیید شده و اجزای سازنده Step 21 - Quick Review - Routes, Authenticated Route and Components

شروع به کار با خدمات Spring Boot REST API Getting Started with Spring Boot REST API Services

• مرحله 22 - وب سرویس چیست؟ Step 22 - What is a Web Service?

• مرحله 23 - سوالات مهم درباره نحوه ارتباط با خدمات وب Step 23 - Important How Questions related to Web Services

• مرحله 24 - خدمات وب - اصطلاحات کلیدی Step 24 - Web Services - Key Terminology

• مرحله 25 - معرفی خدمات وب RESTful Step 25 - Introduction to RESTful Web Services

• مرحله 26 - راه اندازی یک پروژه خدمات RESTful با Spring Boot Step 26 - Initializing a RESTful Services Project with Spring Boot

• مرحله 27 - ایجاد سرویس Hello World Boot Spring Step 27 - Creating a Spring Boot Hello World Service

• مرحله 28 - ارتقاء سرویس Spring Boot Hello World برای بازگرداندن Bean Step 28 - Enhancing the Spring Boot Hello World Service to return a Bean

• مرحله 29 - بررسی سریع پیکربندی خودکار بوت بهار و Servlet Dispatcher Step 29 - Quick Review of Spring Boot Auto Configuration and Dispatcher Servlet

• مرحله 30 - افزایش سرویس Hello World با متغیر مسیر Step 30 - Enhancing the Hello World Service with a Path Variable

اتصال Spring Boot REST API با React Frontend Connecting Spring Boot REST API with React Frontend

• مرحله 31 - اتصال React با Restful API - 1 - آماده‌سازی صفحه خوش‌آمدگویی Step 31 - Connecting React with Restful API - 1 - Preparing Welcome Page

• مرحله 32 - اتصال React با Restful API - 2 - درک Axios HTTP Cleint Step 32 - Connecting React with Restful API - 2 - Understanding Axios HTTP Cleint

• مرحله 33 - اتصال React با Restful API - 3 - اجرای React App در پورت 4200 Step 33 - Connecting React with Restful API - 3 - Running React App on Port 4200

• مرحله 34 - اتصال React با Restful API - 4 - افزودن Axios و ایجاد Hel Step 34 - Connecting React with Restful API - 4 - Adding Axios and Creating Hel

• مرحله 35 - اتصال React با Restful API - 5 - Allow Origin Requests Fr Step 35 - Connecting React with Restful API - 5 - Allow Cross Origin Requests Fr

• مرحله 36 - اتصال React با Restful API - 6 - بررسی سریع Step 36 - Connecting React with Restful API - 6 - Quick Review

• مرحله 37 - فراخوانی Hello World Bean JSON API از React Frontend Step 37 - Calling Hello World Bean JSON API from React Frontend

• مرحله 38 - تماس با سرویس HTTP Hello World با متغیرهای مسیر Step 38 - Calling Hello World HTTP Service with Path Variables

• مرحله 39 - مدیریت پاسخ های خطای API در React Frontend Step 39 - Handling API Error Responses in React Frontend

• مرحله 40 - طراحی خدمات RESTful برای منبع Todo Step 40 - Designing RESTful Services for Todo Resource

• مرحله 41 - ایجاد Spring Boot REST API برای بازیابی Todo List Step 41 - Creating Spring Boot REST API for retrieving Todo List

• مرحله 42 - اتصال React Frontend با سرویس Todo List RESTful Step 42 - Connecting React Frontend with Todo List RESTful Service

• مرحله 43 - درک روشهای چرخه حیات واکنش مهم Step 43 - Understanding Important React Lifecycle Methods

• مرحله 44 - ایجاد Spring Boot REST API برای حذف یک Todo - 1 - ایجاد DELETE Req Step 44 - Creating Spring Boot REST API to delete a Todo - 1 - Create DELETE Req

• مرحله 45 - ایجاد Spring Boot REST API برای حذف یک Todo - اجرای درخواست های DELETE Step 45 - Creating Spring Boot REST API to delete a Todo - Execute DELETE Reques

• مرحله 46 - افزودن ویژگی Delete Todo به React Frontend Step 46 - Adding Delete Todo Feature to React Frontend

• مرحله 47 - ایجاد مؤلفه Todo و مدیریت مسیریابی Step 47 - Creating Todo Component and Handle Routing

• مرحله 48 - طراحی Todo Form با لحظه، Formik و Bootstrap Step 48 - Designing Todo Form with moment, Formik and Bootstrap

• مرحله 49 - راه اندازی و رسیدگی به فرم ارسال با Formik Step 49 - Initializing and Handling Form Submit with Formik

• مرحله 50 - پیاده سازی اعتبار سنجی فرم با Formik Step 50 - Implementing Form Validation with Formik

• مرحله 51 - ایجاد Retrieve Todo Spring Boot API و اتصال React Step 51 - Creating Retrieve Todo Spring Boot API and Connecting React

• مرحله 52 - ایجاد Spring Boot REST API برای به‌روزرسانی Todo - روش درخواست PUT Step 52 - Creating Spring Boot REST API for Updating Todo - PUT Request Method

• مرحله 53 - ایجاد Spring Boot REST API برای ایجاد Todo - روش درخواست POST Step 53 - Creating Spring Boot REST API for Creating a Todo - POST Request Metho

• مرحله 54 - خدمات وب RESTful - بهترین روش ها Step 54 - RESTful Web Services - Best Practices

• مرحله 55 - اجرای ویژگی Update Todo در React Frontend Step 55 - Implementing Update Todo Feature in React Frontend

• مرحله 56 - پیاده سازی ویژگی جدید Todo در React Frontend Step 56 - Implementing New Todo Feature in React Frontend

شروع کار با Spring Security و Basic Auth Getting Started with Spring Security and Basic Auth

• مرحله 57 - مروری بر امنیت با Basic Auth و JWT Step 57 - Overview of Security with Basic Auth and JWT

• مرحله 58 - راه اندازی Spring Security Step 58 - Setting up Spring Security

• مرحله 59 - شناسه کاربری و رمز عبور استاندارد را پیکربندی کنید Step 59 - Configure standard userid and password

• مرحله 60 - بهبود React Welcome Data Service برای استفاده از Basic Auth Step 60 - Enhancing React Welcome Data Service to use Basic Auth

• مرحله 61 - Spring Security را برای غیرفعال کردن CSRF و فعال کردن OPTION Requests پیکربندی کنید Step 61 - Configure Spring Security to disable CSRF and enable OPTION Requests

• مرحله 62 - ایجاد React Axios Interceptor برای اضافه کردن Basic Auth Header Step 62 - Creating React Axios Interceptor to add Basic Auth Header

• مرحله 63 - کدگذاری سخت اعتبار کاربر را حذف کنید Step 63 - Remove Hard Coding of User Credentials

• مرحله 64 - سرویس RESTful احراز هویت اولیه را در Spring Boot ایجاد کنید Step 64 - Create Basic Authentication RESTful Service in Spring Boot

• مرحله 65 - React Frontend را برای استفاده از Basic Auth API برای اعتبارسنجی ورود، تقویت کنید Step 65 - Enhance React Frontend to use Basic Auth API to Validate Login

شروع کار با JWT Getting Started with JWT

• مرحله 66 - مقدمه ای بر JWT Step 66 - Introduction to JWT

• مرحله 67 - وارد کردن چارچوب JWT به Eclipse Step 67 - Importing JWT Framework into Eclipse

• مرحله 68 - نکته سریع - رفع خطاهای کامپایل JWT Step 68 - Quick Tip - Resolving JWT Compilation Errors

• مرحله 69 - اجرای منابع JWT - Token و Refresh Token را دریافت کنید Step 69 - Executing JWT Resources - Get Token and Refresh Token

• مرحله 70 - آشنایی با راه اندازی چارچوب امنیتی JWT Spring Step 70 - Understanding JWT Spring Security Framework Setup

• مرحله 71 - ایجاد یک کاربر جدید با رمز عبور رمزگذاری شده Step 71 - Creating a New User with Encoded Password

• مرحله 72 - استفاده از JWT Token در React Frontend Step 72 - Using JWT Token in React Frontend

• مرحله 73 - بهترین تمرین - از Constants برای URL ها و Token ها استفاده کنید Step 73 - Best Practice - Use Constants for URLs and Tokens

ادغام با Backend با استفاده از JPA و Hibernate Integrating with the Backend using JPA and Hibernate

• مرحله 74 - تنظیم Todo Entity و جمع کردن داده ها Step 74 - Setting up Todo Entity and Populating Data

• مرحله 75 - اتصال React با GET REST APIهای متصل به JPA Repository Step 75 - Connecting React with GET REST APIs connected to JPA Repository

• مرحله 76 - اتصال API های POST، PUT و DELETE REST به مخزن JPA Step 76 - Connecting POST, PUT and DELETE REST APIs to JPA Repository

• مرحله 77 - اتصال React Frontend با JPA POST، PUT و DELETE REST API Step 77 - Connecting React Frontend with JPA POST, PUT and DELETE REST APIs

ضمیمه - چکمه فنری در 10 مرحله Appendix - Spring Boot in 10 Steps

• معرفی Introduction

• مرحله 01 - معرفی بهار بوت - اهداف و ویژگی های مهم Step 01 - Introduction to Spring Boot - Goals and Important Features

• مرحله 02 - توسعه برنامه های کاربردی Spring قبل از بوت بهار Step 02 - Developing Spring Applications before Spring Boot

• مرحله 03 - استفاده از Spring Initializr برای ایجاد یک برنامه Spring Boot Step 03 - Using Spring Initializr to create a Spring Boot Application

• مرحله 04 - ایجاد یک کنترلر REST ساده Step 04 - Creating a Simple REST Controller

• مرحله 05 - پیکربندی خودکار بوت بهار چیست؟ Step 05 - What is Spring Boot Auto Configuration?

• مرحله 06 - Spring Boot در مقابل Spring vs Spring MVC Step 06 - Spring Boot vs Spring vs Spring MVC

• مرحله 07 - پروژه های شروع بوت بهار - شروع وب و شروع JPA Step 07 - Spring Boot Starter Projects - Starter Web and Starter JPA

• مرحله 08 - مروری بر پروژه های مختلف شروع بوت بهار Step 08 - Overview of different Spring Boot Starter Projects

• مرحله 09 - محرک بوت فنری Step 09 - Spring Boot Actuator

• مرحله 10 - ابزارهای توسعه دهنده Spring Boot Step 10 - Spring Boot Developer Tools

10 مرحله اول در JPA با پایگاه داده در حافظه H2 First 10 Steps in JPA with H2 in-memory database

• مرحله 01 - عدم تطابق امپدانس رابطه ای شی - درک مسئله ای که Step 01 - Object Relational Impedence Mismatch - Understanding the problem that

• مرحله 02 - جهان قبل از JPA - JDBC، Spring JDBC و myBatis Step 02 - World before JPA - JDBC, Spring JDBC and myBatis

• مرحله 03 - مقدمه ای بر JPA Step 03 - Introduction to JPA

• مرحله 04 - ایجاد یک پروژه JPA با استفاده از Spring Initializr Step 04 - Creating a JPA Project using Spring Initializr

• مرحله 05 - تعریف یک نهاد JPA - کاربر Step 05 - Defining a JPA Entity - User

• مرحله 06 - تعریف یک سرویس برای مدیریت نهاد - UserService و EntityManage Step 06 - Defining a Service to manage the Entity - UserService and EntityManage

• مرحله 07 - با استفاده از Command Line Runner برای ذخیره کاربر در پایگاه داده. Step 07 - Using a Command Line Runner to save the User to database.

• مرحله 08 - Magic of Spring Boot و In Memory Database H2 Step 08 - Magic of Spring Boot and In Memory Database H2

• مرحله 09 - مقدمه ای به Spring Data JPA Step 09 - Introduction to Spring Data JPA

• مرحله 10 - مخزن JPA بیشتر - findById و findAll Step 10 - More JPA Repository - findById and findAll