5天学会Python丨Day 4丨让项目上线!用Flask构建你的第一个Web应用

欢迎来到 “5天学会Python” 实战营第四天!

在过去的几天里,我们从互联网上抓取了数据(Day 2),并用图表揭示了数据背后的故事(Day 3)。但到目前为止,所有的成果都还静静地躺在你的电脑里。如何让你的朋友、同事,甚至全世界的人都能看到你的作品?

今天,我们将开启的Web开发大门!我们将学习使用Python最流行、最轻量级的Web框架 Flask,亲手搭建一个简约的网站服务器。最终,我们会将分析好的数据和图表“部署”到网页上,让任何人都能通过浏览器访问!

今日目标:

  1. 理解Web框架: 了解 Flask 是什么,以及它为什么能让Web开发变得简单。
  2. 掌握Flask核心概念: 学会路由、视图函数、模板渲染和静态文件处理。
  3. 项目结构规范: 学习 Flask 项目的标准文件夹结构 (templates, static)。
  4. 数据与Web融合: 将 pandas 处理的数据表格和 matplotlib 生成的图表展示在网页上。
  5. 上线你的应用: 在本地运行你的第一个Web应用服务器。
    准备好,让你的项目拥有一个真正的URL吧!

Step 1: Flask初体验与项目搭建

什么是Flask?

Flask 是一个用 Python 编写的轻量级 Web 应用框架,用于快速构建 web 服务、接口(API)或网页应用。

Flask 的主要特点
  • 轻量灵活:核心非常小,仅包含最基本的功能,便于定制。
  • 易上手:非常适合入门 Web 开发,几行代码就能跑起一个服务器。
  • 可扩展性强:可以根据需要添加插件(如数据库 ORM、认证、表单处理等)。
  • 适合构建 RESTful API:广泛用于机器学习模型部署、前后端分离接口开发等。
1.1 安装Flask

一如既往,我们使用 pip 来安装:

pip install Flask
1.2 搭建标准项目结构

专业的Flask项目都有一个约定俗成的结构。在你的项目文件夹(例如 python-day4)中,创建以下文件和目录:

/douban_webapp/
|-- app.py                # 我们的Flask应用主文件
|-- douban_top250_movies.csv # 第三天的数据,放在这里
|-- static/                 # 存放“静态”文件(图片, CSS, JavaScript)
|   |-- bar_chart.png
|   |-- histogram.png
|-- templates/              # 存放“模板”文件(HTML)
    |-- index.html
1.3 编写最简单的Flask应用

让我们先来一个 “Hello, Web World!”,以确保环境正常。在 app.py 中写入:

from flask import Flask

# 创建一个Flask应用实例
app = Flask(__name__)

# 定义一个“路由”(route),告诉Flask哪个URL应该触发哪个函数
# '/' 表示网站的根目录(例如 http://127.0.0.1:5000/)
# IP 地址:127.0.0.1(即本机)
# 5000 是 Flask 默认使用的端口号。
@app.route('/')
def hello_world():
    """这个函数被称为“视图函数”(view function)"""
    return '

Hello, Web World!

'
# 确保当脚本被直接执行时,才运行Web服务器 if __name__ == '__main__': # app.run() 启动服务器 # debug=True 表示开启“调试模式”,当代码有改动时服务器会自动重启,并提供详细的错误信息 app.run(debug=True)

运行它! 在终端中执行 python app.py。你会看到类似下面的输出:

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

在浏览器中打开 http://127.0.0.1:5000/,你就能看到你的第一行网页代码了!


**Step 2: 准备数据

Web应用无法像桌面程序一样用 plt.show() 弹出一个窗口。我们需要将图表保存为图片文件,然后像展示普通图片一样在网页上展示它们。

  1. 找到你第三天的可视化代码 (day3_visualizer.py)。
  2. 将所有的 plt.show() 命令替换为 plt.savefig()
  3. 关键:确保保存路径指向我们新创建的 static 文件夹。

修改后的保存代码片段如下:

# ... (在 day3_visualizer.py 或一个新脚本中) ...

# ... (绘制柱状图的代码) ...
plt.tight_layout()
# 将图表保存到static文件夹,而不是显示它
plt.savefig('static/bar_chart.png')
# plt.show() # 注释掉或删除这行

# ... (绘制直方图的代码) ...
# 将图表保存到static文件夹
plt.savefig('static/histogram.png')
# plt.show() # 注释掉或删除这行

运行这个修改后的脚本,确保 static 文件夹下已经生成了两张 .png 图表图片。


Step 3: 后端逻辑 - 用Python处理数据并传递给前端

现在,我们要让 app.py 变得更强大。它需要读取CSV数据,并准备好将数据传给HTML模板。

修改 app.py 如下:

from flask import Flask, render_template
import pandas as pd

app = Flask(__name__)

@app.route('/')
def index():
    # 1. 使用pandas读取我们的电影数据
    df = pd.read_csv('douban_top250_movies.csv')
    
    # 2. 将整个DataFrame转换为HTML表格字符串
    #    - classes: 为表格添加CSS类,方便后续美化(我们后面会用Bootstrap)
    #    - index=False: 不显示DataFrame的索引列
    movie_table = df.to_html(classes='table table-striped table-hover', index=False)
    
    # 3. 渲染模板,并传递数据
    #    - 'index.html': 我们要渲染的HTML文件名
    #    - movie_table=movie_table: 将Python中的变量movie_table传递给HTML,
    #      在HTML中它也叫'movie_table'
    return render_template('index.html', movie_table=movie_table)

if __name__ == '__main__':
    app.run(debug=True)

解析:

  • from flask import render_template: render_template是Flask的魔法函数,它会自动在templates文件夹里寻找指定的HTML文件,并能把Python变量“注入”进去。

  • df.to_html(...): Pandas的这个神奇方法能一键将你的数据表变成一个标准的HTML

    代码字符串。这是连接数据分析和Web展示的完美桥梁!

  • return render_template('index.html', ...): 这是Flask的核心。我们不再是简单地返回一个字符串,而是渲染一个完整的HTML文件,并把包含电影表格的HTML代码作为参数 movie_table 传给了它。


  • Step 4: 前端呈现 - 编写HTML模板

    现在,轮到 templates/index.html 文件了。它负责展示我们从后端传递过来的所有内容。

    templates/index.html 中写入:

    
    
    
        
        
        豆瓣电影Top250数据看板
        
        
    
    
        

    豆瓣电影Top250数据看板


    Top 15 电影评分

    Top 15电影评分柱状图

    电影评分分布

    电影评分分布直方图

    完整数据列表

    {{ movie_table | safe }}

    解析:

    • Bootstrap CDN: 我们在 中链接了一个外部的CSS库Bootstrap。它提供了大量预设样式(如class="container"table),让我们的页面瞬间变得美观,而无需手写大量CSS。

    • {{ url_for('static', filename='...') }}: 这是在模板中引用static文件夹下文件的标准、安全的方式。Flask会自动生成正确的URL,无论你的应用部署在哪里。

    • {{ movie_table | safe }}: 这是今天最重要的模板语法。默认情况下,为了安全,模板引擎会“转义”所有变量中的HTML标签(例如<会变成<)。但因为我们知道movie_table本身就是我们生成的安全HTML,所以我们使用| safe过滤器来“信任”它,让浏览器正确地渲染出表格。


    **Step 5: 上线

    一切就绪!

    1. 确保你的终端还在运行 python app.py (如果已停止,请重新运行)。

    2. 再次访问 http://127.0.0.1:5000/

    这一次,你看到的将不再是简单的 “Hello World”,而是一个功能完整、图文并茂的数据看板网页!你可以滚动查看完整的电影表格。

    现在,你已经成为一名初级全栈开发者!


    Day 4 总结

    今天,你跨越了从本地脚本到网络应用的关键一步,你的项目第一次拥有了可被访问的界面。

    今日核心技能清单:

    • Web框架基础: 理解了Flask作为Web开发工具包的核心思想。
    • Flask项目结构: 掌握了 templatesstatic 文件夹的用途。
    • 路由与视图: 学会了用 @app.route() 链接URL和Python函数。
    • 模板渲染: 掌握了 render_template 函数,以及如何在Python和HTML之间传递数据。
    • Jinja2模板语法: 学会了使用 {{ ... }} 插入变量,| safe 过滤器,以及 url_for() 动态生成URL。
    • 前后端分离思想: 初步理解了后端(app.py)负责逻辑和数据,前端(index.html)负责展示的开发模式。

    明日预告

    我们已经有了一个展示网站。但现代应用的核心是数据的交互与服务化。如何让你的数据成果被其他程序(比如未来的手机App、小程序,或者其他网站)所调用?

    明天,作为我们系列的终极挑战,我们将把这个Flask应用改造成一个真正的API(应用程序接口)!你将学会如何用Python提供行业标准的JSON格式数据,让你的项目从一个独立的网站,变身为一个可以为其他应用赋能的数据服务中心。

    这是成为一名现代开发者的最后一跃,我们明天见!

    你可能感兴趣的:(5天学会Python丨Day 4丨让项目上线!用Flask构建你的第一个Web应用)