@[toc] 本文主要适合于初中级Python程序员设计的Web开发基础教程，包含实战代码和易懂的原理讲解：
Python的Web开发基础：从Flask到TODO应用
1. Flask路由/模板/Jinja2渲染
原理浅析
Flask是Python的轻量级Web框架，核心机制如下：
- 路由(Route)：URL到函数的映射（如
/home→home_page()） - 模板(Templates)：HTML文件占位符，实现动态内容
- Jinja2：模板引擎，用
{{ 变量 }}和{% 逻辑 %}插入动态内容
实战：用户信息展示
from flask import Flask, render_template
app = Flask(__name__)
# 路由定义
@app.route('/user/<username>')
def show_user(username):
# 传入变量到模板
return render_template('profile.html',
name=username,
skills=['Python', 'Java','AI'])
if __name__ == '__main__':
app.run(debug=True)
创建templates/profile.html：
<!DOCTYPE html>
<html>
<body>
<h1>{{ name }}的技能清单</h1>
<ul>
{% for skill in skills %} <!-- Jinja2循环 -->
<li>{{ skill }}</li>
{% endfor %}
</ul>
</body>
</html>
访问http://localhost:5000/user/风雨同舟即可看到动态生成的页面
2. REST API开发（JSON响应）⭐️
原理说明
REST API的核心特征：
- HTTP方法映射：GET(读取)/POST(创建)/PUT(更新)/DELETE(删除)
- 无状态通信：每个请求包含完整信息
- JSON数据格式：轻量级的键值对数据交换格式
实战：图书管理API
from flask import Flask, jsonify, request
app = Flask(__name__)
books = [
{"id": 1, "title": "Python基础教程"}
]
@app.route('/books', methods=['GET'])
def get_books():
return jsonify(books) # 自动转为JSON格式
@app.route('/books', methods=['POST'])
def add_book():
new_book = {"id": len(books)+1, "title": request.json['title']}
books.append(new_book)
return jsonify(new_book), 201 # 201表示创建成功
if __name__ == '__main__':
app.run(debug=True)
使用curl测试：
# 获取图书列表
curl http://localhost:5000/books
# 添加新书
curl -X POST -H "Content-Type: application/json" \
-d '{"title":"Flask Web开发"}' http://localhost:5000/books
3. 实战：TODO列表应用（前后端完整版）
项目结构
todo-app/
├── app.py # 后端主程序
├── templates/
│ └── index.html # 前端页面
├── static/
│ └── style.css # CSS样式
后端实现 (app.py)
from flask import Flask, jsonify, request, render_template
app = Flask(__name__)
tasks = [
{"id": 1, "text": "学习Flask", "done": False}
]
@app.route('/')
def index():
return render_template('index.html')
@app.route('/api/tasks', methods=['GET'])
def get_tasks():
return jsonify(tasks)
@app.route('/api/tasks', methods=['POST'])
def add_task():
new_task = {
"id": len(tasks)+1,
"text": request.json['text'],
"done": False
}
tasks.append(new_task)
return jsonify(new_task), 201
@app.route('/api/tasks/<int:task_id>', methods=['DELETE'])
def delete_task(task_id):
global tasks
tasks = [task for task in tasks if task['id'] != task_id]
return jsonify({"status": "deleted"}), 200
前端实现 (templates/index.html)
<!DOCTYPE html>
<html>
<head>
<title>TODO应用</title>
<link rel="stylesheet" href="/static/style.css">
<script>
// 动态加载任务列表
async function loadTasks() {
const response = await fetch('/api/tasks')
const tasks = await response.json()
const list = document.getElementById('task-list')
list.innerHTML = tasks.map(task => `
<li class="${task.done ? 'completed' : ''}" data-id="${task.id}">
${task.text}
<button onclick="deleteTask(${task.id})">删除</button>
</li>
`).join('')
}
// 添加新任务
async function addTask() {
const input = document.getElementById('new-task')
await fetch('/api/tasks', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({text: input.value})
})
input.value = ''
loadTasks()
}
// 删除任务
async function deleteTask(taskId) {
await fetch(`/api/tasks/${taskId}`, {method: 'DELETE'})
loadTasks()
}
// 页面加载时初始化
window.onload = loadTasks
</script>
</head>
<body>
<div class="container">
<h1>我的TODO列表</h1>
<div class="input-group">
<input type="text" id="new-task" placeholder="输入新任务...">
<button onclick="addTask()">添加</button>
</div>
<ul id="task-list"></ul>
</div>
</body>
</html>
运行应用
export FLASK_APP=app.py
flask run
访问http://localhost:5000体验完整TODO应用
下期预告：21. Python的数据科学入门
在下一章中，我们将探索：
- NumPy的高效数组操作
- Pandas数据处理技巧
- Matplotlib数据可视化实战
- 实战案例：分析股票价格趋势与预测
通过本文的实战练习，你应该已经掌握了Python Web开发的核心技能。如果遇到任何问题，欢迎在评论区留言讨论！
更多技术干货欢迎关注微信公众号“科威舟的AI笔记”~
【转载须知】：转载请注明原文出处及作者信息
