使用 Spring Boot 和 React 的 Java 全端開發課程

Contents

用 React 和 Spring Boot 建構你的第一個 Java 全端應用程式。現在就成為一名全端的Java Web開發人員吧

從這 11.5 小時的課程，你會學到

你將使用 React 和 Spring Boot 開發你的第一個全端應用程式
你將學習使用 React 建構出色的前端應用程式的基礎知識
你將會被介紹到使用 Spring Boot 建構偉大的RESTful APIs
你將學會使用 Spring Security 來配置基本認證和 JWT
你將學習如何解決將 React 前端連線到 RESTful API 的難題
你將學習 React 的基礎知識 – 元件 – JSX，狀態和道具
你將學習如何用 Spring Boot 把 REST API 連線到 JPA/Hibernate 上
你將逐步開發一個具有登入和登出功能的 Todo 管理全端應用程式
你將學會用 Spring Boot 和 Spring Security 保護 RESTful API

要求

你有一種邊學邊玩的態度 🙂
你有一些關於 JavaScript、Java 和 Spring 的程式設計經驗
我們將幫助你學習現代 JavaScript、Spring Boot 和 JPA 的基礎知識
我們將幫助你安裝 Chrome、Eclipse、Visual Studio Code 和 Node JS（針對npm）

課程說明

歡迎來到這個關於 React 和 Spring Boot 全端 Web 開發的驚人課程。本課程旨在為 Java 和 Spring 開發者提供一個完美的第一步，即 React 和全端開發的介紹。

對 React 和現代 JavaScript 沒有經驗？沒問題。現在就開始學習吧!

課程概述

用 React 和 Spring Boot 開發你的第一個全端 Web 應用程式是很有趣的。

在本課程中，您將學習全端 Web 開發的基礎知識，使用 React、Spring Boot 和 Spring 安全框架開發一個基本的Todo管理應用程式。您將一步一步地建立 Todo 管理應用程式 – 超過100個步驟。

你將使用React（前端框架）、Modern JavaScript、Create React App（建立React專案）、Java、Spring Boot（REST API框架）、Spring（相依性管理）、Spring Security（認證和授權 – Basic和JWT）、BootStrap（頁面樣式設計）、Maven（相依性管理）、Node（npm）、Visual Studio Code（JavaScript IDE）、Eclipse（Java IDE）和Tomcat 嵌入式 Web 伺服器。

我們將幫助你設定其中的每一項

React是一個 View 框架，在與各種框架的整合方面提供了很大的靈活性，可以提供廣泛的功能。Spring Boot是一個很棒的Java框架，可以建構 RESTful API 和微服務。讓我們把這些框架結合起來，建立一個很棒的 java 全端 Web 應用程式。

課程要點

React入門–元件的基礎知識

01 第01步 – 瞭解全端應用架構
01 第02步 – 使用 Create React App 來建立和啟動 React 應用程式
01 第03步 – 將 React 應用程式匯入 Visual Studio 程式碼中
01 第04步 – 探索 React 專案結構
01 第05步 – 介紹 React 元件
01 第06步–玩轉 React 類別元件
01 第07步 – 介紹 React 中的函式元件
01 第08步 – 進一步探索 JSX – Babel 和更多
01 第09步 – 將元件重構為單獨的模組和快速回顧 JavaScript 模組
01 第10步 – 練習 – 為其他元件建立獨立的模組

使用React的下一步 – 建構計數器應用程式

02 第01步 – 章節介紹 – 建構計數器應用程式
02 第02步 – 建立基本的 React 計數器元件
02 第03步 – 在 React 計數器元件中新增一個按鈕和一個計數器
02 第04步 – 處理增量按鈕的點選事件
02 第05步 – 向 React 計數器元件新增狀態
02 第06步 – 理解 React – 幕後 – 虛擬Dom
02 第07步 – 理解 setState 和使用箭頭函式來避免這種繫結
02 第08步 – 在 JSX 中定義 inline Javascript CSS
02 第09步 – 定義多個計數器按鈕並新增一個元件道具
02 第10步 – 了解 React 元件屬性 – 預設值和型別限制
02 第11步 – 使用 React Developer Tools Chrome 外掛
02 第12步 – 向上移動狀態 – 重構到計數器和計數器按鈕元件
02 第13步 – 向上移動狀態 – 向計數器元件新增狀態
02 第14步 – 最佳實踐 – 在 setState 中使用先前的狀態
02 第15步 – 新增遞減按鈕和 Reset 按鈕
02 第16步 – 快速回顧計數器的範例

結合 Spring Boot 和 React 建構全端 Todo 管理應用程式

03 第01步 – 介紹 Todo 管理應用程式
03 第02步 – 開始使用登入元件
03 第03步 – 理解 React 控制的元件 – 為登入元件新增狀態
03 第04步 – 重構到多個表單元素的共同變化事件
03 第05步 – 在登入元件中新增硬編碼認證
03 第06步 – 理解 React JSX 中使用&&的條件渲染
03 第07步 – 使用 React Router 為登入和歡迎元件實現路由
03 第08步 – 實現從登入到歡迎元件的路由
03 第09步 – 為無效的 URI 新增一個錯誤元件
03 第10步 – 為歡迎元件新增路由參數
03 第11步 – 01 – 建立一個基本的React List Todo元件
03 第11步 – 02 – 新增一個從歡迎頁到Todo頁的連結和新的Todo屬性
03 第12步 – 新增 Bootstrap 框架併為頁首和頁尾建立元件
03 第13步 – 使用 Bootstrap 建立一個帶有導航連結的選單
03 第14步 – 加強頁尾和建立登出元件
03 第15步–用 CSS 和 Bootstrap 設計登入、List Todo和其他元件的樣式
03 第16步 – 使用會話儲存來儲存使用者認證令牌
03 第17步 – 實現登出以移除使用者認證令牌
03 第18步–基於使用者認證令牌的菜單鏈接的啟用
03 第19步–使用認證路線確保元件安全
03 第20步 – 將 React 元件重構為 JavaScript 模組
03 第21步 – 快速回顧 – 路由、認證路由和元件

開始使用Spring Boot REST API服務

03 第22步 — 什麼是 Web 服務？
03 第23步 — 與 Web 服務有關的重要的如何問題
03 第24步 — Web服務 — 關鍵術語
03 第25步 — RESTful Web 服務介紹
03 第26步 — 用 Spring Boot 初始化 RESTful 服務專案
03 第27步 — 建立一個 Spring Boot Hello World 服務
03 第28步 — 增強 Spring Boot 的 Hello World 服務以返回一個 bean
03 第29步 — 快速回顧 Spring Boot 自動配置和 Dispatcher Servlet –後端發生了什麼？
03 第30步 — 用路徑變數加強Hello World服務

將 Spring Boot REST API 與 React 前端連線起來

03 第31步 – 用 Restful API 連線 React – 1 – 準備歡迎頁面
03 第32步 – 用 Restful API 連線React – 2 – 瞭解 Axios HTTP Cleint 框架和 Promises
03 第33步 – 用 Restful API 連線React – 3 – 在4200埠執行 React 應用程式
03 第34步 – 用 Restful API 連線React – 4 – 新增 Axios 和建立 HelloWorldService
03 第35步 – 用 Restful API 連線React – 5 – 允許從Spring Boot 跨源請求
03 第36步 – 用 Restful API 連線React – 6 – 快速回顧
03 第37步 – 從 React 前端呼叫 Hello World Bean JSON API
03 第38步 – 用路徑變數呼叫 Hello World HTTP 服務
03 第39步 – 在 React 前端處理 API 錯誤響應
03 第40步 – 為 Todo 資源設計 RESTful 服務
03 第41步 — 建立 Spring Boot REST API 以檢索 Todo 列表
03 第42步 – 將 React 前端與 Todo List RESTful 服務連線起來
03 第43步 – 瞭解重要的 React 生命週期方法
03 第44步 — 建立 Spring Boot REST API 來刪除Todo — 1 — 建立DELETE請求方法
03 第45步 — 建立Spring Boot REST API來刪除Todo — 執行DELETE請求方法
03 第46步 — 在 React 前端新增刪除Todo功能
03 第47步 — 建立Todo元件和處理路由
03 第48步 – 用 moment、Formik 和 Bootstrap 設計 Todo 表單
03 第49步 – 用 Formik 初始化和處理表單提交
03 第50步 – 用 Formik 實現表單驗證
03 第51步 – 建立 Retrieve Todo Spring Boot API 並連線 React
03 第52步 — 建立用於更新 Todo 的 Spring Boot REST API — PUT請求方法
03 第53步 — 建立 Todo 的 Spring Boot REST API — POST請求方法
03 第54步 — RESTful Web服務 — 最佳實踐
03 第55步 — 在 React 前端實現更新 Todo 功能
03 第56步 – 在 React 前端實現新 Todo 功能

開始使用 Spring 安全和基本授權

03 第57步 — 使用Basic Auth和JWT的安全概述
03 第58步 — 設定Spring Security
03 第59步 — 配置標準的使用者名稱和密碼
03 第60步 — 加強React歡迎資料服務以使用Basic Auth
03 第61步 — 配置Spring Security以禁用CSRF並啟用OPTION請求
03 第62步 — 建立React Axios攔截器以新增Basic Auth頭
03 第63步 — 刪除使用者憑證的硬編碼
03 第64步 — 在Spring Boot中建立基本認證 RESTful 服務
03 第65步 – 加強 React 前端，使用 Basic Auth API 來驗證登入憑證

開始使用JWT

03 第66步 — JWT的介紹
03 第67步 – 將 JWT 框架匯入 Eclipse 中
03 第68步 – 快速提示 – 解決 JWT 的編譯錯誤
03 第69步 — 執行 JWT 資源 — 獲取令牌和重新整理令牌
03 第70步 — 瞭解 JWT Spring 安全框架的設定
03 第71步 — 建立一個帶有編碼密碼的新使用者
03 第72步 — 在 React 前端使用JWT令牌
03 第73步 – 最佳實踐 – 為 URL 和令牌使用常數

使用 JPA 和 Hibernate 與後端進行整合

03 第74步 – 設定 Todo 實體和填充資料
03 第75步 – 連線 React 與 GET REST APIs 到 JPA 儲存庫
03 第76步 – 將POST、PUT和DELETE REST APIs 連線到 JPA 儲存庫
03 第77步 – 將 React 前端與 JPA POST、PUT和DELETE REST APIs連線。

10個步驟中的Spring Boot

介紹Spring Boot的10個步驟

第01步 – 介紹Spring Boot – 目標和重要特性
第02步–在 Spring Boot 之前開發 Spring 應用程式
第03步 – 使用 Spring Initializr 建立一個 Spring Boot 應用程式
第04步 – 建立一個簡單的 REST 控制器
第05步 – 什麼是 Spring Boot 自動配置？
第06步–Spring Boot vs Spring vs Spring MVC
第07步–Spring Boot 入門專案–Starter Web和 Starter JPA
第08步–不同的 Spring Boot 啟動專案概述
第09步– Spring Boot 執行器
第10步– Spring Boot 開發工具

使用 H2 記憶體資料庫的JPA的前10個步驟

JPA的10個步驟介紹

第01步 – 物件關係不匹配 – 瞭解JPA所解決的問題
第02步 – JPA之前的世界 – JDBC、Spring JDBC和myBatis
第03步 – JPA的介紹
第04步 – 使用 Spring Initializr 建立一個JPA專案
第05步 – 定義一個 JPA 實體 – 使用者
第06步 – 定義一個服務來管理實體 – UserService 和 EntityManager
第07步 – 使用命令列執行程式將使用者儲存到資料庫
第08步 – Spring Boot 和記憶體資料庫H2的魅力
第09步 – 介紹Spring Data JPA
第10步 – 更多的 JPA 儲存庫–findById 和 findAll

現在就開始學習

目標受眾

你想用 React 和 Spring Boot 開發你的第一個全端應用程式
你是一個 Java 開發者，希望開始使用 React 和 Spring Boot 進行全端開發
你是一個 Spring Boot 開發者，希望用 React 建立一個全端應用程式
你想學習 React 前端框架的基本建構模組
你想學習使用 Spring Boot 框架建構基本的 RESTful API 和服務
你想學習如何用 Spring Boot 和 Spring Security 的基本認證和 JWT 來保護 REST API

講師簡介

in28Minutes Official Learners – Java, Spring, Full Stack – React & Angular ( 更多講師主講課程介紹 )

關於我 我是 Ranga Karanam，與世界各地的主要銀行客戶進行15年的 Java 程式開發和設計的架構師。我們創立 in28Minutes 是想要創造與真實世界專案相關的實踐課程。逐步指引系列是我們的創作之一。

關於 in28Minutes

我們使用基於問題解決方案的逐步實踐方法，結合實際的實用案例。雖然我們的主要專長是 Java 和相關框架（Spring、Spring Boot 、Spring MVC、Struts、Hibernate）的開發、設計和架構，但是我們正在擴展到前端世界（Bootstrap、JQuery、Angular JS）。

我們的信仰

最好的課程是互動和有趣的。建立高品質應用的基礎最好是在學習的時候培養。

我們的方法

我們喜歡自由軟體，因此，我們所有的程式碼也是開放的，並且可以在 Github上取得。我們使用 80-20 法則，我們對 20% 重要事物用 80％的時間深度說明。我們並簡述其他的東西，給你裝備足夠的知識，以便你能自己學得更多。基於問題解決方案的逐步實踐學習。