基于Python+Flask實現(xiàn)一個TODO任務(wù)管理系統(tǒng)網(wǎng)站
隨著科技的進(jìn)步,數(shù)字化的任務(wù)清單逐漸成為生活中不可或缺的一部分。它們不僅可以幫助我們跟蹤日常任務(wù),還可以提高效率。但是,你是否考慮過自己制作一個任務(wù)管理系統(tǒng)呢?好消息是,使用Python和Flask,我們可以輕松快捷地構(gòu)建一個。今天,我將向大家展示如何實現(xiàn)一個簡單、易用的TODO任務(wù)管理系統(tǒng)。
1. 技術(shù)概覽
- Python: 一種流行的、易于學(xué)習(xí)和使用的編程語言。
- Flask: 一個輕量級的Python web框架,適合構(gòu)建小型到中型應(yīng)用程序。
2. 開始之前
確保你已經(jīng)安裝了Python和Flask。你可以使用以下命令來安裝Flask:
pip install Flask
3. 后端:Flask應(yīng)用
我們首先創(chuàng)建一個簡單的Flask應(yīng)用。在此應(yīng)用中,我們使用一個Python列表來模擬數(shù)據(jù)庫存儲TODO任務(wù)。
from flask import Flask, jsonify, request
from uuid import uuid4
app = Flask(__name__)
tasks = [] # 暫時使用一個Python列表來保存任務(wù)
這段代碼簡短而直接。我們初始化了Flask應(yīng)用,并設(shè)置了一個空的任務(wù)列表。接著,我們需要定義兩個主要的路由來處理任務(wù)的獲取和添加。
@app.route('/')
def index():
return render_template("index.html")
上述代碼表示,當(dāng)用戶訪問應(yīng)用的主頁時,系統(tǒng)會返回我們稍后將定義的HTML頁面。
@app.route('/tasks', methods=['GET', 'POST'])
def handle_tasks():
if request.method == 'POST':
new_task = {
'id': str(uuid4()),
'content': request.json['content'],
'done': False
}
tasks.append(new_task)
return jsonify(new_task), 201
return jsonify(tasks)
上述handle_tasks函數(shù)處理兩種請求。當(dāng)我們想獲取所有任務(wù)時,它會返回任務(wù)列表;當(dāng)我們添加新任務(wù)時,它會接收新任務(wù)的內(nèi)容,為其分配一個唯一ID,并將其添加到任務(wù)列表中。
4. 前端:一個簡單的頁面
前端部分包括一個輸入框供用戶輸入任務(wù),并有一個列表展示所有任務(wù)。我們使用Bootstrap框架來美化頁面,以及jQuery來簡化JavaScript代碼編寫。在HTML文件中,我們使用了一個輸入框和按鈕供用戶輸入并提交任務(wù)。當(dāng)任務(wù)提交后,它會出現(xiàn)在下面的列表中。在JavaScript部分,我們使用Ajax請求與后端交互,無需重新加載頁面。這提供了更流暢的用戶體驗。
5. 一起看看效果吧!
當(dāng)一切就緒后,只需運(yùn)行Flask應(yīng)用即可。打開瀏覽器并訪問http://localhost:5000/,你將看到一個簡潔、實用的TODO任務(wù)管理系統(tǒng)。
總結(jié)
在這篇文章中,我們見證了使用Python和Flask創(chuàng)建一個任務(wù)管理系統(tǒng)的過程。通過簡單的代碼和描述,我們構(gòu)建了一個易于理解且功能強(qiáng)大的應(yīng)用。這只是開始,你可以根據(jù)自己的需求擴(kuò)展和完善它。