---
# System prepended metadata

title: Python Flask
tags: [python, 區塊鏈, ISU]

---

# Python Flask
###### tags: `python` `區塊鏈` `ISU`

## WSL環境
* [Windows 10 上適用於 Linux 的 Windows 子系統安裝指南](https://docs.microsoft.com/zh-tw/windows/wsl/install-win10#install-your-linux-distribution-of-choice)
* [開始在 Windows 上使用 Python 進行 Web 開發](https://docs.microsoft.com/zh-tw/windows/python/web-frameworks)

## Flask實作_基礎
:::info
[Book_Python Flask實作記錄](https://hackmd.io/@shaoeChen/HJiZtEngG/https%3A%2F%2Fhackmd.io%2Fs%2FSyP4YEnef)
:::

## 簡單的 GET 和 POST 方法取得 Flask 網頁資料
:::info
參考來源：
1. [[Flask教學] 簡單的 GET 和 POST 方法取得 Flask 網頁資料](https://www.maxlist.xyz/2019/03/17/flask-get-post/)
2. [Flask 學習心得筆記 (3): request 當中 Get、Post 的指令](https://clay-atlas.com/blog/2020/02/25/python-flask-chinese-note-html-request-get-post/)
3. [輕鬆學習 Python：使用 Flask 創建 Web API](https://https://medium.com/datainpoint/flask-web-api-quickstart-3b13d96cccc2)
:::

### 環境安裝
環境準備，確保安裝 Python環境, Flask, requests
安裝方法
```
pip install Flask
pip install requests
```

### Flask 接收 GET 方式的網頁資料
GET 取得參數方式有三種：
1. request.args.get('name')
2. request.values.get('name')
3. def index_id('id')
#### 方法一：request.args.get(‘name’)
範例參考
```python=
from flask import Flask, request
from flask import render_template

app = Flask(__name__)

#Type 1
@app.route("/", methods=['GET'])
def index():
    name = request.args.get('name')
    return "Hello"+name

if __name__ == '__main__':
    app.debug = True
    app.run()
```
#### 方法二：利用 request.values.get(‘name’)
範例參考
```python=
from flask import Flask, request
from flask import render_template

app = Flask(__name__)

#Type 2
@app.route("/", methods=['GET'])
def index():
    name = request.values.get('name')
    return "Hello" + name

if __name__ == '__main__':
    app.debug = True
    app.run()
```

#### 方法三：利用 def index_id(id)
範例參考
```python=
from flask import Flask, request
from flask import render_template

app = Flask(__name__)

#Type 3
@app.route("/<int:id>", methods=['GET'])
def index_id(id):
    return "Hello"+str(id)

if __name__ == '__main__':
    app.debug = True
    app.run()
```

如果要將取得資料再傳入到html內，可以用render_template(‘abc.html’, name_template=name)，將參數帶回頁面

```python=
from flask import Flask, request
from flask import render_template

app = Flask(__name__)

#將GET取得資料，傳到html內
@app.route("/name", methods=['GET'])
def index_name():
    name = request.args.get('name')
    return render_template('abc.html', name_template=name)

if __name__ == '__main__':
    app.debug = True
    app.run()
```

#### 範例測試

```python=
# -*- coding: utf-8 -*-
from flask import Flask, request

app = Flask(__name__)

@app.route('/', methods=['GET'])
def main():
     name = request.args.get('name')
     return 'My name is {}'.format(name)

if __name__ == '__main__':
     app.run(host='127.0.0.1', port=5000)
```
![](https://i.imgur.com/eNP4qnX.png)

### Flask 接收 POST 方式的網頁資料

POST 取得參數方式有兩種：
1. request.form.get(‘username’)
2. request.values.get(‘username’)

開始前先建立 html，裡面寫一個簡單的 form，當使用者按下 submit 後會將參數username 傳送到指定網址 (**html檔案請放置在templates子目錄下**)

```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Page</title>
</head>
<body>
    <form method='post' action="/post_submit"> 
        <input type='text' name='username'>
        <button type='submit'>Submit</button>
    </form>
</body>
</html>
```

#### 方法一：利用 request.form.get(‘username’)

當使用者在網頁上點擊 submit 按鈕後，會傳送 POST 方法的 http，我們在 Flask sever 中使用 request.values.get(‘username’) 來接收參數

```python=
from flask import Flask, request, render_template

app = Flask(__name__)

@app.route("/post_submit", methods=['GET', 'POST'])
def submit():
    if request.method == 'POST':
        return 'Hello ' + request.form.get('username')    
    return render_template('post_submit.html')

if __name__ == '__main__':
    app.debug = True
    app.run()
```

#### 方法二：利用 request.values.get(‘username’)

這邊只是將剛剛的 request.form 修改成 request.values，和方法一道理都是一樣的

```python=
from flask import Flask, request, render_template

app = Flask(__name__)

@app.route("/post_submit", methods=['GET', 'POST'])
def submit():
    if request.method == 'POST':
        return 'Hello ' + request.values.get('username')    
    return render_template('post_submit.html')

if __name__ == '__main__':
    app.debug = True
    app.run()
```
最後就是執行上述程式，運行server！

#### 範例測試

首先是撰寫一個 HTML 的登入檔 login.html (發送 Post 參數的格式必須為 form)：
```htmlmixed=
<body style="background-color: white">
     <form method="post" action="/login">
         <input type="text" name="user">
         <button type="submit">Submit</button>
     </form>
</body>
```
然後撰寫一個接受輸入參數跳轉的 HTML 檔 result.html，因為要接收來自 Post 的參數，故使用 {{ name }} 這種 Jinja2 語法：
```htmlmixed=
<body style="background-color: black">
     <p style="color: white">Your user name is {{ name }}</p>
</body>
```

程式範例
```python=
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def main():
  return render_template('login.html')

@app.route('/login', methods=['POST'])
def result():
  if request.method == 'POST':
    user = request.values['user']
  print(user,':',request.remote_addr)
  return render_template('result.html', name=user)

if __name__ == '__main__':
  app.run(host='127.0.0.1', port=5000)
```
執行結果
輸入
![](https://i.imgur.com/qFc0fou.png)

顯示
![](https://i.imgur.com/rm5quKj.png)

簡單的 GET 和 Post 方法取得 Flask 網頁資料 就到這邊告一段落！

