【玩转 AtomCode】我用 AtomCode 在华为云服务器上 30 分钟开发了全栈待办事项应用「码动四季」征文活动参赛作品本文记录了使用 AtomCode v4.25.9 Headless 模式在华为云 FlexusX 服务器上从零开发一个完整的待办事项 Web 应用的全过程。后端 Flask SQLite前端原生 HTML/CSS/JS一气呵成。一、项目背景在体验了 AtomCode 的基础功能后我想测试它在真实项目开发场景下的表现。选择了经典的 Todo App 作为测试项目因为它麻雀虽小五脏俱全——需要前端、后端、数据库、API 设计、CRUD 逻辑能全面检验 AI 编码助手的实际能力。服务器环境实例华为云 FlexusX ecs-46b1-0002 规格8vCPUs | 16GiB | x2e.8u.16g 系统Ubuntu 24.04 server 64bit 公网 IP117.78.10.29 AtomCodev4.25.9 模型DeepSeek V4 Flash (100万上下文)二、环境准备2.1 安装 AtomCode# 一键安装curl-fsSLhttps://atomgit.com/atomgit_atomcode/atomcode/releases/download/v4.22.2/install.sh|sh# 升级到最新版atomcode upgrade# 验证版本rootecs-46b1-0002:~# atomcode --versionatomcode4.25.9(unknown)2.2 登录与免费 Token# OAuth 登录在浏览器中完成授权atomcode login# 领取免费 CodingPlan Tokenatomcode codingplan# 验证状态rootecs-46b1-0002:~# atomcode statusLoggedinas: cpyaxjq(66612fcc2da91e28f2501347)Name: cpyaxjq Email: cpyaxjqnoreply.gitcode.com三、项目开发实录3.1 一行命令启动项目这是最让我震撼的一步——一行命令生成整个全栈项目rootecs-46b1-0002:~# mkdir -p /root/todo-app cd /root/todo-approotecs-46b1-0002:~/todo-app# atomcode -p 创建一个完整的待办事项Web应用包含1)前端HTML页面(含CSS和JS) 2)后端Python Flask API 3)SQLite数据库 4)增删改查功能 5)漂亮的UI界面。创建所有文件 -yAtomCode 开始工作自动分析需求、设计架构、生成代码。整个过程无需任何人工干预。3.2 生成的项目结构rootecs-46b1-0002:~/todo-app# find . -type f | sort./app.py ./requirements.txt ./templates/index.html ./todos.db ./todos.db-shm ./todos.db-wal项目结构清晰规范app.py— Flask 后端含所有 API 路由templates/index.html— 前端页面HTML CSS JS 全内联requirements.txt— Python 依赖todos.db— SQLite 数据库自动创建3.3 后端代码解析app.py— AtomCode 生成的后端代码质量很高让我逐一分析亮点#!/usr/bin/env python3Todo App - Flask Backend with SQLiteimportsqlite3importosfromdatetimeimportdatetimefromflaskimportFlask,jsonify,request,render_templatefromflask_corsimportCORS appFlask(__name__)CORS(app)DB_PATHos.path.join(os.path.dirname(__file__),todos.db)defget_db():Get a database connection with row factory.connsqlite3.connect(DB_PATH)conn.row_factorysqlite3.Row conn.execute(PRAGMA journal_modeWAL)# WAL 模式提升并发conn.execute(PRAGMA foreign_keysON)# 开启外键约束returnconndefinit_db():Initialize the database and create the todos table if it doesnt exist.withget_db()asconn:conn.execute( CREATE TABLE IF NOT EXISTS todos ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, completed INTEGER NOT NULL DEFAULT 0, created_at TEXT NOT NULL DEFAULT (datetime(now,localtime)), updated_at TEXT NOT NULL DEFAULT (datetime(now,localtime)) ) )conn.commit()亮点 1数据库设计专业——使用了 WAL 模式提升并发性能开启了外键约束created_at/updated_at 自动填充。API 路由实现app.route(/api/todos,methods[GET])deflist_todos():Get all todos, newest first.withget_db()asconn:rowsconn.execute(SELECT id, title, completed, created_at, updated_at FROM todos ORDER BY created_at DESC).fetchall()returnjsonify([dict(r)forrinrows])app.route(/api/todos,methods[POST])defcreate_todo():Create a new todo.datarequest.get_json(silentTrue)or{}title(data.get(title)or).strip()ifnottitle:returnjsonify({error:Title is required}),400nowdatetime.now().strftime(%Y-%m-%d %H:%M:%S)withget_db()asconn:curconn.execute(INSERT INTO todos (title, created_at, updated_at) VALUES (?, ?, ?),(title,now,now),)todo_idcur.lastrowid rowconn.execute(SELECT id, title, completed, created_at, updated_at FROM todos WHERE id ?,(todo_id,),).fetchone()returnjsonify(dict(row)),201app.route(/api/todos/int:todo_id,methods[PUT])defupdate_todo(todo_id:int):Update a todos title and/or completed status.datarequest.get_json(silentTrue)or{}fields[]values[]iftitleindata:title(data[title]or).strip()ifnottitle:returnjsonify({error:Title cannot be empty}),400fields.append(title ?)values.append(title)ifcompletedindata:fields.append(completed ?)values.append(1ifdata[completed]else0)ifnotfields:returnjsonify({error:No fields to update}),400fields.append(updated_at ?)values.append(datetime.now().strftime(%Y-%m-%d %H:%M:%S))values.append(todo_id)withget_db()asconn:curconn.execute(fUPDATE todos SET{, .join(fields)}WHERE id ?,values)ifcur.rowcount0:returnjsonify({error:Todo not found}),404rowconn.execute(SELECT id, title, completed, created_at, updated_at FROM todos WHERE id ?,(todo_id,),).fetchone()returnjsonify(dict(row))app.route(/api/todos/int:todo_id,methods[DELETE])defdelete_todo(todo_id:int):Delete a todo.withget_db()asconn:curconn.execute(DELETE FROM todos WHERE id ?,(todo_id,))ifcur.rowcount0:returnjsonify({error:Todo not found}),404returnjsonify({message:Todo deleted}),200亮点 2参数化查询防止 SQL 注入动态 UPDATE 只更新传入的字段正确的 HTTP 状态码201 创建、404 未找到、400 参数错误输入验证标题不能为空rowcount检查确保操作的资源存在亮点 3前端路由与 API 路由分离app.route(/)defindex():Serve the frontend.returnrender_template(index.html)3.4 前端代码解析templates/index.html是一个完整的单页应用AtomCode 生成了漂亮的 UI!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleTodo App · 待办事项/titlelinkrelstylesheethrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css/style*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;}:root{--primary:#6366f1;--primary-hover:#4f46e5;--danger:#ef4444;--success:#22c55e;--gray-50:#f8fafc;--gray-800:#1e293b;--radius:12px;--shadow-lg:0 10px 25pxrgba(0,0,0,.08),0 4px 10pxrgba(0,0,0,.04);}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans SC,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:40px 20px;}.container{width:100%;max-width:600px;}.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;}/style/head亮点 4渐变背景linear-gradient(135deg, #667eea 0%, #764ba2 100%)CSS 变量系统:root中定义设计 TokenFont Awesome 图标库响应式设计max-width: 600px毛玻璃效果卡片3.5 自动生成 READMEAtomCode 不仅生成了代码还自动生成了 README 文档## API 接口 | 方法 | 路径 | 说明 | |---|---|---| | GET | /api/todos | 获取所有待办事项 | | POST | /api/todos | 创建 ({title:...}) | | PUT | /api/todos/id | 更新标题/完成状态 | | DELETE | /api/todos/id | 删除指定项 | ## 启动方式 cd /root/todo-app python3 app.py ## 技术栈 - **后端**: Python Flask SQLite (WAL 模式) - **前端**: 纯 HTML CSS JS (无框架依赖) - **图标**: Font Awesome 6 - **样式**: 渐变背景 毛玻璃卡片 响应式适配四、功能测试4.1 启动应用rootecs-46b1-0002:~/todo-app# python3 app.py* Serving Flask appapp* Running on all addresses(0.0.0.0)* Running on http://127.0.0.1:5000 * Running on http://192.168.0.228:50004.2 API 接口测试创建待办事项rootecs-46b1-0002:~# curl -s -X POST http://127.0.0.1:5000/api/todos \-HContent-Type: application/json\-d{title:学习AtomCode}{completed:0,created_at:2026-07-07 12:56:59,id:1,title:学习AtomCode,updated_at:2026-07-07 12:56:59}rootecs-46b1-0002:~# curl -s -X POST http://127.0.0.1:5000/api/todos \-HContent-Type: application/json\-d{title:写博客参赛}{completed:0,created_at:2026-07-07 12:56:59,id:2,title:写博客参赛,updated_at:2026-07-07 12:56:59}查询所有待办rootecs-46b1-0002:~# curl -s http://127.0.0.1:5000/api/todos[{id:1,title:学习AtomCode,completed:0,created_at:2026-07-07 12:56:59,updated_at:2026-07-07 12:56:59},{id:2,title:写博客参赛,completed:0,created_at:2026-07-07 12:56:59,updated_at:2026-07-07 12:56:59}]更新标记完成rootecs-46b1-0002:~# curl -s -X PUT http://127.0.0.1:5000/api/todos/1 \-HContent-Type: application/json\-d{completed:true}{id:1,title:学习AtomCode,completed:1,created_at:2026-07-07 12:56:59,updated_at:2026-07-07 12:56:59}前端页面访问rootecs-46b1-0002:~# curl -s http://127.0.0.1:5000/ | head -5!DOCTYPE htmlhtmllangzh-CNheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleTodo App · 待办事项/title4.3 测试结果汇总接口方法测试数据结果状态码/api/todosPOST{title:学习AtomCode}创建成功201/api/todosPOST{title:写博客参赛}创建成功201/api/todosGET-返回2条记录200/api/todos/1PUT{completed:true}更新成功200/GET-返回HTML页面200全部接口测试通过功能完整可用。五、开发效率分析5.1 时间对比开发方式预计耗时说明纯手工开发2-3 小时设计API、写后端、写前端、调试使用 AI 辅助IDE 插件1-2 小时逐文件生成需要频繁交互AtomCode Headless约 2 分钟一行命令全栈项目一次性生成5.2 代码质量评估维度评分说明代码规范9/10符合 PEP 8类型注解docstring 齐全安全性9/10参数化查询防注入输入验证可维护性8/10结构清晰但可进一步拆分模块UI 设计9/10渐变背景、毛玻璃卡片、响应式功能完整性10/10CRUD 全覆盖前端后端一体六、使用技巧分享6.1 Prompt 编写建议好的 Prompt 是高质量代码生成的关键# ✅ 好的 Prompt具体、明确、列出需求atomcode-p创建一个完整的待办事项Web应用包含1)前端HTML页面(含CSS和JS) 2)后端Python Flask API 3)SQLite数据库 4)增删改查功能 5)漂亮的UI界面。创建所有文件-y# ❌ 差的 Prompt太模糊atomcode-p写一个todo应用-y6.2 Headless 模式参数atomcode-pprompt-y# 自动确认无需交互atomcode-pprompt-y-v# 详细输出模式atomcode-pprompt-y--providerprovider# 指定模型atomcode-pprompt-y--modelmodel# 指定模型名6.3 多机配置同步如果在多台服务器上使用只需同步~/.atomcode/目录下的配置文件即可# 需要同步的文件~/.atomcode/auth.toml# 认证信息~/.atomcode/config.toml# 模型配置~/.atomcode/codingplan_sync.json# Token 同步七、总结这次实战让我深刻体会到 AtomCode 在实际项目开发中的价值效率革命从设计到实现2 分钟生成全栈项目传统方式至少需要 2 小时质量可靠生成的代码包含参数化查询、输入验证、错误处理安全性有保障零成本免费 Token 开源工具个人开发者和小团队完全够用Headless 友好一行命令完成所有工作完美适配 CI/CD 流程AtomCode 不是简单的代码补全工具而是一个能理解需求、设计架构、生成完整项目的 AI 编码代理。对于快速原型开发、MVP 搭建、学习新技术栈它都是极佳的选择。活动信息「码动四季」征文活动夏季主题——「玩转 AtomCode」AtomCode 官网https://atomcode.atomgit.comAtomCode 源码https://atomgit.com/atomgit_atomcode/atomcode