?用了幾個月做了一個項目，肯定要好好給老板展示一下。你會怎么做呢？是不是立馬開始截圖準備做PPT了呢？PPT雖好，但是也只能給老板展示一些靜態圖片和視頻，并不能實時展示你的功能。那么我們可以用Python做一個簡單的網頁來展示我們的工作成果。

本文就分享一下如何用輕量級Web框架Flask+HTML+JavaScript來做一個網頁端應用。

Flask

Flask是一個輕量級的后端應用框架，特點是簡單易用、靈活輕便。由于擁有這些特點，近些年Flask迅速成為Python端最受歡迎的Web框架之一。有了Flask做幫手，你可以輕松地搭建一個自己的Web后端。

接下來，我們來看看Flask究竟如何使用。

首先，為了避免與其他環境和項目產生版本沖突，我們為這個新項目開一個新的環境(細節可參考Python專題(一))，本文的環境為Python3.6。其次，為這個環境安裝必要的依賴包，例如Flask以及其他可能用到的安裝包。準備就緒后，新建一個Python文件，以 app.py為例。

from flask import Flask

app = Flask(__name__)

@app.route("/")

def home():

return "hello world"

if __name__ == "__main__":

app.run('0.0.0.0', port=8888)

現在就完成了一個簡單的hello world的頁面的后端，是不是簡單到不可思議？那就試試。

python app.py

然后打開瀏覽器輸入 0.0.0.0:8888/，就可以看到如下界面：

不到10行代碼，就搭成了一個簡單的Web helloworld，flask的確簡單輕便。那么我們再來探究一下這短短幾行代碼背后的原理。

首先，要初始化一個 Flask對象，這個對象就抽象了整個Web后端部分。所以后面所有關于后端的操作的入口都是這個對象。接下來我們定義了 home函數，這是一個裝飾器函數，由 app.route("/")這個有參裝飾器裝飾。被這個裝飾器裝飾的函數當后端"/"這個頁面被訪問時將會被調用。簡單來說就是， app.route(x)這個裝飾器將會定義訪問頁面時進行的操作。在上述例子中，當我們在瀏覽器中訪問 0.0.0.0:8888/的時候，Flask對象會執行 home函數，也就是返回字符串 hello world，這個字符串在瀏覽器中會被當做HTML語言來處理，因此會在頁面中顯示 hello world。Flask之所以簡單易用也是得益于裝飾器函數的巧妙設計，讓裝飾器函數幫你做了重復以及冗長的底層操作，而你只需要定義核心功能。這種方式是不是有種似曾相識呢？在《Python專題(二)Python二三事》中我們介紹了一種Python2和Python3代碼自動轉換的工具，它里面也是大量用裝飾器函數來實現各種轉換操作的。

那接下來看看 route()這個裝飾器函數究竟做了些什么吧。

def route(self, rule, **options):

"""A decorator that is used to register a view function for agiven URL rule. This does the same thing as :meth:`add_url_rule`but is intended for decorator usage::@app.route('/')def index():return 'Hello World'For more information refer to :ref:`url-route-registrations`.:param rule: the URL rule as string:param endpoint: the endpoint for the registered URL rule. Flaskitself assumes the name of the view function asendpoint:param options: the options to be forwarded to the underlying:class:`~werkzeug.routing.Rule` object. A changeto Werkzeug is handling of method options. methodsis a list of methods this rule should be limitedto (``GET``, ``POST`` etc.). By default a rulejust listens for ``GET`` (and implicitly ``HEAD``).Starting with Flask 0.6, ``OPTIONS`` is implicitlyadded and handled by the standard request handling."""

def decorator(f):

endpoint = options.pop("endpoint", None)

self.add_url_rule(rule, endpoint, f, **options)

return f

return decorator

其實也很簡單，就是提供了一個裝飾器幫你給被裝飾的函數添加一個URL規則。但也就是這種裝飾器的使用，讓你僅需要一行代碼一個參數就可以定義好一個頁面的響應。

繼續說回最開始那7行代碼，最后一行的 app.run('0.0.0.0',port=8888)會在你指定的ip和端口上運行這個Flask后端應用。這樣，當我們執行 app.py的時候，這個后端應用就可以在 0.0.0.0:8888這個地址上使用了。

了解了以上7行代碼的運行邏輯和原理，你就可以根據需求在指定的路由下定制響應。例如，你需要一個上傳圖片的功能：

import flask

from hashlib import sha1

from PIL import ImageFile

@app.route('/files', methods=['POST'])

def upload():

sha1sum = sha1(flask.request.data).hexdigest()

target = "static/{0}.png".format(sha1sum)

image_parser = ImageFile.Parser()

image_parser.feed(flask.request.data)

image = image_parser.close()

image.save(target)

以上代碼中有兩個需要注意的地方。第一是這個函數是如何與前端的請求交互的，可以注意到在route方法的參數中，我們多指定了一個 methods叫做 POST請求，這樣 upload函數就會在URL指定在 /files時前端傳來 POST請求時被執行。與 POST請求相似的還有 GET請求，一般用于前端獲取后端數據，因此我們還可以在 /files下再定義一個 GET請求，來實現另一個功能。第二是關于這個函數是如何與前端上傳的數據進行交互的，可以看到在函數中，我們使用了 flask.request.data變量，這個變量就是flask幫助我們收集的前端request的數據內容，這也就是 upload函數與前端上傳數據交互的接口，后面的一些處理都是為了將二進制或者十六進制的數據解析成圖片保存在服務器中。這樣我們又通過一個例子搞明白了前后端的請求和數據交互的過程，已經具備了完成一個簡單Web demo后端的基礎知識了。

HTML + JavaScript

有了Flask提供后端計算、IO支持還不夠，你還需要一個前端頁面來展示結果。如果你想做一個非常酷炫前端邏輯比較復雜的頁面，那可能你需要入門React等其他比較新的前端框架。但是如果你只需要一個簡單樸素的頁面來展示結果，那么HTML和JavaScript的完全可以滿足需求，而且更加容易上手。

關于HTML和JavaScript的基礎知識限于篇幅，本文不再贅述。不過筆者的實際操作經驗告訴你們 https://www.w3schools.com/這個網站基本包括了所有前端的基礎頁面、功能以及控件的例程。這些例子是完全可以滿足非專業前端的一個小小demo的需求的。如下圖，你想做一個圖片展示的靜態頁面，根據網站給你的模板去做一些修改即可，便捷易上手。

所以說，在前端這部分，你所需要做的工作就是整理一下自己的需求，需要實現幾個功能，幾個頁面，每個頁面要長什么樣子。如果你有前端基礎，可以根據設計自己去實現；如果沒有前端基礎，那就根據要求按圖索驥把w3schools上的模板拼在一起實現功能。當然，戲說不是胡說，改編不是瞎編，即使是拼湊，也是要有一個方法論的。下圖展示了筆者在做此類前端頁面時總結的方法論。以本文所提到的技術棧來說，前端大致可以分為3個部分，分別是HTML，CSS以及JavaScript。其中HTML是最頂層的文件，它定義了靜態頁面(頁面長什么樣兒)，以及前后端交互時的響應函數(一般由JavaScript來實現，在html中調用)。CSS是輔助定義靜態頁面風格的，因為在靜態頁面定義中會有非常多的冗余代碼，CSS可以把靜態頁面中的元素進行分組管理，這樣就不用對每個元素進行屬性設置，減少了HTML中大量冗余的代碼。JavaScript提供了前后端交互響應函數的實現。明白了這個架構，改寫前端的代碼時，就可以如下圖所示分為 .html文件, .css文件以及 .js文件，根據不同的作用分開改寫，這樣方便整個工程的管理，邏輯上也更加清晰。

有了方法論，接下來再看看前端部分要如何與后端交互呢？

前后端交互

變量交互

還記得Flask那一節中的 home函數么，當我們在瀏覽器中訪問 0.0.0.0:8888/頁面時，頁面顯示了 hello world，也就是 home函數的返回值。因此可以想見，如果我們讓 home返回一個包含完整HTML內容的字符串，瀏覽器就可以幫我們顯示出一個更優美的頁面。

例如，我們把 home函數改為：

@app.route("/")

def home():

return """

An Unordered HTML List

• Coffee
• Tea
• Milk

An Ordered HTML List

Coffee

Tea

Milk

"""

再次運行 app.py就會看到這樣的頁面：

這種方式盡管可以讓我們完成一個簡單頁面的搭建，但是Python的代碼中返回這么長一段字符串，看起來還是非常不優雅的。更重要的是，當HTML中存在需要跟后端交互的變量時，這種返回字符串的做法就非常不方便了。

好在，Flask幫我們實現了一個 render_template的方法，他允許我們從工程中的特定文件夾 templates中選取HTML文件作為函數的返回值。所以現在，在項目根目錄下新建一個 templates文件夾，然后在 templates下新建一個 test.html文件，寫入HTML語句:

An Unordered HTML List

• Coffee
• Tea
• Milk

An Ordered HTML List

{{order_name1}}

{{order_name2}}

{{order_name3}}

注意，當前我們的項目路徑就變為了：

| project

| ----templates

| ---------test.html

| ----app.py

render_template會自動在template路徑下索引文件。

接下來修改home`函數為：

from flask import render_template

@app.route("/")

def home():

return render_template("test.html", # render_template會自動在template路徑下索引文件

order_name1="Cola", # 通過render_template可以方便地為HTML添加變量

order_name2="Water",

order_name3="Tea"

)

再次運行 app.py就可以看到如下界面：

可以看到通過render_template，我們可以很方便地為HTML文件加入后端可以控制的變量，從而完成了變量的前后端交互。

靜態文件管理

對于一個Web應用來說，往往還需要跟前端交互一些文件內容，例如上傳或者下載文件等操作。Flask也提供了一些文件管理的能力，首先要明確的是，由于Web應用需要保證服務器上的文件安全，所以Flask后端只能訪問指定文件夾下的內容，默認情況下，這個指定文件夾為 static，可以通過

app = Flask(__name__, static_folder=static/path/you/want)

static_folder變量來修改指定文件夾。此時工程目錄就變成了：

| project

| ----templates

| ---------test.html

| ----static

| --------logo.png

| ----app.py

此時，我們在后端是可以訪問到 static目錄下的 logo.png這張圖片的。在Flask那一節中我們舉了一個圖片上傳功能實現的例子，那個例子中我們上傳的圖片或者其他數據也都會保存在這個 static目錄下。當然，既然后端可以保存和訪問 static目錄下的文件，那么前端也自然可以通過變量傳遞顯示 static目錄下的文件。下面的例子展示了前端訪問 static/logo.png的結果：

至此，就搞明白了用Flask做一個Web應用的基本原理了，最后我把這些內容整理在一張圖中，方便串聯各個模塊的邏輯關系。個人感覺，寫Flask的項目和普通項目最大的區別就是，你需要時刻注意前后端的變量、文件、數據的交互，在最開始上手時，我最困惑的就是他們的數據是如何傳遞和交互的，但是當我整理和總結了整個原理和流程后，就發現整個項目的邏輯和架構更加清晰了，自己也理解了數據的流向和數據的傳遞過程。

有了這些基礎，完全可以做一個簡單的Web Demo了，你不防也動手一試。

▼往期精彩回顧▼【Python專題(一)】python環境搭建?mp.weixin.qq.com【Python專題(二)】Python二三事?mp.weixin.qq.com【Python專題(三)】Python模塊導入與路徑管理?mp.weixin.qq.com

總結

以上是生活随笔為你收集整理的python怎么建文件dome_Python专题(四) 如何制作一个demo给老板看的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。