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

2018-10-12  本文已影响0人  惊鸿指尖

前段时间学了一下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)


先写到这里,改天继续更新,晚安啦 :)

上一篇下一篇

猜你喜欢

热点阅读