關於這個網站

2020/06/19 (內容更新)

2020/07/06 (內容更新)

** 108學年度「Web Programming」請詳見 「Web Programming in PHP」 **

這個教學網站目前是輔仁大學資訊管理學系吳濟聰老師的專題學生的自主學習網站，利用本網站充實web基本知識，目前在前端的部分採用react，而後端的部分是採用spring framework (Java)。

自學進度規劃

• 前端

  • 複習前端的基本概念

    • HTML / CSS / JavaScript / Bootstrap / Form

  • React 基礎:

    • First React + JS for react (week 01)

    • Functional Component with Hooks(week 01)

    • Form (week02)

    • Material UI (week 02)

    • Router & Material UI (class 02)

  • React進階

    • Context

    • Context with Hooks

    • Redux

    • Redux with Hooks

    • Class Component

• 後端

  • Spring 基礎:

    • Spring Rest Controller (week 03)

    • DB (week03)

      • 安裝mysql，產生table，讀取資料表內容

      • 新增資料

      • 更改資料

    • Spring Security

• 前後端整合 React + Spring

  • Reat + REST (class 04)

  • Material UI

  • React + Spring Rest (class 04)

  • Router + MUI

這個教學網站是為了輔仁大學資訊管理學系吳濟聰老師的專題學生而改寫，在前端的部分改採用react，而後端的部分是採用spring framework:

前端

• 以下內容應該已在前面的基礎課程中學過，請自行複習

  • Web

  • HTML

  • CSS

  • JavaScript

    • jQuery

  • Bootstrap

  • Form

Spring with React

• 過去的前端是由伺服器端產生html，react則是利用javascript在瀏覽氣端產生html

• React: 利用create-react-app產生一個react應用程式

• REST: 利用react存取restful web services

  • 採用Axios

    • get

  • 範例也用react hooks重寫，採用functional component，使用到useState、useEffect

• Material-UI

  • 利用rest的範例說明如何在react中使用Material-UI

  • Material-UI

    • Table

• React + Spring Rest

  • 利用react存取spring boot開發的restful web services，spring boot的部分請參考: Spring Rest Controller

  • 採用Axios

    • get

    • post

  • 範例也用react hooks重寫，採用functional component，使用到useState、useEffect

  • 說明如何在react中使用Material-UI

    • Table

    • TextField

    • Button

    • 如何設定style

• Airtable

  • 利用react存取airtable提供的restful web services

• Router + MUI

  • 利用react router將不同的component串連起來

  • 利用前面幾個範例說明如何在react中使用Material-UI

    • AppBar

    • Link

後端

• Java已在前面的基礎課程中學過，請自行複習

• Spring是一個以java為基礎的框架，有相當多可以利用的套件，方便我們開發較複雜的web應用程式

  • Spring Rest Controller

  • DB: Spring JDBC in REST controller

  • Spring Security

    • Spring Boot Security Basic Authentication – Secure REST API (2019/01)

    • Spring REST + Spring Security Example

    • Spring boot security rest basic authentication example

    • Spring Security for a REST API

  • JWT

    • Spring Security結合JWT的方法教程

    • Spring MVC整合Spring Security基本設定 (part 1)

    • Spring MVC RESTful API 整合Spring Security及JWT (part )

    • What is JWT?

    • Spring Security with JWT

    • Secure a Spring Boot REST API with JSON Web Token

    • Spring Boot Security + JWT Hello World Example

    • Spring Boot Security + JWT + MySQL Hello World Example

    • Protect REST APIs with Spring Security and JWT

    • REST Security with JWT using Java and Spring Security

  • React + JWT

    • Integrating Spring Boot and React with Spring Security - Basic and JWT Authentication

  • Spring Session - Spring Boot with Redis

    • [Redis] 在 Windows 下載與安裝 Redis

    • A.3.2 Installing Redis on Windows

    • Spring Session - REST

    • Living Without Sessions

  • Spring Security Login Page with React

• *****以下內容尚未將前端的部分改採用react + rest

• Spring Framework (Web)

  • Spring Boot

  • Spring with React

  • Spring Rest Controller

  • React + Spring Rest

  • Spring Data

  • Spring REST

    • React.js and Spring Data REST

      • Part 1 - Basic Features

      • Part 2 - Hypermedia Controls

      • Part 3 - Conditional Operations

      • Part 4 - Events

      • Part 5 - Securing the UI and the API

  • Spring FileUpload

  • Spring Mail

• Spring Framework

  • Spring JPA

  • Spring Session

  • Spring Security

  • Spring Validation