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% 的時間深度說明。我們並簡述其他的東西,給你裝備足夠的知識,以便你能自己學得更多。基於問題解決方案的逐步實踐學習。
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
- 點選這個✨優惠連結✨ 課程特價 | Udemy 永久擁有課程 NT330 起( 在電腦瀏覽器登入,點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得 )
- Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- $代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程
也許你會有興趣
- 入門 React 前端開發的三門 udemy 熱門課程
- 給初學者的 Spring & Hibernate 課程( 涵蓋 Spring Boot )
- 更多 Spring 線上課程介紹
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣!