<think>我们使用Vue.js作为前端框架，Python
Flask作为后端框架，MySQL作为数据库。以下是详细步骤和核心代码示例：###1.项目结构```project/│├──backend/#
Flask后端│├──app.py#主应用│├──config.py#配置文件│├──models.py#数据模型│├──extensions.py#扩展（如db）│└──requirements.txt│├──frontend/#Vue前端│├──src/││├──views/#页面组件││├──components/#可复用组件││├──router/#路由││└──store/#Vuex状态管理（可选）│└──package.json│└──database/#数据库脚本（可选）└──init.sql```###2.后端实现（
Flask）**步骤1：创建
Flask应用并配置MySQL**`config.py````pythonclassConfig:
SQLALCHEMY_DATABASE_URI='mysql://username:password@localhost/task_management'
SQLALCHEMY_TRACK_MODIFICATIONS=False````extensions.py````pythonfrom
flask_
sqlalchemyimport
SQLAlchemydb=
SQLAlchemy()````app.py````pythonfrom
flaskimport
FlaskfromconfigimportConfigfromextensionsimportdbdefcreate_app
():app=
Flask(__name__)app.config.from_object
(Config)db.init_app
(app)returnappapp=create_app
()```**步骤2：定义任务模型**`models.py````pythonfromextensionsimportdbclassTask
(db.Model):id=db.Column
(db.Integer,primary_key=True)title=db.Column
(db.String
(128),nullable=False)description=db.Column
(db.Text)status=db.Column
(db.String
(32),default='pending')#pending/completeddue_date=db.Column
(db.DateTime)defto_dict
(self):return{"id":self.id,"title":self.title,"description":self.description,"status":self.status,"due_date":self.due_date.strftime
('%Y-%m-%d%H:%M')ifself.due_dateelseNone}```**步骤3：实现任务API接口**`app.py`
(追加)```pythonfrom
flaskimportrequest,jsonifyfrommodelsimportTask@app.route
('/api/tasks',methods=['GET'])defget_tasks
():tasks=Task.query.all
()returnjsonify
([task.to_dict
()fortaskintasks])@app.route
('/api/tasks',methods=['POST'])defcreate_task
():data=request.get_json
()task=Task
(title=data['title'],description=data.get
('description',''),status='pending')db.session.add
(task)db.session.commit
()returnjsonify
(task.to_dict
()),201@app.route
('/api/tasks/<int:task_id>',methods=['PUT'])defupdate_task
(task_id):data=request.get_json
()task=Task.query.get_or_404
(task_id)task.title=data['title']task.description=data.get
('description',task.description)task.status=data.get
('status',task.status)db.session.commit
()returnjsonify
(task.to_dict
())@app.route
('/api/tasks/<int:task_id>',methods=['DELETE'])defdelete_task
(task_id):task=Task.query.get_or_404
(task_id)db.session.delete
(task)db.session.commit
()return'',204```###3.前端实现（Vue.js）**步骤1：使用VueCLI创建项目**```bashnpminstall-g@vue/clivuecreatefrontend#选择Router,Vuex等```**步骤2：创建任务列表组件**`components/TaskList.vue````html<template><div><divv-for="taskintasks":key="task.id"class="task-item"><h3>{{task.title}}</h3><p>{{task.description}}</p><span>状态:{{task.status}}</span></div></div></template><script>exportdefault{data
(){return{tasks:[]}},mounted
(){this.fetchTasks
();},methods:{asyncfetchTasks
(){constresponse=awaitfetch
('http://localhost:5000/api/tasks');this.tasks=awaitresponse.json
();}}}</script>```**步骤3：创建添加任务表单组件**`components/AddTask.vue````html<template><form@submit.prevent="createTask"><inputv-model="title"placeholder="任务标题"><textareav-model="description"placeholder="任务描述"></textarea><buttontype="submit">添加任务</button></form></template><script>exportdefault{data
(){return{title:'',description:''}},methods:{asynccreateTask
(){awaitfetch
('http://localhost:5000/api/tasks',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify
({title:this.title,description:this.description})});this.$emit
('task-created');//触发父组件刷新this.title='';this.description='';}}}</script>```###4.跨域问题
解决（
Flask-CORS）安装
Flask-CORS：```bashpipinstall
flask-cors```在`app.py`中启用CORS：```pythonfrom
flask_corsimportCORSapp=create_app
()CORS
(app)#允许所有跨域请求```###5.部署到宝塔面板（参考引用[4]）1.将Vue项目构建：`npmrunbuild`2.将生成的dist目录内容上传到宝塔网站目录3.创建Python项目并设置运行目录和启动文件（app.py）4.配置Nginx代理（前端静态文件和API反向代理）###技术优势总结-**前后端分离**：Vue负责UI渲染，
Flask提供API-**灵活扩展**：可增加用户认证、任务分类等功能-**开发便捷**：使用
SQLAlchemy简化数据库操作§§相关问题§§1.Vue中如何实现任务的状态更新（完成/取消）？2.
Flask中如何处理用户认证（登录注册）？3.如何部署到云服务器并绑定域名？</think>
基于Vue、Python
Flask和MySQL实现个人任务管理系统的完整
解决方案如下，包含核心模块设计和示例代码：
---
### 系统架构
```mermaid
graph LR
A[Vue前端] -->|Axios HTTP请求| B
(Flask API)
B -->|
SQLAlchemy| C[MySQL]
C -->|返回JSON数据| B
B -->|JSON响应| A
```
---
### 后端实现（
Flask + MySQL）
#### 1. 数据库模型
(`models.py`)
```python
from
flask_
sqlalchemy import
SQLAlchemy
db =
SQLAlchemy()
class Task
(db.Model):
__tablename__ = 'tasks'
id = db.Column
(db.Integer, primary_key=True)
title = db.Column
(db.String
(100), nullable=False)
description = db.Column
(db.Text)
due_date = db.Column
(db.DateTime)
status = db.Column
(db.Enum
('pending', 'completed', 'archived'), default='pending')
user_id = db.Column
(db.Integer, db.ForeignKey
('users.id'))
def to_dict
(self):
return {
"id": self.id,
"title": self.title,
"description": self.description,
"due_date": self.due_date.isoformat
() if self.due_date else None,
"status": self.status
}
class User
(db.Model):
__tablename__ = 'users'
id = db.Column
(db.Integer, primary_key=True)
username = db.Column
(db.String
(80), unique=True)
password = db.Column
(db.String
(120))
tasks = db.relationship
('Task', backref='user', lazy=True)
```
#### 2.
Flask API
(`app.py`)
```python
from
flask import
Flask, jsonify, request
from models import db, Task, User
from
flask_migrate import Migrate
app =
Flask(__name__)
app.config['
SQLALCHEMY_DATABASE_URI'] = 'mysql://user:password@localhost/taskdb'
app.config['
SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db.init_app
(app)
migrate = Migrate
(app, db)
# 用户认证中间件
@app.before_request
def check_auth
():
if not verify_user_token
():
return jsonify
({"error": "Unauthorized"}), 401
# 任务API
@app.route
('/api/tasks', methods=['GET'])
def get_tasks
():
tasks = Task.query.filter_by
(user_id=current_user
().id).all
()
return jsonify
([task.to_dict
() for task in tasks])
@app.route
('/api/tasks', methods=['POST'])
def create_task
():
data = request.json
new_task = Task
(
title=data['title'],
description=data.get
('description'),
due_date=data.get
('due_date'),
user_id=current_user
().id
)
db.session.add
(new_task)
db.session.commit
()
return jsonify
(new_task.to_dict
()), 201
@app.route
('/api/tasks/<int:id>', methods=['DELETE'])
def delete_task
(id):
task = Task.query.get_or_404
(id)
if task.user_id != current_user
().id:
return jsonify
({"error": "Forbidden"}), 403
db.session.delete
(task)
db.session.commit
()
return '', 204
```
---
### 前端实现（Vue 3
+ Composition API）
#### 1. 任务列表组件
(`TaskList.vue`)
```vue
<template>
<div>
<h2>我的任务</h2>
<div v-for="task in tasks" :key="task.id" class="task-card">
<h3>{{ task.title }}</h3>
<p>{{ task.description }}</p>
<button @click="deleteTask
(task.id)">删除</button>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const tasks = ref
([])
onMounted
(async
() => {
const response = await axios.get
('/api/tasks', {
headers: { Authorization: `Bearer ${localStorage.getItem
('token')}` }
})
tasks.value = response.data
})
const deleteTask = async
(id) => {
await axios.delete
(`/api/tasks/${id}`)
tasks.value = tasks.value.filter
(t => t.id !== id)
}
</script>
```
#### 2. 添加任务表单
(`AddTaskForm.vue`)
```vue
<template>
<form @submit.prevent="submitTask">
<input v-model="title" placeholder="任务标题" required>
<textarea v-model="description" placeholder="详细描述"></textarea>
<button type="submit">添加任务</button>
</form>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
const title = ref
('')
const description = ref
('')
const submitTask = async
() => {
await axios.post
('/api/tasks', {
title: title.value,
description: description.value
}, {
headers: { Authorization: `Bearer ${localStorage.getItem
('token')}` }
})
// 重置表单并刷新列表
}
</script>
```
---
### 数据库初始化（MySQL）
```sql
CREATE DATABASE taskdb CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE TABLE users
(
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR
(80) UNIQUE NOT NULL,
password VARCHAR
(120) NOT NULL
);
CREATE TABLE tasks
(
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR
(100) NOT NULL,
description TEXT,
due_date DATETIME,
status ENUM
('pending', 'completed', 'archived') DEFAULT 'pending',
user_id INT NOT NULL,
FOREIGN KEY
(user_id) REFERENCES users
(id)
);
```
---
### 关键技术点
1. **跨域
解决**：使用
Flask-CORS处理Vue与
Flask的跨域请求
```python
from
flask_cors import CORS
CORS
(app, resources={r"/api/*": {"origins": "http://localhost:8080"}})
```
2. **用户认证**：实现JWT令牌系统（使用`pyjwt`）
```python
import jwt
@app.route
('/api/login', methods=['POST'])
def login
():
# 验证用户名密码后生成token
token = jwt.encode
({'user_id': user.id}, app.config['SECRET_KEY'])
return jsonify
({'token': token})
```
3. **部署配置**：
- 前端：`npm run build`生成静态文件部署到Nginx
- 后端：使用
Gunicorn+Gevent部署
Flask应用
```bash
gunicorn -w 4 -k
gevent app:app -b 0.0.0.0:5000
```
---
### 进阶功能建议
1. **任务状态统计仪表盘**（使用Chart.js）
2. **截止日期提醒功能**（使用Celery定时任务）
3. **任务优先
级标记系统**
4. **多端同步（PWA应用）**
最低0.47元/天 解锁文章
扫一扫
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
