1. 从零搭 App 全栈骨架前端、后端、数据库与用户界面怎么串起来很多人第一次做 App 全栈卡的不是某个单点技术而是「前端页面、后端接口、数据库读写、用户界面」这四块怎么拼成一个能跑起来的最小闭环。你可能已经看过 React Native 的 Hello World、Express 的几行服务器代码、Mongoose 的模型定义但把它们放在一个项目里启动顺序、端口、请求路径、数据格式一乱就报错。这篇给的是一个最小可运行骨架一个待办清单 App前端用 React NativeExpo 方式启动省去原生环境折腾后端用 Node.js Express数据库用 MongoDB Mongoose用户界面就是列表 输入框 按钮。同时把 TaoToken 统一 Key 接进后端让「AI 生成待办建议」这个接口一次跑通。TaoToken 是一个统一的大模型 API 通道你拿一个 Key 就能调用多种模型适合在 App 后端里做 AI 能力接入不用为每个模型单独配一套鉴权。适合谁看会一点 JavaScript、想跑通第一个全栈闭环的人或者已经会写单块代码、但没串过完整链路的人。整篇按「先跑通再优化」的思路走每一步都有可复制的命令和配置最后给自测验证和报错排查。我试过把这套骨架拆给几个刚入门的朋友他们最容易忽略的是后端要先于前端启动以及前端请求的地址不能写 localhost真机调试时 localhost 指向手机自己。这两个坑后面会专门讲。先明确目录结构这是后面所有配置的基准my-fullstack-app/ ├── backend/ │ ├── src/ │ │ ├── index.js │ │ ├── db.js │ │ ├── models/Todo.js │ │ └── routes/todo.js │ ├── .env │ └── package.json └── frontend/ ├── App.js ├── api/client.js └── package.json后端负责接口和数据库前端负责界面和请求。TaoToken 的 Key 只放在后端.env里前端永远不碰 Key这是安全底线。2. TaoToken 前置准备统一 Key 与 API 通道配置在写业务代码之前先把 TaoToken 的通道配好否则后面 AI 接口会一直 401。TaoToken 官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基础地址是 https://taotoken.net/api 这个地址不加 UTM 参数直接用于代码里的 base_url。你需要做三件事注册账号、创建 API Key、确认要用的模型 ID。登录后进控制台在 API Keys 页面新建一个 Key复制出来只显示一次丢了就重建。模型 ID 在文档的模型列表里能查到比如常见的对话模型 ID。控制台地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite API Keys 页面是 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。拿到 Key 后后端.env这样写# backend/.env PORT3000 MONGO_URImongodb://127.0.0.1:27017/fullstack_demo TAOTOKEN_API_KEYsk-你的Key TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_MODEL你的模型ID这里有个关键点TaoToken 的接口是 OpenAI 兼容格式所以后端可以直接用openai这个 npm 包只要把baseURL指向 TaoToken 的 API 地址即可。这样你不需要为 TaoToken 单独写一套 HTTP 请求逻辑省很多事。注意Key 只放后端前端通过自己的后端接口间接调用 AI。如果你把 Key 写进前端代码打包后任何人都能扒出来这是最常见的泄露方式。依赖清单后端cd backend npm init -y npm install express mongoose dotenv cors openai npm install -D nodemoncors是为了让前端跨域请求后端dotenv读.envopenai用来调 TaoToken 通道。装完后package.json里加启动脚本{ scripts: { dev: nodemon src/index.js, start: node src/index.js } }前端依赖Expo 方式npx create-expo-app frontend cd frontend npm install axiosExpo 的好处是不用装 Android Studio 或 Xcode 就能在手机 Expo Go 里预览适合快速验证全栈链路。到这里前置就绪下一节开始写可复制的配置和代码。3. 可复制配置后端接口、数据库模型与前端请求这一节是核心按「数据库 → 后端 → 前端」的顺序写每段都能直接复制。先写数据库连接backend/src/db.jsconst mongoose require(mongoose); async function connectDB() { try { await mongoose.connect(process.env.MONGO_URI); console.log(MongoDB connected); } catch (err) { console.error(MongoDB connect failed:, err.message); process.exit(1); } } module.exports connectDB;再写数据模型backend/src/models/Todo.jsconst mongoose require(mongoose); const todoSchema new mongoose.Schema({ title: { type: String, required: true }, done: { type: Boolean, default: false }, createdAt: { type: Date, default: Date.now } }); module.exports mongoose.model(Todo, todoSchema);接着写路由backend/src/routes/todo.js包含增删查和 AI 建议接口const express require(express); const router express.Router(); const Todo require(../models/Todo); const OpenAI require(openai); const client new OpenAI({ apiKey: process.env.TAOTOKEN_API_KEY, baseURL: process.env.TAOTOKEN_BASE_URL }); router.get(/, async (req, res) { const todos await Todo.find().sort({ createdAt: -1 }); res.json(todos); }); router.post(/, async (req, res) { const todo await Todo.create({ title: req.body.title }); res.status(201).json(todo); }); router.patch(/:id, async (req, res) { const todo await Todo.findByIdAndUpdate( req.params.id, { done: req.body.done }, { new: true } ); res.json(todo); }); router.post(/ai-suggest, async (req, res) { try { const completion await client.chat.completions.create({ model: process.env.TAOTOKEN_MODEL, messages: [ { role: system, content: 你是一个待办助手只输出一条简短待办。 }, { role: user, content: req.body.prompt || 给我一条今天的待办 } ] }); res.json({ suggestion: completion.choices[0].message.content }); } catch (err) { res.status(500).json({ error: err.message }); } }); module.exports router;入口backend/src/index.jsrequire(dotenv).config(); const express require(express); const cors require(cors); const connectDB require(./db); const todoRoutes require(./routes/todo); const app express(); app.use(cors()); app.use(express.json()); app.use(/api/todos, todoRoutes); const PORT process.env.PORT || 3000; connectDB().then(() { app.listen(PORT, () console.log(Server on ${PORT})); });前端请求封装frontend/api/client.jsimport axios from axios; // 真机调试时把 localhost 换成电脑局域网 IP如 192.168.1.10 const BASE_URL http://192.168.1.10:3000/api; export const getTodos () axios.get(${BASE_URL}/todos); export const addTodo (title) axios.post(${BASE_URL}/todos, { title }); export const toggleTodo (id, done) axios.patch(${BASE_URL}/todos/${id}, { done }); export const aiSuggest (prompt) axios.post(${BASE_URL}/todos/ai-suggest, { prompt });前端界面frontend/App.jsimport React, { useEffect, useState } from react; import { View, Text, TextInput, Button, FlatList, TouchableOpacity } from react-native; import { getTodos, addTodo, toggleTodo, aiSuggest } from ./api/client; export default function App() { const [todos, setTodos] useState([]); const [text, setText] useState(); const load async () setTodos((await getTodos()).data); useEffect(() { load(); }, []); const handleAdd async () { if (!text.trim()) return; await addTodo(text); setText(); load(); }; const handleAI async () { const res await aiSuggest(给我一条今天的待办); setText(res.data.suggestion); }; return ( View style{{ padding: 24, marginTop: 60 }} Text style{{ fontSize: 22, marginBottom: 12 }}我的待办/Text TextInput value{text} onChangeText{setText} placeholder输入待办 style{{ borderWidth: 1, padding: 8, marginBottom: 8 }} / Button title添加 onPress{handleAdd} / Button titleAI 建议 onPress{handleAI} / FlatList data{todos} keyExtractor{(item) item._id} renderItem{({ item }) ( TouchableOpacity onPress{() toggleTodo(item._id, !item.done).then(load)} Text style{{ padding: 8, textDecorationLine: item.done ? line-through : none }} {item.title} /Text /TouchableOpacity )} / /View ); }这套配置里TaoToken 的三件套是完整的Base URL 用https://taotoken.net/apiKey 用.env里的TAOTOKEN_API_KEYModel ID 用TAOTOKEN_MODEL。三者缺一AI 接口就会报错。4. 启动与验证接口自测和成功结果长什么样启动顺序很重要先数据库再后端最后前端。第一步确保本地 MongoDB 在跑。如果你用 Docker一条命令docker run -d -p 27017:27017 --name mongo-demo mongo:7第二步启动后端cd backend npm run dev看到MongoDB connected和Server on 3000就对了。第三步用 curl 自测接口先测数据库读写curl -X POST http://localhost:3000/api/todos \ -H Content-Type: application/json \ -d {title:写全栈骨架} curl http://localhost:3000/api/todos第二条应该返回一个数组里面有刚创建的待办带_id、title、done、createdAt。这说明前端 → 后端 → 数据库的链路通了。第四步测 TaoToken 的 AI 接口curl -X POST http://localhost:3000/api/todos/ai-suggest \ -H Content-Type: application/json \ -d {prompt:给我一条今天的待办}成功时返回类似{suggestion:整理今天的会议纪要并同步给团队}如果这一步返回了内容说明 TaoToken 统一 Key 通道接入成功后端能正常调用模型。第五步启动前端cd frontend npx expo start用手机 Expo Go 扫码或者按w在浏览器预览。界面上输入待办、点添加列表会刷新点「AI 建议」输入框会自动填入模型返回的待办。到这里前端页面、后端接口、数据库读写、用户界面四块就串成一个闭环了。提示真机调试时api/client.js里的BASE_URL必须换成电脑的局域网 IP手机和电脑要在同一个 Wi-Fi 下。用localhost手机会请求自己必然失败。验证通过后你可以把 AI 建议接口换成更复杂的 prompt比如根据已有待办生成优先级排序TaoToken 通道本身不用改只改 messages 内容即可。5. 常见报错排查401、local proxy failed、reading choices 怎么解这一节按真实报错来每个都给定位方法和修复。报错一401 Unauthorized。这是 TaoToken Key 的问题。先确认.env里TAOTOKEN_API_KEY没有多余空格或引号再确认后端启动时dotenv真的读到了可以在index.js里临时console.log(process.env.TAOTOKEN_API_KEY?.slice(0,6))。如果 Key 是对的还 401去控制台看这个 Key 是否被禁用或额度用尽。修复就是重建 Key 并更新.env重启后端。报错二local proxy failed 或连接超时。这类通常是baseURL写错。确认代码里是https://taotoken.net/api不要多加/v1或结尾斜杠。如果你在openai包里传了baseURLSDK 会自动拼/chat/completions手动加路径反而会 404。另外确认本机网络能正常访问该地址公司网络如果有出口限制换网络再试。报错三Cannot read properties of undefined (reading choices)。这说明completion.choices是 undefined通常是接口返回了错误对象而不是正常响应。把catch里的err.message打全或者打印err.response?.data就能看到真实原因多半还是 Key 或模型 ID 问题。确认TAOTOKEN_MODEL填的是文档里真实存在的模型 ID拼错一个字符就会报模型不存在。报错四MongoDB connect failed。检查MONGO_URI里的端口和容器是否在跑docker ps看mongo-demo是否 Up。如果用了127.0.0.1还连不上试试localhost某些环境解析不同。报错五前端请求 Network Error。九成是BASE_URL用了localhost。真机改成电脑局域网 IP并确认后端cors()已启用。如果还不行在电脑浏览器访问http://电脑IP:3000/api/todos能返回数据说明后端没问题问题在前端地址。报错六OAuth 相关报错。如果你在别处配过 OAuth 或 Claude Code 之类的工具注意 TaoToken 的 Key 是 API Key 模式不走 OAuth 流程。把鉴权方式统一成Authorization: Bearer Key不要混用。排查顺序建议先 curl 后端接口再 curl AI 接口最后才看前端。这样能快速定位是数据库、TaoToken 通道还是前端请求的问题。6. 把骨架用起来下一步接什么、Key 怎么管跑通之后这个骨架可以往几个方向长。第一把 AI 建议接口做成「根据当前待办列表生成今日计划」prompt 里带上todos的内容TaoToken 通道不用动。第二加用户体系用 JWT 做登录Todo 模型加userId字段接口按用户过滤。第三把前端从 Expo 切到正式打包或者换成 Flutter后端接口完全不用改这就是前后端分离的好处。Key 管理上长期项目建议用 Coding Plan 这类方案来统一管理调用额度地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 适合需要持续调用模型的场景。如果你只是想先验证模型效果可以直接在模型对话页面试地址是 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 遇到接口细节问题先查文档。最后给一个实用技巧把.env加进.gitignore永远不要提交 Key。团队协作时每个人用自己的 Key通过环境变量注入代码里只留process.env.TAOTOKEN_API_KEY。这样既安全也方便换 Key 不用改代码。骨架跑通只是开始真正省时间的是把配置和密钥管理规范化后面加功能才不会乱。