[暑訓網站開發日常]

by:陳澤榮 (timothychenpc@gmail.com)

這個網站本身時用於四校聯合暑訓（楓落景畔遇建成），然後仍然沒有採用RESTful的方式設計api，所以忍耐一下😂

基本資訊

網址

IZCC - 楓落景畔遇建成

izcc website

https://izcc.ckcsc.net

Github位置

GitHub - Timothychen00/izcc2022summer

Contribute to Timothychen00/izcc2022summer development by creating an account on GitHub.

https://github.com/Timothychen00/izcc2022summer

Hackmd

IZCC2022暑訓-網管組 - HackMD

On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

https://hackmd.io/UeuTj4z-QouMGHmnVn2WGw

目標

功能

介紹暑訓的內容（暑訓的時間，內容，友社以及報名資訊等）

報名功能（要可以進行檔案上傳）

開發

頁面以及路由設計

主頁 / [get]

這個頁面的設計和製作都是由WhiteCat進行的，但是因為是使用react框架（採用js渲染html的元素）進行的前端的撰寫，因為不是傳統的html和css的格式，所以在和後端flask合併的過程中有很多的問題出現（也常常會出現跟flask的模板引擎Jinja2打架的情況）

報名表單 /join [get, post]

這個頁面因為需要進行表單驗證（同時包含csrf_token）所以這邊我們使用html和css重新寫了一次，然後這次網站的報名因為想要跟一般傳統的google表單所搭建的報名做出區別，所以我們就一樣需要去找其他的儲存空間（但是因為我個人比較熟NoSQL所以最終採用Mongodb作為所有內容的儲存）

然後這個路由支援兩個方法一個是一般的get一個是post請求，而post請求主要就是因為表單是通過post請求封裝在request body進行傳輸的，然後表單驗證的部分分為以下兩個部分：

一般的表單內容

一般表單內容的部分我是採用wtforms進行後端驗證（前端只有進行required驗證），

然後wtforms的好處就是你可以使用物件的方式構建你的表單，然後再使用jinja2插入到html中渲染整個表單的內容（而且還自帶csrf_token的功能）

小黃卡的檔案

這邊進行檔案內容的上傳因為檔案的大小絕對不會超過16MB所以我就沒有使用GridFS而是直接使用一般的document進行儲存，然後在整個檔案上傳和處理的部分會經過幾個步驟：

上傳檔案

檢查檔案大小（限制每個檔案3MB）如果檔案大小超過3MB則會觸發http 413的錯誤（比較高層級的錯誤），然後可以自定義error handler去管理頁面

檢查檔案格式（pdf, png, jpg, jpeg, HEIC）不符合則在產生回應的時候客製化進行回應（檔案格式不符合）

檔案名稱（避免因為空格或者斜線影響到檔案系統的儲存，類似注入）這邊是使用werkzeug.utils套件的secure_filename將檔案名稱安全化

寫入暫存因為好像沒有辦法直接將內容進行上傳（沒有找到獲取那個file物件的原數據的方法）

將檔案上傳到mongodb 這邊就是比較一般的上傳只是上傳的內容都是二進制的檔案內容

清除暫存

*HEIC是iphone的圖片檔案格式

數據庫設計


mongodb
└───izcc捷大(DB)
│   └───games(Collection)
│   └───settings(Collection)
└───izcc_join報名網站(DB)
│   └───data 一般資料(Collection)
│   └───file 小黃卡資料(Collection)

這次一樣是採用NoSQL作為這次的主要的儲存，然後以上是這次網站的數據庫架構，然後可以發現最主要報名的內容都是放在data和file這兩個collection中，針對於檔案儲存的部分，這次沒有考慮使用blob之類的東西，想要直接一次都存放在mongodb中，而mongodb支援兩種檔案存儲的方式：

一個document放一個檔案的數據（16mb以內）

使用gridFS針對檔案進行切分，放在不同的document（16mb以上）

因為這次所有需要儲存的檔案只有圖片（小黃卡），所以可以直接使用第一種方案，使用單一document管理我們的數據。

這個是Mongodb Compass中查看的izcc_join這個db的內容（還好mongodb給的500mb的免費空間很夠用）

檔案設計


izcc2022summer
|   README.md        說明文件
|   download_file.py 輸出名單+下載小黃卡
|   requirements.txt 依賴資源
|   app.py           主程式（包含伺服器設定）
|   
└───main             主要後端檔案的所在
|   |   __init__.py
|   |   model.py     進行物件設計
|   |   forms.py     表單驗證
|   |   routes.py    路由管理
└───static           靜態資料
│   └───js
│   └───css
│   └───media        影像資源
└───templates        html檔案
│   |   index.html
│   |   join.html