记一次使用AI完成一整个前后端项目

w多云w开心w

154

AI·GEN

AI 生成的摘要

实验室有一个需求，想要公开数据集下载的同时，还需要记录有多少人下载之类的信息，因此有了这个项目。

CITE Lab MoCap and Humanoid Group Download Center

一开始想着用我更习惯的 FastAPI + SQLite 来实现，将下述提示词直接喂给 AI(Claude 3.7 Sonnet) 出来的就相当可用了。主要出现了两个bug，一个是 SMTP 邮件发送没有使用加密，另一个是 NJU Box 的版本太老了，因此还是得人工找对应的 Seafile API。

请帮我使用fastapi, JavaScript等技术栈构建一个实验室下载中心的网页。网页应该包含以下功能：
1. 后端使用seafile API获取存储库中有哪些文件，前端第一行使用下拉框显示各个文件，供用户选中对应的文件。
2. 前端第二行需要用户填写邮箱，要求必须为教育邮箱或学术邮箱，输入框右侧有一个发送验证码的按钮。用户点击后，后端使用smtp服务器发送验证码到用户邮箱。前后端都要判断邮箱格式是否正确，并且发送邮件每个IP地址每分钟只能发送一次。
3. 前端第三行需要用户填写验证码。
4. 第四行要求填写学校/单位。
5. 第五行要求填写姓名。
6. 所有输入框都不能为空，前后端都进行判断，防止用户恶意提交。
7. 最后一行有一个提交按钮，点击后，后端判断验证码正确的话，使用seafile API将给对应的文件生成一个共享链接，并将链接发送到用户邮箱，同时前端自动调整至该链接。
8. 同时后端向sqlite数据库中插入一条记录，记录包括文件名称、邮箱、学校/单位、姓名、共享链接、提交时间。
9. 界面使用英文。
10. 页面尽可能美观。
11. 最后写一个dockerfile将整个项目打包成一个镜像。

但是这样下来一方面界面一般，另一方面很多功能都不太方便扩展，于是想着用更先进的 Next.js 等将这个项目重构。但不管是让 AI 参考已有代码重构还是从头开始喂提示词出来的都很差劲，甚至会有编译错误，而非运行时bug。也尝试了最新的几个 AI IDE 也不尽人意。

最后还得靠人工啊。我花了一天时间硬是先搭一个框架，然后将之前 fastapi 实现的项目逐个文件喂给 AI，要求其参考并完成当前 Next.js 项目对应的功能。然后再逐步让它实现一次次小功能的改进，配合着手工修bug，最后才有了上面两个图中的效果。

现有特性：

技术栈：Next.js + TypeScript + Tailwind CSS + Ant Design + Seafile API + MongoDB + Redis
前端提供一个下载界面，用户可以选择文件进行下载（支持多选）。
支持仅教育/学术邮箱下载，并且需要正确验证邮箱后才能下载。
提供下载条款并且必须阅读后继续。
后端记录用户下载记录，包括用户名、文件名、下载时间等信息，并提供一个管理后台用于查看。
文件保存在 Seafile (NJU Box) 上，此项目仅生成一个临时链接给用户下载，避免直接暴露文件链接并节省服务器流量。
解析 Seafile 中的 readme.md 文件，并展示在下载界面，作为文件的说明。
支持配置子路径，以便于部署在已有网站上。
支持深色模式。
根据邮箱，使用AI解析组织名称。

@阙：“没有不好用的AI，只有不够犟的人类。”

实验室有一个需求，想要公开数据集下载的同时，还需要记录有多少人下载之类的信息，因此有了这个项目。

CITE Lab MoCap and Humanoid Group Download Center

请帮我使用fastapi, JavaScript等技术栈构建一个实验室下载中心的网页。网页应该包含以下功能：
1. 后端使用seafile API获取存储库中有哪些文件，前端第一行使用下拉框显示各个文件，供用户选中对应的文件。
2. 前端第二行需要用户填写邮箱，要求必须为教育邮箱或学术邮箱，输入框右侧有一个发送验证码的按钮。用户点击后，后端使用smtp服务器发送验证码到用户邮箱。前后端都要判断邮箱格式是否正确，并且发送邮件每个IP地址每分钟只能发送一次。
3. 前端第三行需要用户填写验证码。
4. 第四行要求填写学校/单位。
5. 第五行要求填写姓名。
6. 所有输入框都不能为空，前后端都进行判断，防止用户恶意提交。
7. 最后一行有一个提交按钮，点击后，后端判断验证码正确的话，使用seafile API将给对应的文件生成一个共享链接，并将链接发送到用户邮箱，同时前端自动调整至该链接。
8. 同时后端向sqlite数据库中插入一条记录，记录包括文件名称、邮箱、学校/单位、姓名、共享链接、提交时间。
9. 界面使用英文。
10. 页面尽可能美观。
11. 最后写一个dockerfile将整个项目打包成一个镜像。

现有特性：

技术栈：Next.js + TypeScript + Tailwind CSS + Ant Design + Seafile API + MongoDB + Redis
前端提供一个下载界面，用户可以选择文件进行下载（支持多选）。
支持仅教育/学术邮箱下载，并且需要正确验证邮箱后才能下载。
提供下载条款并且必须阅读后继续。
后端记录用户下载记录，包括用户名、文件名、下载时间等信息，并提供一个管理后台用于查看。
文件保存在 Seafile (NJU Box) 上，此项目仅生成一个临时链接给用户下载，避免直接暴露文件链接并节省服务器流量。
解析 Seafile 中的 readme.md 文件，并展示在下载界面，作为文件的说明。
支持配置子路径，以便于部署在已有网站上。
支持深色模式。
根据邮箱，使用AI解析组织名称。

@阙：“没有不好用的AI，只有不够犟的人类。”