案例概述
我们将构建一个简单的待办事项（Todo List）应用。这个应用将允许用户添加、查看和删除待办事项。我们将使用 Python 的 Flask 框架作为后端，HTML 和 JavaScript（使
用 jQuery 简化 DOM 操作）作为前端。
步骤 1: 设置环境
首先，确保你的机器上安装了 Python 和 pip。然后，使用 pip 安装 Flask：
bash 复制代码
pip install flask
步骤 2: 创建后端
在你的工作目录中，创建一个名为 app.py 的文件，并添加以下代码：
python 复制代码
from flask import Flask, request, jsonify
app = Flask(__name__)
todos = []
@app.route('/')
def index():
return '''
<!doctype html>
<html>
<head><title>Todo List</title></head>
<body>
<h1>Todo List</h1>
<ul id="todo-list">
{% for todo in todos %}
<li>{{ todo }}</li>
{% endfor %}
</ul>
<form action="/add" method="post">
<input type="text" name="todo" placeholder="Add new todo">
<button type="submit">Add</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
function fetchTodos() {
$.getJSON('/todos', function(data) {
$('#todo-list').empty();
data.forEach(function(todo) {
$('#todo-list').append('<li>' + todo + '</li>');
});
资源评论
