借助 AI 助手，十分钟帮我搭建了一个简易 ToDo 前后端应用-繁依Fanyi

一开始，我只是想做一个简单点的 ToDo 应用，但又不想随便拼凑几个文件就草草结束。我希望这个小项目能具备良好的结构设计、清晰的前后端分离，同时方便维护和拓展。因此我选择了：Flask + SQLite 构建后端，Vue3 构建前端，并使用 CodeBuddy 作为我的对话式开发助手。

项目起步：搭建结构骨架

当我告诉 CodeBuddy：“我想做一个 Flask + Vue + SQLite 的 ToDo 应用”，它很快帮我分析了复杂度，并建议先设计清晰的目录结构。这对我来说是一针见血：以前写项目总是写着写着变成屎山，这次我就决定一开始就做好分工。

最终确定的结构大致如下：

todo-app/
├── backend/
│   ├── app.py
│   ├── config.py
│   ├── models.py
│   ├── routes.py
│   └── instance/todo.db
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── views/
│   │   ├── App.vue
│   │   └── main.js
└── README.md
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

通过 PowerShell 分别执行 mkdir 创建多层目录时，我踩了一些 Windows 命令不兼容的坑，CodeBuddy 也根据输出主动帮我更正语法，确实贴心。

后端开发：一个干净优雅的 Flask 项目

首先是后端部分，Flask 的优点在于轻量灵活，但如果不组织好，很容易写成一个文件一坨逻辑。于是我按照 CodeBuddy 的建议将逻辑拆分为：

app.py：应用主入口
config.py：集中管理配置（含数据库路径）
models.py：定义数据模型（SQLAlchemy）
routes.py：定义 API 路由
run.py：作为启动脚本

在实现 CRUD API 时，CodeBuddy 还特别提醒我处理跨域问题，我加上了 Flask-CORS，从此前后端联调不卡壳。

我一开始用相对导入 .config、.routes 等，结果运行时 Python 报错 attempted relative import with no known parent package。这类细节问题过去总要折腾好久，这次 CodeBuddy 直接替我改成绝对路径，还补上了 __init__.py，这样整个 backend 目录就成了合法的 Python 包，运行时导入自然不报错。

前端开发：组件化 Vue3 项目结构

前端我采用 Vue 3 + Axios + Bootstrap 5，考虑到功能简单，我没有用 Vuex，而是让 App.vue 管理状态并向子组件传值。

创建了以下几个核心组件：

TodoForm.vue：输入框 + 提交按钮
TodoList.vue：展示任务列表
TodoItem.vue：每一条任务，带编辑 / 删除功能

我特别喜欢 CodeBuddy 生成的 TodoItem 的组件逻辑：props 明确、事件派发清晰、样式也干净利落。UI 层面使用 Bootstrap 组件，样式统一、响应性好，视觉上也清爽不少。

联调和优化：填坑、测试与部署前准备

后端本地跑通后，我遇到了前后端路径错位的问题，CodeBuddy 提示我修改 vue.config.js，设置 devServer.proxy 来代理 /api 请求。这样，前端开发服务器发出的请求就能自动转发到 Flask 后端，省去了修改 CORS 的麻烦。

为了避免导入问题反复出现，CodeBuddy 还额外写了一个 simple_app.py，把后端所有逻辑合并成一个文件，方便测试部署。这种“小而全”的设计让我觉得非常适合小型项目甚至教学演示。

最后总结

这次开发经历让我最大体会就是：“结构清晰，维护省心”。通过与 CodeBuddy 的协作，我完成了以下优化点：

清晰的项目结构：前后端分离、职责清晰
组件化开发：前端 Vue 组件拆分合理，便于复用
模块化后端设计：Flask 各模块职责分明
统一样式与逻辑：前端 UI 风格一致，后端 API 规范
部署友好：后端结构可兼容多种部署方式（如 Docker）

如果你也想打造一个小巧实用的个人 ToDo 应用，不妨使用一个聪明的 AI 助手 CodeBuddy，开发效率真的能翻倍提升！

文章版权归作者所有，未经允许请勿转载。

THE END

未分类