---
tags: html
description: 中興大學資訊研究社1092學期程式分享會主題社課
---

###### [@NCHUIT/](https://hackmd.io/@NCHUIT)[HTML/](/@NCHUIT/html)[網頁教學/](/@NCHUIT/html-1092)
# 後端
## 介紹
### 後端是什麼
如果是單純的靜態網頁，只能直接寫死html，無法做動態的更動，而有了後端後就能向後端取得資料後，再動態渲染網頁
### 為什麼要向後端取資料
以我自己做的網站為例子，因為想學韓語所以自己做了一個韓語版的VoiceTube
經由搜尋後，後端必須返回影片的資料，然後再由js將資料渲染到網頁上
> 進入開發人員工具只要按F12即可
>
### 如何取得資料
經由request url取得

### 此堂課就是要教你如何設定路由
以上述的例子就是當你`request /channels/more` 的時候，你就要返回更多channels的資料

>至於後端為什麼有這些資料，那就要結合爬蟲了，以我的例子來說，我是爬vlive(一個韓國明星直播平台)的影片和字幕，如果有興趣記得去上爬蟲的社課喔!

## 開始教學
以下以簡單的登入範例示範網頁前後端如何做資料的傳遞 => 前端 request 到後端，後端再把所需要的資料傳回來
(我上面的搜尋例子也是同樣的原理，前端傳搜尋關鍵字到後端，後端再把搜到的影片傳回前端)
### 練習一: 製作前端
請依照w3school的[input範例](https://www.w3schools.com/tags/tag_input.asp)修改成登入介面
中文版:https://www.w3school.com.cn/tags/att_input_type.asp

### 練習二: 架設後端
根據教學建立第一個app
https://hackmd.io/@shaoeChen/HJiZtEngG/https%3A%2F%2Fhackmd.io%2Fs%2FSyP4YEnef

### 練習三: 前後端結合
根據教學將我們的登入頁面使用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`

範例:
按下登入後，讓頁面顯示以下訊息

### 練習五
使用if else 判斷送過去的帳密是否正確
python 的 if else 教學
https://www.w3schools.com/python/python_conditions.asp
> 正確的帳密請大家自行決定就好

並且將結果顯示在頁面


### 練習六
將程式碼上傳到github

## 下課
提前做好的同學完成後可自行下課