Python+Flask+Gunicorn 项目实战(一) 从零开始，写一个Markdown解析器 —

（一）前言

在开始学习之前，你需要确保你对Python, JavaScript, HTML, Markdown语法有非常基础的了解。项目的源码你可以在 https://github.com/zhu-y/markdown-toolkit 找到，最后的效果会像 http://yzhu.pythonanywhere.com 展示的一样。

本文分为三个部分：

Python+Flask+Gunicorn 项目实战(一) 从零开始，写一个Markdown解析器 —— 初体验

Python+Flask+Gunicorn 项目实战(二) 从零开始，写一个Markdown解析器 —— 后端(预计完成: 12月17日)

Python+Flask+Gunicorn 项目实战(三) 从零开始，写一个Markdown解析器 —— 前端(预计完成: 12月20日)

对前端不感兴趣的朋友可以不看第三部分，因为第二部分已经提供了我们需要的前端代码。在本项目中，我们将通过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) 前后端分离：client是前端（比如我们看到的网页），server是后端(比如API接口)，而他们是前后端分离的。

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: --

这就代表我们成功运行起了这个应用，这时用浏览器打开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有一个基本的了解了。

下一章： Python+Flask+Gunicorn 项目实战(二) 从零开始，写一个Markdown解析器 —— 后端

在下一篇博文里，我会讲到更加具体的细节。如有疏漏、建议，还请大家指出。

本文为原创博文，请勿转载。