- 前言
在坐火車往返嘉義高雄的期間，斷斷續續看了一些 React.js 框架的影片教學後(Tech with Tim)，我嘗試做出了一個簡單的 todo-list，認識了 React 中 state tree 的概念，便覺得原來 js 在有了框架中是這麼的強大，原來前端沒有我想得這麼麻煩，程式碼相比於 Jquery 乾淨太多了。在腦袋中思考一下整體 state tree 後就開始製作這個專案了。
- 介紹
- 衝堂課程鎖定
- 課表圖表化預覽
- 更簡潔現代的風格
- 更方便的搜尋和篩選
- 畫面的動態更新
- 計算已選課程的學分數
- 後端
後端我是將之前開發「嘉義大學課表產生器」的 API 新增一個端口的，依然是 python flask restful。
不得不說，全校課程查詢這一塊我觀察了很久，因為這個選單只有給四個大方向搜尋「依關鍵字查詢」「依類別查詢」「依校區節次查詢」「依系所查詢」，首先依關鍵字和依系所就先排除，因為一個不知道關鍵字，一個抓不到沒有系所的(軍訓之類的)。接著依類別雖然有幾乎所有的課程，但是每個分類點進去的 form 又不太一樣，這會導致撰寫爬蟲很麻煩。
最後是選擇了依校區節次查詢，缺點是每更新一次資料就要花費 3~5 分鐘，因為要送出「節數 * 星期 * 校區」個 requests，且學校的輸出的結果頁面還要等他渲染個一兩秒，然後我又不想給學校造成太大的負擔，所以沒有選擇 multithread，不過由於是 3~5 分鐘我覺得是可以接受的，畢竟也沒有需要很常更新。未來可能會用個 github action 來定時更新資料。
- 前端
這次前端我是使用 React.js 框架來完成的，之所以想學 react 因為看到外國前端設計師影片看他們很常使用 react，所以我就想說也來玩看看，也算是大概接觸一下前端三本柱之一看看。
我覺得 React 的好處是畫面的更新是 based on 元件內的狀態，只要一修改了那個狀態，有關那個狀態的元件都會被重新渲染，而且 react 內部的 diff 演算法也會去偵測哪些頁面內容沒修改，省去不必要的重新渲染。
CSS 的部分就是使用 bootstrap 以及「嘉義大學課表產生器」的部分 CSS。Icon 一樣是我自己用小畫家隨便畫的 XD
達人
