（一）前言

在開始學習之前，你需要確保你對Python, JavaScript, HTML, Markdown語法有非常基礎的瞭解。專案的原始碼你可以在 https://github.com/zhu-y/markdown-toolkit 找到，最後的效果會像 http://yzhu.pythonanywhere.com 展示的一樣。在本專案中，我們將通過Python Flask實現後端，使用HTML/Javascript來實現前端，將前端使用者輸入的內容傳輸給後端，然後將後端返回的HTML樣式展示給使用者。

（二）環境配置

(1) 安裝Python(如果已有Python可忽略): 前往https://www.python.org/downloads/ 下載並且安裝。

(2) 安裝Flask(推薦使用虛擬環境): 

命令列輸入

$ pip install flask

(3) 新建專案資料夾，命名為markdown-toolkit用於存放整個專案，然後進入資料夾中準備開始下一步

$ mkdir markdown-toolkit
$ cd markdown-toolkit/

（三）開始搭建後端API

(1) REST APIs 基礎

如果我要做一個非常簡單的應用——留言板，需求是：當我釋出一個留言，其他人都可以看到我的留言；而我也可以看到其他人釋出的留言。

當我開啟這個應用的網頁，其實我會通過一個API介面從前端把一個檢視留言的請求發給後端，然後由後端去從資料庫裡找出儲存的留言記錄，然後返回給前端，顯示到我的頁面上。

當我想釋出一條留言的時候，我會通過另一個對應的API介面從前端把釋出留言的請求傳送給後端，然後由後端去把我的留言寫入資料庫。這樣當別人再去開啟這個頁面，他們就能看到我的留言了。

而我剛剛所講述的這個過程，實際上就是很多web應用最基礎的原型：（圖片參考自https://dzone.com/articles/an-introduction-to-restful-apis）

REST APIs的服務有幾個很大的特點：

a) 前後端分離

b) 無狀態的：server端不儲存任何資料。會話(session)儲存在client（前端），其他資料則大部分存放在資料庫。

c) 可快取的：客戶端一般可以將響應(response)儲存在快取中。這大大提高了API的效能。

在我們的即將要搭建的Markdown解析器專案中，我們暫時不需要用到資料庫。Python+Flask將承擔起我們後端的作用，而我們的前端將會由JavaScript+HTML完成.

(2) 準備工作

我們現在要建立我們的應用，我們可以叫它app。首先，在markdown-toolkit/資料夾中，新建run.py，插入以下程式碼，目的是架起我們的Flask應用：

#!flask/bin/python

from app import app
app.run(debug=True)

然後，在我們的專案資料夾 markdown-toolkit/ 中新建一個名為app的資料夾，並且進入這個資料夾：

$ mkdir app
$ cd app

然後在markdown-toolkit/app資料夾中新建名為templates的資料夾用於存放html頁面模板，static資料夾用於存放靜態檔案，在static資料夾中新建一個叫js的資料夾來存放JavaScript程式碼。

$ mkdir templates
$ mkdir static
$ mkdir static/js

在markdown-toolkit/app資料夾中，新建__init__.py，插入以下程式碼，目的是從我們的應用中呼叫我們即將新建的md2html.py這個檔案中的程式碼：

from flask import Flask

app = Flask(__name__)
from app import md2html

然後在markdown-toolkit/app資料夾中新建md2html.py，插入以下程式碼：

from app import app

@app.route('/')
def index():
    return "HELLO WORLD"

完成上述步驟後，我們專案資料夾的結構看起來應該是這樣的：

└── markdown-toolkit
    ├── app
    │   ├── __init__.py
    │   ├── md2html.py
    │   ├── static
    │   │   └── js
    │   └── templates
    └── run.py

這個時候，我們回到專案的資料夾markdown-toolkit中去，然後執行命令：

python run.py

我們會得到：

 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 748-080-600

這就代表我們成功執行起了這個應用，這時用瀏覽器開啟http://127.0.0.1:5000/，我們就應該能夠看到這樣的一個畫面：

我們再來回顧我們寫在md2html.py這個檔案中的程式碼：

from app import app

@app.route('/')
def index():
    return "HELLO WORLD"

這段程式碼的意思是，我們把"HELLO WORLD"返回給路徑為"/"的API。這也就是說，如果我把這段程式碼改成了：

from app import app

@app.route('/hello')
def index():
    return "HELLO WORLD"

那麼我們就需要開啟http://127.0.0.1:5000/hello才能看到"HELLO WORLD"了。可是如果我想返回的是一個HTML頁面怎麼辦？那麼我們可以把我們想要返回的頁面的html放在markdown-toolkit/app/templates/資料夾中，然後從Flask自帶的庫中使用render_template來將這個頁面返回給前端。

想要嘗試，你可以從https://github.com/zhu-y/markdown-toolkit/blob/master/app/templates/index.html 拷貝我這部分的程式碼到你的markdown-toolkit/app/templates/資料夾中。然後將 md2html.py的程式碼改為下方這樣：

from app import app

from flask import render_template

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

再回到markdown-toolkit/，通過

python run.py

來執行應用，你就應該可以看到這樣的頁面了：

到此為止，你應該對Flask有一個基本的瞭解了。

在下一篇博文裡，我會講到更加具體的細節。如有疏漏、建議，還請大家指出。