fbpx

使用 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% 的時間深度說明。我們並簡述其他的東西,給你裝備足夠的知識,以便你能自己學得更多。基於問題解決方案的逐步實踐學習。

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

  • 點選這個優惠連結 課程特價 | Udemy 永久擁有課程 NT330 起( 在電腦瀏覽器登入,點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得 )
  • Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
  • 手機上點選優惠連結看到的價格比電腦上看到的貴
  • $代表當地貨幣, 如在台灣為 NT
  • 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現

報名參加課程

Sponsored by Udemy


Lingoda

也許你會有興趣


不受 FB 演算法影響,歡迎透過 e-mail 訂閱網站更新

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: