HackMD
@NCHUIT/HTML/網頁教學/
後端
介紹
後端是什麼
如果是單純的靜態網頁，只能直接寫死html，無法做動態的更動，而有了後端後就能向後端取得資料後，再動態渲染網頁
為什麼要向後端取資料
以我自己做的網站為例子，因為想學韓語所以自己做了一個韓語版的VoiceTube
經由搜尋後，後端必須返回影片的資料，然後再由js將資料渲染到網頁上
進入開發人員工具只要按F12即可
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
如何取得資料
經由request url取得
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
此堂課就是要教你如何設定路由
以上述的例子就是當你request /channels/more 的時候，你就要返回更多channels的資料
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
至於後端為什麼有這些資料，那就要結合爬蟲了，以我的例子來說，我是爬vlive(一個韓國明星直播平台)的影片和字幕，如果有興趣記得去上爬蟲的社課喔!
開始教學
以下以簡單的登入範例示範網頁前後端如何做資料的傳遞 => 前端 request 到後端，後端再把所需要的資料傳回來
(我上面的搜尋例子也是同樣的原理，前端傳搜尋關鍵字到後端，後端再把搜到的影片傳回前端)
練習一: 製作前端
請依照w3school的input範例修改成登入介面
中文版:https://www.w3school.com.cn/tags/att_input_type.asp
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
練習二: 架設後端
根據教學建立第一個app
https://hackmd.io/@shaoeChen/HJiZtEngG/https%3A%2F%2Fhackmd.io%2Fs%2FSyP4YEnef
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
練習三: 前後端結合
根據教學將我們的登入頁面使用flask渲染
(將以上的hello man換成登入頁面)
html檔必須放在名叫templates的資料夾
如果需要更改資料夾名稱可用下面的程式碼設定
app = Flask(__name__,template_folder='新的資料夾名稱')
https://hackmd.io/@shaoeChen/HJiZtEngG/https%3A%2F%2Fhackmd.io%2Fs%2FHJkOuSagf
練習四
flask接收傳過來的值後，顯示我們傳過去的帳號密碼
接收表單資料的方法
data = request.args.get
範例:
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
按下登入後，讓頁面顯示以下訊息
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
練習五
使用if else 判斷送過去的帳密是否正確
python 的 if else 教學
https://www.w3schools.com/python/python_conditions.asp
正確的帳密請大家自行決定就好
並且將結果顯示在頁面
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
練習六
將程式碼上傳到github
下課
提前做好的同學完成後可自行下課
