【复制粘贴即可运行】用Python制作一个读取并显示CSV数据的Web应用吧！
编程初学者必看！本文将用最详尽的方式，解释如何使用Python创建一个简单的Web应用程序，用于读取CSV文件并在Web浏览器上以表格形式显示其内容。无需专业知识。只需复制粘贴介绍的代码，你就能在自己的电脑上完成一个可运行的应用。请务必体验一下“成功运行了！”的感动。
前言：写这篇文章的我，几个月前也和大家一样
大家好！写这篇文章的我，在几个月前还是一个对编程一窍不通的纯粹初学者。每次遇到错误都会头疼不已，好几次都差点放弃，心想：“我也许不适合这个……”
但是，在以AI（人工智能）为伴、反复试错的过程中，我逐渐能够读懂代码了，不知不觉间，我在一个半月内独立上线了两个网站（buyonjapan.com, copicode.com）。
这篇文章的内容，正是我当时“要是能读到这样的文章就好了！”所期望的。我将从纯粹的初学者视角，结合当时遇到的难点和解决方法来撰写。我会尽量避免使用专业术语，即使使用也会进行通俗易懂的解释，所以请大家放心阅读。
第一步：准备应用开发（环境搭建）
首先，让我们从创建应用的准备工作开始吧。这就像做菜时的“准备食材和厨具”步骤。没什么难的，我们一步一步来确认。
1. 准备Python和Flask
这个应用是使用一种名为Python的编程语言和一个叫做Flask的工具（专业术语称为“Web框架”）来制作的。
Flask就像一个魔法盒子，能让你用Python极其简单地创建Web应用。首先，让我们在你的电脑上安装这个Flask吧。
请打开你电脑上的“终端”（Windows上是“命令提示符”或“PowerShell”），复制粘贴以下命令并执行。
pip install Flask※ 即使你不知道“pip是什么？”也没关系。只要记住它是一个随Python安装而来的、用于添加便利工具（库）的命令就可以了。
2. 准备工作文件夹和文件
接下来，我们要准备一个放置应用蓝图和材料的地方（文件夹）。请在你电脑上喜欢的位置，新建一个名为“csv_app”的文件夹。
然后，在那个“csv_app”文件夹里，创建以下3个文件。
- app.py: 决定应用主要行为的Python蓝图文件。
- data.csv: 包含你希望在浏览器中显示的数据的CSV文件。
- templates 文件夹
- 在这个文件夹里创建 index.html。这是一个创建浏览器页面外观的文件。
文件夹的结构会是这样：
csv_app/
├── app.py
├── data.csv
└── templates/
└── index.html【重要提示】请务必将HTML文件放入名为“templates”的文件夹中。这是Flask的一个规则，是告诉Flask“页面外观文件都在这里”的约定。如果名字不对会导致错误，请注意。
第二步：准备要显示的数据（data.csv）
接下来，我们来准备应用中要显示的CSV数据。请将以下内容复制粘贴到你刚才创建的 data.csv 文件中并保存。
这次，我们以一个简单的会员名册为例。
ID,姓名,邮箱,注册日期
1,张伟,zhang.wei@example.com,2024-05-01
2,王芳,wang.fang@example.com,2024-05-15
3,李娜,li.na@example.com,2024-06-03
4,刘洋,liu.yang@example.com,2024-06-21
5,陈静,chen.jing@example.com,2024-07-10需要注意的点：字符编码
保存文件时，推荐将字符编码设置为“UTF-8”。这就像是计算机理解文字的世界通用规则，设置成这个可以防止出现“乱码”（即文字显示为“???”）的现象。
我当新手的时候，也曾因为这个乱码问题苦恼了好几个小时……如果应用运行不正常并出现乱码，首先请怀疑这个CSV文件的字符编码。
第三步：用Python编写运行服务器的程序 (app.py)
终于到了主程序了！请将以下代码完整地复制粘贴到你的 app.py 文件中。每个部分的意思，我会在代码块后面详细解释。
# 导入必要的工具（库）
from flask import Flask, render_template
import csv
# 创建Flask应用的主体
app = Flask(__name__)
# 定义访问特定URL时的处理逻辑
@app.route('/')
def index():
# 准备打开并读取CSV文件
# 指定 encoding='utf-8' 来防止乱码
with open('data.csv', 'r', encoding='utf-8') as file:
# 使用csv模块的reader来读取逗号分隔的数据
csv_reader = csv.reader(file)
# 先读取第一行（表头）
header = next(csv_reader)
# 将剩余的数据行读取为列表
data = [row for row in csv_reader]
# 将数据传递给HTML并生成页面
return render_template('index.html', header=header, data=data)
# 如果这个文件被直接执行，则启动Web服务器
if __name__ == '__main__':
# 设置 debug=True 很方便，因为修改代码后服务器会自动重启
app.run(debug=True)
代码解说（超简略版）
from flask import ...,import csv
这是为了能够使用名为“Flask”和“csv”的便利工具箱而念的咒语。app = Flask(__name__)
正在创建Flask应用的主体。这也是固定的写法，现在只要知道“这么写就行”即可。@app.route('/')
这是一张指令单，意思是“如果网站首页（'/'）被访问，就立即执行下面的函数（index()）”。def index():
这是访问首页时实际执行的处理内容。with open(...): 正在打开CSV文件。encoding='utf-8'是防止乱码的重要环节。使用with很方便，因为它会在处理结束后自动关闭文件。csv.reader(file): 这是一个功能，它会读取打开的CSV文件，并按逗号进行分割，使Python更容易处理。header = next(csv_reader): 提取CSV文件的第一行（ID, 姓名, ...）作为“表头”。data = [row for row in csv_reader]: 提取所有剩余的数据行，并存入名为“data”的列表（数据集合）中。
return render_template(...)
这是最关键的部分。它向Flask下达命令：“请使用名为index.html的外观文件来创建网页！同时，把刚才读取的header和data信息也一并传过去，拜托了！”if __name__ == '__main__': ...
这是当这个Python文件被直接执行时，用于启动开发Web服务器的固定说法。
一开始可能看起来像一堆咒语，但只要理解了“读取文件”和“传递给HTML”这个简单的流程就没问题了！
第四步：创建显示数据的外观（HTML） (templates/index.html)
接下来，我们来创建一个HTML文件，它将作为显示从Python传递过来的数据的“容器”。请将以下代码复制粘贴到你templates文件夹中的index.html文件里。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV数据显示应用</title>
<!-- 适用于暗黑模式的简单样式 -->
<style>
body {
background-color: #202124;
color: #e8eaed;
font-family: sans-serif;
padding: 2rem;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
border: 1px solid #5f6368;
padding: 12px;
text-align: left;
}
th {
background-color: #3c4043;
color: #e8eaed;
}
</style>
</head>
<body>
<h1 style="color: #669df6;">CSV数据列表</h1>
<!-- 如果数据存在则显示表格 -->
{% if data %}
<table>
<thead>
<tr>
<!-- 显示从Python传递过来的表头 -->
{% for col in header %}
<th>{{ col }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
<!-- 逐行显示从Python传递过来的数据 -->
{% for row in data %}
<tr>
{% for cell in row %}
<td>{{ cell }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>没有可显示的数据。</p>
{% endif %}
</body>
</html>HTML中的特殊符号 {% ... %} 和 {{ ... }}
你可能注意到这个HTML代码里有一些不常见的符号，比如 {% ... %} 和 {{ ... }}。这是Flask使用的模板引擎Jinja2的写法。
{% for ... %} ... {% endfor %}
作用和Python的“for循环（重复）”一样。意思是“根据从Python传递过来的数据数量，重复中间的HTML”。通过这个，如果数据有5行，就能自动生成5行表格；如果有一百行，就能生成一百行。{{ ... }}
这是用于在那个位置显示从Python传递过来的变量“内容”的标记。{{ col }}显示表头的列名，{{ cell }}显示各个数据单元格的内容。
像这样将Python（数据处理）和HTML（外观）分离，可以使管理变得更容易，也更容易制作更复杂的应用。这是使用像Flask这样的框架的一大优点。
第五步：来运行应用吧！
好了，所有准备工作都完成了！终于到了运行应用的时候了。
请再次打开终端（命令提示符），使用cd命令移动到你刚才创建的“csv_app”文件夹。
然后，执行以下命令：
python app.py执行命令后，终端里应该会显示类似下面的消息：
* Serving Flask app 'app'
* Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on http://127.0.0.1:5000
Press CTRL+C to quit
* Restarting with stat
* Debugger is active!
* Debugger PIN: ...如果出现了“Running on http://127.0.0.1:5000”的提示，就表示成功了！你的电脑里，Web服务器已经开始运行了。
请打开Web浏览器（如Google Chrome等），在地址栏里复制粘贴以下URL并访问。
怎么样？浏览器里应该已经漂亮地用表格显示出了data.csv的内容吧！这就是你用Python制作的Web应用程序。恭喜你！🎉
【进阶篇】用Pandas让事情变得更简单！
现在的方法已经足够好了，但Python有一个在数据分析方面非常强大的库，叫做Pandas。使用它，CSV的读取和到HTML的转换会变得更加简单。
有兴趣的朋友，请务必也来试试这个。
1. 安装Pandas
首先安装Pandas。请在终端里（先用Ctrl+C停止服务器）执行。
pip install pandas2. 修改 app.py
将app.py修改如下。你会发现读取CSV的部分变得惊人地短了吧？
from flask import Flask, render_template
import pandas as pd # 将pandas导入为pd
app = Flask(__name__)
@app.route('/')
def index():
# 使用Pandas读取CSV文件（只需一行！）
df = pd.read_csv('data.csv', encoding='utf-8')
# 将DataFrame转换为HTML的table标签（这也只需一行！）
# 可以用classes属性指定CSS类，或用border=0消除边框等
html_table = df.to_html(classes='data-table', index=False, border=0)
# 将表格数据传递给HTML来生成页面
return render_template('index_pandas.html', table=html_table)
if __name__ == '__main__':
app.run(debug=True)
3. 创建 index_pandas.html
Pandas会帮你把整个表格的HTML都做好，所以HTML这边也会变得很简单。请在templates文件夹里新建一个名为index_pandas.html的文件，并粘贴以下内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV数据显示应用 (Pandas版)</title>
<style>
body {
background-color: #202124;
color: #e8eaed;
font-family: sans-serif;
padding: 2rem;
}
/* 为to_html中指定的类名应用样式 */
.data-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
.data-table th, .data-table td {
border: 1px solid #5f6368;
padding: 12px;
text-align: left;
}
.data-table thead th { /* 表头行的样式 */
background-color: #3c4043;
color: #e8eaed;
}
</style>
</head>
<body>
<h1 style="color: #669df6;">CSV数据列表 (Pandas版)</h1>
<!-- 直接显示从Python(Pandas)传递过来的HTML表格 -->
{{ table|safe }}
</body>
</html>重点是 {{ table|safe }} 这个部分。因为Pandas创建的HTML代码里包含了 <table> 等标签，所以需要加上 |safe 这个过滤器来告诉Flask“这是安全的HTML，请直接显示它”。
再次执行 python app.py 并访问，应该会显示出同样的表格。代码变得清爽了，也为你打开了通往更高级数据操作的大门！
总结：一个小的“成功了！”是迈向下一步的一大步
这次，我们使用Python和Flask创建了一个在浏览器中显示CSV数据的简单Web应用。你体验到“复制粘贴即可运行”的乐趣了吗？
学习编程就像一场宏大的登山。如果一开始就想直达顶峰，会因为路途的险峻而灰心丧气。但是，如果一个个地完成小目标，比如“先到山脚的营地看看”“下一步到那个视野开阔的山丘”，就能踏踏实实地接近顶峰。
如果你通过本文体验到的“用自己写的（粘贴的）代码让Web应用跑起来了！”这个小小的成功体验，能成为你迈出下一步的巨大自信，那将是我最高兴的事。
从这里开始，请尝试进行各种改造，比如“增加搜索功能”、“让数据可以编辑”等等。遇到错误也不要紧，那也是学习的一部分。请一边向AI请教，一边用错误信息进行搜索，尽情享受打造属于自己的应用的乐趣吧。
附赠：完整可运行的HTML源代码（浏览器显示结果）
作为参考，下面展示了运行我们这次创建的第一个应用（标准库版）时，Web浏览器上实际生成的HTML源代码。这有助于你理解Python程序是如何根据CSV文件的内容，动态生成这样的HTML的。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV数据显示应用</title>
<!-- 适用于暗黑模式的简单样式 -->
<style>
body {
background-color: #202124;
color: #e8eaed;
font-family: sans-serif;
padding: 2rem;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
border: 1px solid #5f6368;
padding: 12px;
text-align: left;
}
th {
background-color: #3c4043;
color: #e8eaed;
}
</style>
</head>
<body>
<h1 style="color: #669df6;">CSV数据列表</h1>
<!-- 如果数据存在则显示表格 -->
<table>
<thead>
<tr>
<!-- 显示从Python传递过来的表头 -->
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>注册日期</th>
</tr>
</thead>
<tbody>
<!-- 逐行显示从Python传递过来的数据 -->
<tr>
<td>1</td>
<td>张伟</td>
<td>zhang.wei@example.com</td>
<td>2024-05-01</td>
</tr>
<tr>
<td>2</td>
<td>王芳</td>
<td>wang.fang@example.com</td>
<td>2024-05-15</td>
</tr>
<tr>
<td>3</td>
<td>李娜</td>
<td>li.na@example.com</td>
<td>2024-06-03</td>
</tr>
<tr>
<td>4</td>
<td>刘洋</td>
<td>liu.yang@example.com</td>
<td>2024-06-21</td>
</tr>
<tr>
<td>5</td>
<td>陈静</td>
<td>chen.jing@example.com</td>
<td>2024-07-10</td>
</tr>
</tbody>
</table>
</body>
</html>