跳到主要內容

初探 Flask

 前言

Flask 是一個使用 Python 語言開發的輕量級 Web 應用框架,程式碼直觀、結構清晰,非常適合新手作為網頁開發的入門。以下我將就簡單的幾個範例說明,方便快速入門


更詳細可參看: https://flask.palletsprojects.com/en/stable/


安裝所需套件

pip3 install flask



一個簡單版的 Flask 專案 範例









app.py

from flask import Flask
from flask import request
from flask import Flask, render_template

# 建立 Flask 應用程式
app = Flask(__name__)

@app.route("/")
def home():
return "<p>Hello, World!</p>"

@app.route("/user/<name>")
def user(name):
return f"<h1>Hello {name}</h1>"

# 啟動 Server
if __name__ == "__main__":
app.run(debug=True)


@app.route("/"): 路由(Routing)。這行程式碼告訴 Flask,當使用者瀏覽網站的首頁(/)時,就去執行下面的 hello_world() 函數,並把結果回傳給使用者的瀏覽器。


debug=True: 修改程式後自動重啟,發生錯誤時顯示詳細資訊



有關Flask 基本流程
















啟動

啟動網站有幾種方法


%flask --app app run 


如果檔案名稱是 app.py 或 wsgi.py,則無需使用 --app 參數。

%flask run 


%python3 app.py









執行結果

http://127.0.0.1:5000



接收網址參數



@app.route("/user/<name>")
def user(name):
return f"<h1>Hello {name}</h1>"





HTTP 方法

在存取 URL 時會使用不同的 HTTP 方法(GET, POST . . .)


from flask import Flask
from flask import request
from flask import Flask, render_template

@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
# 當使用者填完表單按下送出 POST
return do_the_login()
else:
# 當使用者第一次瀏覽網頁 GET
return show_the_login_form()
def do_the_login():
# 從前端 POST 提交的表單中獲取資料
username = request.form.get('username')
password = request.form.get('password')
# 簡單的帳密驗證範例
if username == "admin" and password == "123456":
return f"<h1>登入成功!</h1><p>歡迎回來,{username}!</p>"
else:
return "<h1>登入失敗!</h1><p>帳號或密碼錯誤,請回上一頁重試。</p>"

def show_the_login_form():
# 回傳一個簡單的 HTML 表單,action 指向同一個路由,方法為 POST
return '''
<form method="post" style="margin: 50px; line-height: 2;"> <h2>登入範例</h2> <label>帳號: </label> <input type="text" name="username" placeholder="請輸入 admin"><br> <label>密碼: </label> <input type="password" name="password" placeholder="請輸入 123456"><br> <button type="submit">登入</button> </form> '''

# 啟動 Server
if __name__ == "__main__":
app.run(debug=True)


執行結果




渲染模板

使用Jinja2 渲染 HTML 模板。我們可以使用 render_template() 函數動態地提供 HTML 文件,而不是在路由中傳回純字串。


login.html

<!doctype html>
<title>登入範例</title>
<form method="post" style="margin: 50px; line-height: 2">
<h2>登入範例</h2>
<label>帳號: </label>
<input type="text" name="username" placeholder="請輸入 admin" /><br />
<label>密碼: </label>
<input type="password" name="password" placeholder="請輸入 123456" /><br />
<button type="submit">登入</button>
</form>



app.py



def show_the_login_form():
# 回傳一個簡單的 HTML 表單,action 指向同一個路由,方法為 POST
return render_template("login.html")
# 啟動 Server
if __name__ == "__main__":
app.run(debug=True)



執行結果





Flask REST API



略 . . .

@app.route("/api/hello")
def hello():
return {
"message": "Hello API"
}
@app.route("/api/users")
def users():
data = [
{
"id": 1,
"name": "Danny"
},
{
"id": 2,
"name": "Alice"
}
]

return data
# 啟動 Server
if __name__ == "__main__":
app.run(debug=True)



執行結果






留言

這個網誌中的熱門文章

初探 Vue 呼叫 API 出現 CORS 跨來源資源共享 問題原因

提要:   在 {初探Vue 與 Spring boot 的對話} 專案 ,前端 Vue 應用程式 串接 後端 API 伺服器 ,axios 呼叫 API 時出現以下,”無法取得回應內容 (No 'Access-Control-Allow-Origin' header is present on the requested resource):” 錯誤訊息,根據查找相關資料 ,出現以下原因。 瀏覽器開發工具 錯誤訊息 畫面 錯誤原因: “ Access to XMLHttpRequest at ” from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource” 瀏覽器為了安全考量,實施了同源政策。 當您的前端應用程式 (http://localhost:8080) 嘗試呼叫一個不同來源 (不同協議、不同域名或不同埠號) 的 API 伺服器 (http://localhost:8088) 時,瀏覽器會主動阻止這個請求,除非伺服器明確地允許這個跨來源的存取。 同源政策限制(Same-Origin Policy): 同源政策限制了程式碼和不同網域資源間的互動,同源是指兩份網頁具備相同協定、埠號(如果有指定)以及主機位置 範例: 表列哪些 URL 與 URL http://www.example.com/api/p1 屬於同源: URL                                                   | 結果   | 原因 --------------------------------------------------------------------- http://www.example.com/api/p2     |...

初探 Vue 與 Spring boot 的對話之Frontend (Vue-Frontend)

  Front-end Vue 使用 REST API 建立 Vite 專案 可參考 { Vue 3 初探}  文章 danny@Danny-Yu projects % npm create vite@latest Need to install the following packages: create-vite@8.2.0 Ok to proceed? (y) y > npx > "create-vite" │ ◇   Project name: │   vue-frontend │ ◇   Select a framework: │   Vue │ ◇   Select a variant: │   TypeScript │ ◇   Use rolldown-vite (Experimental)?: │   No │ ◇   Install with npm and start now? │   Yes │ ◇   Scaffolding project in /Users/danny/Desktop/projects/vue-frontend... │ ◇   Installing dependencies with npm... added 47 packages, and audited 48 packages in 27s 6 packages are looking for funding   run `npm fund` for details found 0 vulnerabilities │ ◇   Starting dev server... > vue-frontend@0.0.0 dev > vite   VITE v7.2.4   ready in 411 ms   ➜   Local:   http://localhost:5173/   ➜   Network: use --host to expose   ➜   press h + enter to show...

初探 Spring 中的循環依賴

原因: 當兩個或多個 bean 直接或間接地相互依賴時, 就會出現 Circular Dependency (循環依賴) 如: Bean A -> Bean B -> Bean A import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; @Component public class BeanA {          @Autowired     private BeanB beanB;     public String sayHi() {         return "Hi! 我是 Class A.";     } } import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; @Component public class BeanB {          @Autowired     private BeanA beanA;     public String sayHi() {         return "Hi! 我是 Class B.";     } } 編譯時不會出現問題 danny@Danny-Yu demo % mvn clean install -Dmaven.test.skip=true                           ... ... [INFO] Installing /Users/danny/Desktop/projects/demo/target/dem...