如何用Flask快速搭建网站 - 新手篇

前段时间学了一下Flask搭建轻型的博客类型的网站，总体感觉上Flask是一个“麻雀虽小，五脏俱全”的搭建工具。这篇文章主要介绍一下新手如何用Flask快速搭建一个网站。

1. 基本知识

在搭建网站之前，如果读者对Web, html, javascript, css等基本知识不大了解的话，可以去百度或者谷歌了解一下，针对性的可以了解如下概念：request(post&get), html基本架构, javascript如何实现数据解析和可视化, css的基本知识等。
在用Flask之前，小白可以阅读下面这段话，可以帮助你梳理这些基本知识之间的关联。有一定基础的读者可以跳过。简要的说，一般网站的架构有三部分：database+server+website，数据库负责数据保存，服务器负责关联数据库、对数据库进行数据管理、存取，对来自前端website的请求进行处理，前端主要负责与用户、服务器交互等功能。Flask可以帮助用户搭建server，很好的通过Jinja兼容website的同时，由于它具备Python的全部优点，可以很方便的与数据库交互、嵌入各种类型的Python脚本，例如数据处理、机器学习等功能。

2. 进阶知识

当你有了这些基础的一些概念之后，相信你已经非常迫切地想要自己动手用Flask搭一个网站啦！在此之前，你还需要具备一些“进阶”知识，包括Python的基本知识，Flask的基本结构，Jinja的基本使用，了解现有的流行的javascript库（例如，目前在数据可视化方面用的比较多的js库有HighCharts, ZingCharts, D3以及百度开发的库等），当然，这些知识可以通过您在搭建过程中有针对性地进行学习，这样的话效率更高，但是最起码要求是“你需要有这个东西，并且它可以有这样的一个工具可以实现”，这也是了解基础知识和进阶知识的底线了，后面就可以更快的上手和进行实现了。

3. 开发步骤

在讲这一部分之前，需要说明的是，比起针对性很强地介绍开发确定需求和功能的网站，本篇更希望可以通过“大而化之”的介绍，给初学者提供一个比较好的学习方法和方向，因为作者也是从完全不懂到一步一步搭建网站的，所以希望能通过抛砖引玉的方式，降低小白们走弯路的可能性。
接下来，我按照自己当时学习的过程进行开发步骤的讲解，希望可以帮到大家。

a. 网站的目标、功能、以及针对人群的确定

在开发之前，务必要有一个构想，包括其一目标：网站的目标是什么？是做一个博客写写文章，还是做产品展示的界面，亦或是一个交流论坛，目标决定一切，当你目标清楚了，你才可能一步一步找出自己的路线；其二功能：这个网站在你的目标下，它可以做到什么样的程度，比如用来展示你的文章的博客，你需要它只是展示一下呢，还是可以和读者进行互动的，那么互动又分很多类型，是在线评论，逐字逐句评论，还是发邮件评论等等，这一部分并不一定要非常确定，在实现的过程中，可能会发生改变；其三针对人群的确定，针对人群决定你的展示形式，交互形式等等。

b. 做网站，从找一个自己喜欢的模板开始

作为小白的我在有了以上知识后，看了看Flask官网的教程，并不是很喜欢它的描述顺序。对于每天都要浏览很多网页的我们，最感性的认识也是从前端开始的，所以我选择先挑一个自己喜欢的模板开始一步一步做。模板网上有很多地方都可以找到。有了模板之后，我们就要用到Jinja了。我挑出了网站的统一风格——header和footer，然后用block body作为具体每个网页不同的内容部分，也就是说，具体的网页会自动继承模板共有的部分，然后结合block body部分构成最终的网页。这就大大方便了我们组织很多网页：相同的部分就拿出来，不同的部分挖掉写一个模板html，然后单独不同的部分写很多html，修改或者替换起来是不是很方便？

模板部分：

<!DOCTYPE html>
<!-- This is header-->
<!-- Common field-->
<!-- Body block start -->
{% block body %}
{% endblock %}
<!-- Body block end-->
<!-- This is footer-->

具体的网页：

<!DOCTYPE html>
<!-- You don't need to write the header here-->
<!-- Body block start -->
{% block body %}
<!-- Place body here-->
{% endblock %}
<!-- Body block end-->
<!-- You don't need to write the footer here-->

c. 让网页“活”起来 —— 与Flask交互

只有这个好看的“壳子”——前端网页可远远不够，那我们就用Flask让它“活”起来。

(1) Flask如何访问一个网页

这里需要读者参考官网学习route的使用，下面案例可以参考，当网站server运行时，server:/和server:/intro都会执行intro()函数，并且返回打开网页intro.html。

app = Flask(__name__)
 # Basic part of the html
@app.route('/')
@app.route('/intro')
def intro():
    return render_template('intro.html')

(2) Flask处理来自html的请求

打开了网页，很棒！那如何处理来自html的请求呢？比如

i. 接收来自网页的数据文件并保存

这里就要用到Post的方法了，在网页里的一个上传文件的表单将会指向server:/uploader，一旦提交文件，那么函数upload_file就会被触发，然后通过request.file['file_id']以及save就可以保存该文件到server所在的目录。

@app.route('/uploader', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        f =request.files['file']
        f.save(secure_filename(f.filename))
        return render_template('data.html', name=f.filename)

html 上传文件的部分:

<form action = "uploader" method = "POST" enctype = "multipart/form-data">
<input type = "file" name = "file"/>
<input type = "submit" value="Submit"/>
</form>

ii. 接收来自网页的数据文件，进行处理，并发送到前端/javascript

收到文件并保存后，读取并进行处理后，以json的格式发送给data.html。是不是很简单。当然，前端可以通过javascipt对数据文件进行解析和进行其他操作等等。

# Upload file from data.html and send data as json to webpages
@app.route('/uploader', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        f =request.files['file']
        f.save(secure_filename(f.filename))
        # Read the data file
        df = pd.read_csv(f.filename)
        # Processing
        # Sent the data as a json file
        chart_data = json.dumps(df)
        data = {'chart_data': chart_data}
        return render_template('data.html', name=f.filename, data=data)

先写到这里，改天继续更新，晚安啦：）