多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

基于 Vibe Coding 的 OJ 平台:用 TaoToken 打通仓库构建与环境准备

基于 Vibe Coding 的 OJ 平台:用 TaoToken 打通仓库构建与环境准备 1. 从零搭一个 OJ 平台为什么第一步不是写代码很多人一提到做 OJOnline Judge在线判题平台第一反应是打开编辑器写判题逻辑。我一开始也这么想结果写到一半发现代码编译不过、数据库连不上、目录结构乱成一团最后推倒重来。问题不在算法而在工程底座没搭好。所谓 Vibe Coding说白了就是你和 AI 结对编程你负责定方向、做决策、验收结果AI 负责把重复劳动和样板代码填上。它特别适合 OJ 这种「功能边界清晰、但工程细节琐碎」的项目。但 Vibe Coding 有个前提你得先把仓库、环境、依赖这三件事钉死否则 AI 生成的代码会在一个摇摇欲坠的地基上反复返工。这篇要解决的就是这个地基问题。我会带你走完一条完整链路在 Gitee 建仓库并 clone 到本地、用 VS Code 通过 Remote-SSH 连到 Linux 主机、梳理出 OJ 的核心需求、装齐 CMake 与 MySQL 等依赖最后用几条命令验证「构建链路通、数据库连得上」。适合谁适合想用 AI 辅助做一个仿 LeetCode 核心功能、但被环境问题卡住的 C 后端初学者也适合想体验 Vibe Coding 工作流的开发者。技术栈先定下来后面所有配置都围绕它后端 C17 cpp-httplib数据库 MySQL 8.0构建工具 CMake前端原生 HTML/CSS/JS开发环境是 VS Code 远程连接 Ubuntu 24.04。这套组合的好处是依赖少、可控性强AI 生成代码时不容易跑偏。在真正动手前我建议你先想清楚一件事这个 OJ 只做核心功能——题目列表、题目详情、在线编辑提交、判题返回结果、管理员增删题目。范围一旦收窄环境准备的目标就非常明确能编译 C、能连 MySQL、能跑一个 HTTP 服务。下面按这个目标一步步来。2. TaoToken 在 Vibe Coding 工作流里的位置与前置准备Vibe Coding 的效率很大程度取决于你背后接的模型能力。做 OJ 这种项目你会频繁让 AI 做几类事根据 SPEC 生成目录结构和 CMakeLists、写数据库连接池、解释编译报错、把一段 C 判题逻辑改得更健壮。这些任务对模型的代码理解和长上下文能力要求不低。我自己的做法是把模型调用统一走 TaoToken。它是一个聚合式的模型调用入口你拿到一个 API Key就能在兼容 OpenAI 接口规范的客户端里切换不同模型不用为每个模型单独配一套环境。对 Vibe Coding 来说这点很关键写 CMake 配置时你可能想要一个擅长构建系统的模型排查 MySQL 连接报错时又可能换一个更擅长解释错误的模型统一入口省掉了反复改配置的麻烦。前置准备其实就三步。第一步注册并拿到 API Key入口在控制台的 API Keys 页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。第二步如果你打算长期用 AI 做编码和 Agent 任务可以了解下 Coding Plan它更适合高频、长会话的场景https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。第三步把 Base URL 记牢https://taotoken.net/api 注意这个地址后面不加任何参数。这里要提醒一句TaoToken 是模型调用入口不是代码编辑器也不替代 VS Code。你的代码还是在本地或远程主机上写、编译、运行TaoToken 只负责在你需要 AI 介入时提供模型能力。想先感受一下模型对话效果可以直接用模型对话页https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。拿到 Key 之后先别急着写业务代码。我建议你用它做第一件正事把下面这份需求梳理的提示词发给模型让它反过来「采访」你。这一步能帮你把模糊的想法逼成明确的规格后面生成目录结构和数据库设计时就不会来回改。3. 可复制的仓库结构、VS Code 远程配置与依赖安装这一节是全文的操作核心所有片段都可以直接复制。先建仓库。在 Gitee 上新建一个仓库命名比如cpp-oj-vibecoding然后 clone 到你的 Linux 主机git clone gitgitee.com:yourname/cpp-oj-vibecoding.git cd cpp-oj-vibecodingVibe Coding 过程中 git 极其重要因为 AI 每次改动都可能引入问题你需要能随时回退。建议每完成一个小阶段就提交一次git add . git commit -m chore: init repo structure接下来是 VS Code 连接 Linux 主机。在 VS Code 里装 Remote - SSH 扩展按 F1 输入Remote-SSH: Connect to Host填useryour_host_ip连上后打开项目目录。这样你的编辑体验在本地编译运行在远程两边不打架。然后是需求梳理。把这段提示词发给模型让它先提问再产出 SPEC你现在是资深产品架构师 技术负责人。 我的初始需求是搭建一个仿 LeetCode 的 OJ 项目后端 C (cpp-httplib)前端原生 HTML CSS JS。 规则 1. 不要直接写代码或生成方案。 2. 先用提问的方式对我做深度访谈像苏格拉底提问法一样挖掘细节。 3. 覆盖维度业务目标、技术栈选型、非功能需求、边缘案例、UI/API 边界、风险权衡。 4. 每轮只问 3-5 个最关键的问题等我回答后继续追问。 5. 当我确认规格已完整时再输出完整的 SPEC.md。 开始访谈吧。经过几轮问答后你会得到一份包含目录结构、数据库设计、API 边界的 SPEC。下面这份目录结构可以直接作为项目骨架cpp-oj-vibecoding/ ├── SPEC.md ├── CMakeLists.txt ├── config/ │ └── config.yaml ├── database/ │ └── init.sql ├── src/ │ ├── main.cc │ ├── server/ │ ├── handler/ │ ├── service/ │ ├── model/ │ ├── db/ │ └── utils/ ├── public/ │ ├── index.html │ ├── problem_list.html │ ├── problem.html │ ├── css/ │ └── js/ └── tests/数据库初始化脚本database/init.sql至少包含三张表CREATE TABLE problems ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(255) NOT NULL, difficulty ENUM(Easy,Medium,Hard) NOT NULL, content TEXT NOT NULL, template TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE test_cases ( id INT PRIMARY KEY AUTO_INCREMENT, problem_id INT NOT NULL, input TEXT NOT NULL, expected TEXT NOT NULL, position INT NOT NULL DEFAULT 0, FOREIGN KEY (problem_id) REFERENCES problems(id) ON DELETE CASCADE ); CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(64) UNIQUE NOT NULL, password VARCHAR(128) NOT NULL, role ENUM(user,admin) DEFAULT user, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );依赖安装是这一节的重头戏。让 AI 根据 SPEC 梳理依赖清单然后你在 root 下手动装。为什么不直接让 AI 装因为装依赖要 root 权限一旦 AI 执行了危险命令后果不可控。手动装虽然多敲几行但安全。sudo apt update sudo apt install -y cmake g make mysql-server libmysqlclient-dev libyaml-cpp-dev装完后验证版本g --version cmake --version mysql --version如果mysql --version报 command not found说明 mysql-server 没装成功回到上一步检查 apt 源。这一步过了构建链路和数据库服务的基础就有了。4. 验证构建链路与数据库连接是否真的可用装完依赖不代表能用必须验证。先写一个最小 CMakeLists 确认构建链路通cmake_minimum_required(VERSION 3.16) project(oj_backend CXX) set(CMAKE_CXX_STANDARD 17) set(CMAKE_CXX_STANDARD_REQUIRED ON) find_package(PkgConfig REQUIRED) pkg_check_modules(MYSQL REQUIRED mysqlclient) add_executable(oj_server src/main.cc) target_include_directories(oj_server PRIVATE ${MYSQL_INCLUDE_DIRS}) target_link_libraries(oj_server PRIVATE ${MYSQL_LIBRARIES})src/main.cc先放一个最小可编译内容#include iostream int main() { std::cout oj backend build ok std::endl; return 0; }然后构建mkdir -p build cd build cmake .. make ./oj_server看到oj backend build ok就说明 CMake、g、MySQL 客户端库三者链接正常。这一步很关键很多人的坑在于find_package找不到 MySQL报Could NOT find MYSQL那通常是libmysqlclient-dev没装或 pkg-config 路径不对。接着验证数据库连接。先启动 MySQL 并初始化sudo systemctl start mysql sudo systemctl enable mysql sudo mysql database/init.sql写一个连接测试程序#include mysql/mysql.h #include iostream int main() { MYSQL* conn mysql_init(nullptr); if (!mysql_real_connect(conn, localhost, root, your_password, oj_system, 0, nullptr, 0)) { std::cerr connect failed: mysql_error(conn) std::endl; return 1; } std::cout mysql connected std::endl; mysql_close(conn); return 0; }编译运行后看到mysql connected说明数据库链路通了。如果报Access denied for user rootlocalhost检查密码或改用auth_socket认证方式。到这里构建链路和数据库连接都验证完毕可以放心让 AI 开始生成业务代码了。5. 环境准备阶段最容易踩的几类报错这一节我把实际遇到的报错和排查思路列出来你对照着看。第一类CMake 找不到 MySQL。报错长这样CMake Error: Could NOT find MYSQL (missing: MYSQL_LIBRARIES MYSQL_INCLUDE_DIRS)。原因通常是libmysqlclient-dev没装或者 pkg-config 找不到mysqlclient.pc。排查命令pkg-config --cflags --libs mysqlclient如果这条命令报错说明开发包缺失重装libmysqlclient-dev即可。第二类数据库连接报Cant connect to local MySQL server through socket /var/run/mysqld/mysqld.sock。这是 MySQL 服务没起来。用sudo systemctl status mysql看状态没起来就sudo systemctl start mysql。第三类认证失败Access denied for user。MySQL 8.0 默认 root 用auth_socket插件你从 C 程序用密码连会失败。解决办法是给 root 设密码或新建一个专用用户CREATE USER ojlocalhost IDENTIFIED BY oj_password; GRANT ALL ON oj_system.* TO ojlocalhost; FLUSH PRIVILEGES;第四类如果你在 Vibe Coding 时用了某些 AI 编码工具可能会遇到local proxy failed或401之类的报错。这类问题多半是 API Key 或 Base URL 配错了。检查三件套Base URL 填https://taotoken.net/apiKey 用控制台生成的Model ID 填你实际要用的模型名。三者缺一不可尤其注意 Base URL 后面不要多加斜杠或路径。第五类reading choices相关报错通常出现在模型返回格式不符合预期时。检查你的请求体是否符合 OpenAI 兼容格式messages字段是否完整。第六类OAuth 相关报错如果你用的是需要 OAuth 的客户端确认回调地址和权限范围配置正确。这类问题排查时先看客户端日志再看服务端返回。把这几类报错提前排掉后面写业务代码时就不会被环境问题反复打断。6. 把模型调用接进你的开发流程环境通了之后下一步是让 AI 真正参与进来。我建议你先用模型对话页试几轮把 OJ 的判题逻辑、连接池设计这些难点聊清楚再落到代码。入口https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。如果你打算长期用 AI 做编码和 Agent 任务Coding Plan 更适合高频场景https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。需要管理多个 Key 或查看用量去控制台https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。接入细节和参数说明看文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。最后给你一个实用技巧每次让 AI 生成代码前先把当前 SPEC 和目录结构贴进上下文生成后立刻git commit。这样即使某次生成跑偏你也能一键回退不会把整个项目带沟里。环境准备这步做扎实了后面的 Vibe Coding 才会越写越顺。
返回列表