Web

程式設計

2019/10/22 (內容更新)

2019/10/27 (增加連結)

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

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

前端
- 複習前端的基本概念
  - HTML / CSS / JavaScript / Bootstrap / Form
- React 基礎:
  - JS for react (week 01)
  - First React (week 01)
  - Class Component (week 01)
  - Functional Component with Hooks(week 02)
  - Material UI (week 03)
  - Router & Material UI (week 04)
- React進階
  - Context
  - Context with Hooks
  - Redux
  - Redux with Hooks
後端
- Spring 基礎:
  - Spring Rest Controller (week 01)
  - DB
    - 安裝mysql，產生table，讀取資料表內容 (week 02)
    - 新增資料 (week 03)
    - 更改資料 (week 04)
  - Spring Security
前後端整合 React + Spring
- Reat + REST
- Material UI
- React + Spring Rest (week 05)
- Router + MUI

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

過去的前端是由伺服器端產生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