Python 开发一个简单演示网站：用 Flask 把脚本能力扩展成 Web 应用

很多 Python 编程人员一开始主要用 Python 写脚本，例如处理 Excel、爬取数据、批量改文件、调用模型、做数据分析。脚本当然很有用，但如果想把这些能力交给别人使用，命令行就不够友好了。

这时可以把 Python 程序做成一个简单网站：

用户在网页上输入参数。
Python 在后端处理数据。
页面展示结果。
也可以对外提供 JSON API，方便其他系统调用。

这篇文章面向已经会一点 Python 的开发者，用 Flask 做一个简单的演示网站。示例不追求复杂架构，而是让你快速理解 Python Web 开发的基本流程。

一、为什么 Python 开发者应该了解 Web 应用

Python 不只是脚本语言，它也适合做很多 Web 场景：

内部工具平台，例如数据查询、报表生成、文件处理。
算法演示网站，例如图像识别、文本分析、推荐结果展示。
小型管理后台，例如任务管理、设备监控、日志查看。
API 服务，例如给前端、移动端、其他业务系统提供接口。
原型系统，例如快速验证一个产品想法。

如果你已经会 Python 函数、字典、列表、文件读写，那么学习一个轻量级 Web 框架并不难。

本文使用 Flask，因为它简单、直观、适合新手入门。

二、最终效果

我们要做一个"文本分析演示网站"。

用户在网页中输入一段文字，点击按钮后，后端 Python 会统计：

字符数
单词数
行数
数字个数
是否包含 Python 关键词

同时网站还提供一个 JSON API：

text 复制代码

POST /api/analyze

这样既能给浏览器页面使用，也能给其他程序调用。

三、创建项目目录

新建一个目录：

text 复制代码

python_demo_site/
  app.py
  requirements.txt
  templates/
    index.html
  static/
    style.css

其中：

app.py：Flask 后端主程序。
requirements.txt：项目依赖。
templates/index.html：网页模板。
static/style.css：页面样式。

四、安装 Flask

建议先创建虚拟环境：

bat 复制代码

python -m venv .venv
.venv\Scripts\activate

安装依赖：

bat 复制代码

pip install flask

写入 requirements.txt：

text 复制代码

Flask==3.0.3

以后在新环境中可以直接执行：

bat 复制代码

pip install -r requirements.txt

五、编写后端代码

创建 app.py：

python 复制代码

from flask import Flask, jsonify, render_template, request


app = Flask(__name__)


def analyze_text(text: str) -> dict:
    """分析输入文本，并返回统计结果。"""
    lines = text.splitlines()
    words = text.split()
    digit_count = sum(1 for char in text if char.isdigit())

    return {
        "char_count": len(text),
        "word_count": len(words),
        "line_count": len(lines) if text else 0,
        "digit_count": digit_count,
        "has_python": "python" in text.lower(),
    }


@app.route("/", methods=["GET", "POST"])
def index():
    result = None
    input_text = ""

    if request.method == "POST":
        input_text = request.form.get("text", "")
        result = analyze_text(input_text)

    return render_template("index.html", result=result, input_text=input_text)


@app.post("/api/analyze")
def analyze_api():
    data = request.get_json(silent=True) or {}
    text = data.get("text", "")

    if not isinstance(text, str):
        return jsonify({"error": "text must be a string"}), 400

    return jsonify({
        "ok": True,
        "data": analyze_text(text),
    })


if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5000, debug=True)

这段代码有三个核心部分：

analyze_text() 是普通 Python 函数，负责实际业务逻辑。
@app.route("/") 负责网页访问。
@app.post("/api/analyze") 负责 JSON API 调用。

这也是写 Web 应用时很推荐的思路：业务逻辑和 Web 接口分开写。这样以后即使把页面换成 Vue、React、小程序，核心 Python 逻辑也不用重写。

六、编写 HTML 页面

创建 templates/index.html：

html 复制代码

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Python 文本分析演示网站</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <main class="page">
        <section class="hero">
            <p class="eyebrow">Python Web Demo</p>
            <h1>把 Python 脚本变成一个可访问的网站</h1>
            <p class="intro">
                输入一段文本，后端 Flask 会调用 Python 函数完成统计分析，并把结果返回到页面。
            </p>
        </section>

        <section class="workspace">
            <form method="post" class="panel">
                <label for="text">输入文本</label>
                <textarea id="text" name="text" rows="10" placeholder="例如：Python can build websites in 2026.">{{ input_text }}</textarea>
                <button type="submit">开始分析</button>
            </form>

            <div class="panel result">
                <h2>分析结果</h2>

                {% if result %}
                    <dl class="stats">
                        <div>
                            <dt>字符数</dt>
                            <dd>{{ result.char_count }}</dd>
                        </div>
                        <div>
                            <dt>单词数</dt>
                            <dd>{{ result.word_count }}</dd>
                        </div>
                        <div>
                            <dt>行数</dt>
                            <dd>{{ result.line_count }}</dd>
                        </div>
                        <div>
                            <dt>数字个数</dt>
                            <dd>{{ result.digit_count }}</dd>
                        </div>
                        <div>
                            <dt>包含 Python</dt>
                            <dd>{{ "是" if result.has_python else "否" }}</dd>
                        </div>
                    </dl>
                {% else %}
                    <p class="empty">提交文本后，这里会显示 Python 后端计算出的结果。</p>
                {% endif %}
            </div>
        </section>
    </main>
</body>
</html>

Flask 默认会从 templates 目录中查找 HTML 模板。

这里用到的模板语法有两类：

html 复制代码

{{ input_text }}

表示输出变量。

html 复制代码

{% if result %}
    ...
{% endif %}

表示条件判断。

这套模板语法来自 Jinja2，是 Flask 默认使用的模板引擎。

七、编写 CSS 样式

创建 static/style.css：

css 复制代码

:root {
    --bg: #f5f7fb;
    --text: #18212f;
    --muted: #5f6f89;
    --line: #d8dfeb;
    --accent: #16835f;
    --accent-dark: #0f684b;
    --panel: #ffffff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    color: var(--text);
    background: var(--bg);
}

.page {
    width: min(1080px, calc(100% - 32px));
    margin: 0 auto;
    padding: 48px 0;
}

.hero {
    margin-bottom: 28px;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    font-weight: 700;
}

h1 {
    margin: 0;
    font-size: 36px;
    line-height: 1.2;
}

.intro {
    max-width: 720px;
    color: var(--muted);
    line-height: 1.8;
}

.workspace {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
}

textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    font: inherit;
    line-height: 1.6;
}

button {
    margin-top: 14px;
    border: 0;
    border-radius: 8px;
    padding: 12px 18px;
    color: #ffffff;
    background: var(--accent);
    font-weight: 700;
    cursor: pointer;
}

button:hover {
    background: var(--accent-dark);
}

.result h2 {
    margin-top: 0;
}

.stats {
    display: grid;
    gap: 12px;
    margin: 0;
}

.stats div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

dt {
    color: var(--muted);
}

dd {
    margin: 0;
    font-weight: 700;
}

.empty {
    color: var(--muted);
    line-height: 1.8;
}

@media (max-width: 760px) {
    .page {
        padding-top: 28px;
    }

    h1 {
        font-size: 28px;
    }

    .workspace {
        grid-template-columns: 1fr;
    }
}

这份 CSS 只做基础布局，没有引入前端框架。对于 Python 开发者来说，先掌握后端请求处理和模板渲染，比一开始就引入复杂前端工程更重要。

八、运行网站

进入项目目录后执行：

bat 复制代码

python app.py

看到类似输出：

text 复制代码

* Running on http://127.0.0.1:5000

打开浏览器访问：

text 复制代码

http://127.0.0.1:5000

输入文本并提交，就能看到分析结果。

九、测试 JSON API

除了网页表单，我们还提供了 API 接口。

使用 PowerShell 测试：

powershell 复制代码

$body = @{
    text = "Python can build web apps in 2026."
} | ConvertTo-Json

Invoke-RestMethod `
    -Uri "http://127.0.0.1:5000/api/analyze" `
    -Method Post `
    -Body $body `
    -ContentType "application/json"

返回结果类似：

json 复制代码

{
  "ok": true,
  "data": {
    "char_count": 35,
    "word_count": 7,
    "line_count": 1,
    "digit_count": 4,
    "has_python": true
  }
}

也可以用 Python 自己调用这个接口：

python 复制代码

import requests


response = requests.post(
    "http://127.0.0.1:5000/api/analyze",
    json={"text": "Python web demo 2026"},
    timeout=10,
)

print(response.json())

如果要运行上面的测试代码，需要安装：

bat 复制代码

pip install requests

十、代码背后的 Web 基础概念

1. 路由

路由就是 URL 和 Python 函数之间的对应关系。

python 复制代码

@app.route("/")
def index():
    return render_template("index.html")

当用户访问 / 时，Flask 会执行 index() 函数。

2. 请求方法

常见请求方法：

GET：获取页面或数据。
POST：提交表单或 JSON 数据。

本文中的首页同时支持 GET 和 POST：

python 复制代码

@app.route("/", methods=["GET", "POST"])

第一次打开页面是 GET，点击提交按钮后是 POST。

3. 表单数据

HTML 表单提交后，Flask 可以通过 request.form 获取字段：

python 复制代码

input_text = request.form.get("text", "")

其中 "text" 对应页面里的：

html 复制代码

<textarea name="text"></textarea>

4. JSON 数据

API 接口中，Flask 可以通过 request.get_json() 获取 JSON：

python 复制代码

data = request.get_json(silent=True) or {}
text = data.get("text", "")

返回 JSON 时使用：

python 复制代码

return jsonify({"ok": True})

5. 模板渲染

后端把变量传给 HTML：

python 复制代码

return render_template("index.html", result=result, input_text=input_text)

页面中再使用：

html 复制代码

{{ result.char_count }}

这就是服务端渲染。对于内部工具、小型演示系统、管理后台来说，这种方式简单直接。

十一、如何把自己的 Python 脚本改造成网站

假设你原来有一个脚本函数：

python 复制代码

def process_excel(file_path: str) -> dict:
    # 读取 Excel，统计数据，生成结果
    return {"row_count": 100, "status": "ok"}

改造成网站时，不要把所有逻辑都写进路由函数。更推荐这样拆：

python 复制代码

def process_excel(file_path: str) -> dict:
    return {"row_count": 100, "status": "ok"}


@app.post("/api/process-excel")
def process_excel_api():
    data = request.get_json(silent=True) or {}
    file_path = data.get("file_path", "")
    result = process_excel(file_path)
    return jsonify(result)

这样你的原始 Python 能力仍然是一个普通函数，只是外面多包了一层 Web 接口。

常见脚本改网站的方向：

文件处理脚本：加上传页面，用户上传文件，后端处理后下载结果。
数据分析脚本：加查询条件，页面展示图表和表格。
爬虫脚本：加任务按钮，页面展示抓取进度。
AI 模型脚本：加输入框和图片上传，页面展示推理结果。
自动化脚本：加后台任务队列，页面查看执行日志。

十二、开发时需要注意的问题

1. 不要把生产环境密钥写进代码

例如数据库密码、API Token，不要直接写在 app.py 中。可以使用环境变量：

python 复制代码

import os

api_key = os.environ.get("API_KEY")

2. 不要在生产环境开启 `debug=True`

本文为了方便学习使用：

python 复制代码

app.run(debug=True)

正式部署时不要开启 debug 模式。

3. 接口输入要校验

示例中我们检查了 text 是否为字符串：

python 复制代码

if not isinstance(text, str):
    return jsonify({"error": "text must be a string"}), 400

实际项目中还要检查长度、格式、权限等。

4. 耗时任务不要直接阻塞请求

如果一个任务要运行几十秒甚至几分钟，例如模型推理、批量处理文件、爬取大量网页，不建议直接在请求里同步执行。

可以考虑：

Celery
RQ
APScheduler
后台线程或进程
任务表加轮询接口

入门阶段可以先写同步版本，业务变复杂后再拆后台任务。

十三、下一步可以学习什么

掌握这个简单网站后，可以继续学习：

Flask 蓝图：把路由拆到多个文件。
数据库：使用 SQLite、MySQL、PostgreSQL 保存数据。
ORM：使用 SQLAlchemy 操作数据库。
登录权限：给内部工具加账号体系。
文件上传：处理 Excel、图片、PDF。
图表展示：使用 ECharts 或 Chart.js 展示分析结果。
部署上线：使用 Gunicorn、Waitress、Nginx、Docker。
FastAPI：构建类型提示更强的 API 服务。

Flask 适合小型网站、内部工具、演示系统；FastAPI 更适合 API 服务；Django 更适合功能完整的后台系统。没有绝对最好，只有适合当前项目的选择。

总结

Python 开发者不必把自己限制在脚本和命令行里。通过 Flask 这样的轻量级 Web 框架，可以很容易把一个 Python 函数变成网页功能或 API 服务。

本文示例虽然简单，但已经包含了 Web 应用的核心流程：

定义业务函数。
编写路由。
接收表单和 JSON。
渲染 HTML 页面。
返回 API 数据。
用 CSS 做基础界面。

当你能把一个小脚本包装成网站时，Python 的应用场景会明显变宽：它不只是自己用的自动化工具，也可以变成团队可访问、业务可集成、用户可操作的 Web 应用。

Python 开发一个简单演示网站：用 Flask 把脚本能力扩展成 Web 应用