【Flask】網頁設計教學(一)：快速搭起後端伺服器－恩哥Python量化教室-零基礎也能學會Python

【Flask】網頁設計教學(一)：快速搭起後端伺服器

一、前言

先前有打算做Flask網頁設計教學，順便讓自己熟悉一下。

這系列會更新得比較慢，但盡量會有多一點的範例code，偏向篇幅短但很好懂，如果還符合口味可以，不妨給予鼓勵(要打賞也是很歡迎^^)!

按照過往先上目的!此系列很簡單，就是讓你知道網頁設計的流程與實現過程。

此篇目的主要讓你學會：

1. 安裝flask

2. 運作flask

3. 網頁設計資料夾裡面該有的東西

4. 建立第一個路由(網頁)

二、安裝及運作Flask

來自wiki得簡單說明(簡單看一下看不懂沒差也正常)：

Flask是一個使用Python編寫的輕量級Web應用框架。基於Werkzeug WSGI工具箱和Jinja2模板引擎。Flask使用BSD授權。 Flask被稱為「微框架」，因為它使用簡單的核心，用擴充增加其他功能。Flask沒有預設使用的資料庫、表單驗證工具。然而，Flask保留了擴增的彈性，可以用Flask-extension[3]加入這些功能：ORM、表單驗證工具、檔案上傳、各種開放式身分驗證技術。

(0) flask安裝

pip install flask

(1) flask運作

from flask import Flask
from flask import render_template

app = Flask(__name__)



# =============================================================================
# 中間這邊放路由即可
# =============================================================================



if __name__ == '__main__':
    app.run()

安裝完後基本上指派一個Flask給app，然後再if __name__ == '__main__': app.run() 按下運行基本上會出現以下就是成功了(看吧就是這麼簡單)

接下來我們繼續往下看如何正確運作你的網頁及你基本該有的架構。

三、網頁設計資料夾裡面該有的東西

基本上你的架構

這麼我們來看一下，基本上架構是這樣的static放css、img、js資料夾，資料夾裡面放相對應的資料，

(應該不用我說css放之後你寫的.css檔、img放圖片、js放javascript)

templates裡面放你設計好的前端網頁或是模板，如果不懂就看下去，後面會說明到你懂。(templates放html)

server.py則是我們的後端伺服器。

自己右鍵新增一下這些資料夾吧，然後，看吧基本配置就是著麼簡單，接下來就來寫人生的第一個網頁吧!

四、建立第一個網頁

1.先寫一個簡單網頁.html放在templates下

這邊很簡單也很好懂，templates資料夾內就是放你寫好的html網頁，也就是前端的頁面模板等等。

這邊一個簡單範例，在templates資料夾內放一個叫home.html的檔案(內容如下)來當我們的首頁。

<!-- home.html -->
<title>恩哥Python</title>
<h1>恩哥Python</h1>
<p>歡迎來到恩哥Python 你要的這裡都有</p>

2.建立路由

from flask import render_template進來之後就可以使用render_template。

render_template這個方法可以想成當伺服器到/home這個路徑時回傳templates底下我指派的網頁送回去。

簡單說就是@app.route("/home")意思可以想像成建立一個路由叫/home，當這個網址被拜訪時return 回傳 render_template home.html送回去。

#server.py
from flask import Flask
from flask import render_template

app = Flask(__name__)


@app.route("/home")
def home():
    return render_template("home.html")



if __name__ == '__main__':
    app.run() # 開發階段也可以使用app.run(debug=True)

運行之後可以看到我們網站的網址，預設就是本端127.0.0.1:5000路徑。