本文介绍使用 flask 框架将 python 后端计算或爬取的数据（如 google 搜索结果）安全、高效地渲染到 html 页面中，包含路由定义、模板渲染和基础结构示例。
本文介绍使用 flask 框架将 python 后端计算或爬取的数据（如 google 搜索结果）安全、高效地渲染到 html 页面中，包含路由定义、模板渲染和基础结构示例。
在 Web 开发中，Python 本身无法直接操作浏览器 DOM，因此需借助 Web 框架实现“后端生成数据 → 前端展示”的标准流程。Flask 是轻量、易上手的 Python Web 框架，非常适合此类场景——例如你开发的浏览器扩展后端服务，需要将 Google 搜索获取的标题与链接动态呈现为可点击的 HTML 列表。
✅ 核心步骤概览
- 安装 Flask：pip install flask
-
组织项目结构：
your_project/ ├── app.py # 主应用文件 └── templates/ └── results.html # HTML 模板（支持 Jinja2 语法） - 编写后端逻辑（app.py）：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/search')
def search():
# 示例：模拟获取搜索结果（实际中可调用 requests + BeautifulSoup 或 Google Custom Search API）
results = [
{"title": "Flask Documentation", "url": "https://flask.palletsprojects.com/"},
{"title": "Jinja2 Template Guide", "url": "https://jinja.palletsprojects.com/"},
{"title": "Python Web Development with Flask", "url": "https://realpython.com/flask-by-example/"}
]
return render_template('results.html', results=results)
- 创建模板（templates/results.html）：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>搜索结果</title><style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 2rem; }
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }
li { margin: 0.5rem 0; }
</style><h1>? 搜索结果（共 {{ results|length }} 条）</h1>
{% if results %}
-
{% for item in results %}
- {{ item.title }} {% endfor %}
暂无结果，请检查搜索逻辑或网络连接。
⚠️ 注意事项
- 安全性：若 results 包含用户输入或外部数据，务必对 HTML 内容进行转义（Jinja2 默认开启自动转义，{{ item.title }} 是安全的；如需渲染富文本，显式使用 |safe 并自行过滤 XSS 风险）。
-
跨域限制：浏览器扩展通常运行在 chrome-extension:// 协议下，直接访问 http://localhost:5000/search 可能触发 CORS 错误。建议在扩展 manifest 中配置 "permissions": ["http://localhost/*"]，并在 Flask 中启用 CORS（pip install flask-cors）：
from flask_cors import CORS CORS(app) # 允许所有来源（开发阶段），生产环境请限制 origin
- 替代方案提示：若无需完整 Web 服务（如仅本地一次性生成报告），可考虑 jinja2 直接渲染静态 HTML 文件，或使用 pandas.DataFrame.to_html() 快速导出表格。
通过以上方式，你就能将 Python 程序的结构化输出（列表、字典等）无缝注入 HTML，并保持前后端职责清晰、代码可维护性强。
Python免费学习笔记（深入）：立即使用
在学习笔记中，你将探索 Python 的核心概念和高级技巧！
