美文网首页
如何用Flask快速搭建网站 - 新手篇

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

作者: 惊鸿指尖 | 来源:发表于2018-10-12 00:25 被阅读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)
    


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

    相关文章

      网友评论

          本文标题:如何用Flask快速搭建网站 - 新手篇

          本文链接:https://www.haomeiwen.com/subject/lrqbaftx.html