Demo地址：https://gitcode.com/rmbnetlife/todo-app-js-flask.git

Python Todo 應用

這是一個使用Python Flask框架開發的簡單待辦事項(Todo)應用，采用前后端分離架構。本項目實現了待辦事項的添加、刪除、狀態切換等基本功能，并提供了直觀的用戶界面，適合作為Web開發學習示例或小型團隊的任務管理工具。

項目架構

本項目采用經典的前后端分離架構：

• 后端：基于Flask的RESTful API服務，負責數據處理和存儲
• 前端：純靜態HTML/CSS/JavaScript實現，通過Fetch API與后端交互
• 數據存儲：使用JSON文件作為輕量級數據存儲方案，無需配置數據庫

項目結構

python-todo-demo/ 
├── backend/               # Python 后端 
│   ├── app.py            # Flask 主程序 - RESTful API實現
│   ├── requirements.txt  # 依賴列表 
│   └── todos.json        # 數據存儲文件（替代數據庫） 
│ 
└── frontend/             # 靜態前端 ├── index.html        # 前端頁面 - 包含HTML結構和JavaScript邏輯└── styles.css        # 樣式文件 - 美化界面的CSS樣式

設計邏輯

后端設計

后端采用Flask框架實現RESTful API，主要設計考慮：

1. 輕量級數據存儲：使用JSON文件存儲數據，避免數據庫配置，簡化部署
2. RESTful API設計：遵循REST原則，使用適當的HTTP方法和狀態碼
3. 跨域支持：通過Flask-CORS啟用CORS，支持前后端分離開發
4. 錯誤處理：適當的錯誤狀態碼和消息返回
5. ID生成策略：使用最大ID遞增策略，確保ID唯一性，避免ID沖突

前端設計

前端采用原生JavaScript實現，主要設計考慮：

1. 分類顯示：將待辦事項分為"未完成"和"已完成"兩個區域，提高用戶體驗
2. 響應式交互：支持點擊切換狀態、刪除操作，以及回車鍵添加新任務
3. 視覺反饋：通過樣式變化（如刪除線、顏色變化）提供明確的任務狀態反饋
4. 簡潔界面：采用卡片式設計和柔和配色，提供舒適的視覺體驗

功能特點

• 基本功能：

  • 添加新的待辦事項（支持回車鍵快速添加）
  • 刪除不需要的待辦事項
  • 標記待辦事項為已完成/未完成
  • 分類顯示已完成和未完成的任務

• 技術特點：

  • 基于Flask的RESTful API
  • 使用JSON文件存儲數據（無需數據庫）
  • 純前端實現，無需服務器端渲染
  • 響應式設計，操作簡單直觀
  • 安全的ID生成策略，避免ID沖突

安裝部署

環境要求

• Python 3.6+
• 支持現代JavaScript的Web瀏覽器

1. 克隆項目

git clone <項目倉庫URL>
cd python-todo-app

2. 安裝依賴

cd backend
pip install -r requirements.txt

這將安裝以下依賴：

• Flask - Web框架
• Flask-CORS - 跨域資源共享支持

3. 啟動后端服務

cd backend
python app.py

服務器將在 http://localhost:5000 運行，并在控制臺輸出調試信息

4. 訪問前端頁面

有兩種方式可以訪問前端頁面：

方式一：直接打開文件（簡單但可能受到CORS限制）

• 直接在瀏覽器中打開 frontend/index.html 文件

方式二：使用簡單的HTTP服務器（推薦）

# 如果安裝了Python，可以使用內置的HTTP服務器
cd frontend
python -m http.server 8080

然后訪問 http://localhost:8080

API接口詳解

獲取所有待辦事項

• URL: /api/todos
• 方法: GET
• 響應: 待辦事項數組

  [{"id": 1,"text": "示例任務","completed": false},...
  ]
  

添加新的待辦事項

• URL: /api/todos
• 方法: POST
• 請求體:

  {"text": "新的待辦事項"
  }
  

• 響應: 新創建的待辦事項，狀態碼201

刪除指定待辦事項

• URL: /api/todos/<id>
• 方法: DELETE
• 響應: 被刪除的待辦事項，狀態碼200

切換待辦事項的完成狀態

• URL: /api/todos/<id>/toggle
• 方法: PUT
• 響應: 更新后的待辦事項，狀態碼200

數據存儲

項目使用JSON文件(todos.json)作為數據存儲，格式如下：

[{"id": 1,"text": "示例任務1","completed": false},{"id": 2,"text": "示例任務2","completed": true}
]

技術棧

• 后端：

  • Python 3.6+
  • Flask - Web框架
  • Flask-CORS - 跨域資源共享
  • JSON - 數據存儲

• 前端：

  • HTML5 - 頁面結構
  • CSS3 - 樣式和布局
  • JavaScript (ES6+) - 交互邏輯
  • Fetch API - 網絡請求

常見問題

Q: 如何修改服務器端口？

A: 在backend/app.py文件的最后一行修改port參數：

app.run(port=你想要的端口號, debug=True)

Q: 如何解決CORS（跨域）問題？

A: 項目已通過Flask-CORS處理了跨域問題。如果仍有問題，確保前端請求的URL與后端服務器地址匹配。

Q: 如何備份數據？

A: 定期復制backend/todos.json文件即可備份所有數據。

未來改進方向

• 添加用戶認證系統
• 支持任務分類和標簽
• 實現任務優先級和截止日期
• 添加數據庫支持（如SQLite或MongoDB）
• 開發移動端應用