拓冰网站定制 
1. 从零构建完整 App 到底难在哪前端后端数据库 UI 设计全链路拆解很多人第一次听到“从零构建一个完整 App”脑子里浮现的是几千行代码、十几个文件夹、一堆看不懂的配置文件。其实真正卡住新手的不是代码量而是不知道一个 App 的骨架到底由哪几块拼起来以及每块之间怎么“对上暗号”。我试过把全栈开发拆成四个抽屉前端负责“长什么样、点了有什么反应”后端负责“数据从哪来、逻辑怎么算”数据库负责“东西存哪、怎么取”UI 设计负责“为什么这样摆、用户看不看得懂”。这四个抽屉各司其职但必须用一条数据线串起来这条线就是 API。这篇内容聚焦全栈 App 开发入门用一个最小可运行示例把前端界面、后端接口、数据库建模、UI 设计四个环节串成一条线。你会拿到可复制的项目目录结构、各层示例代码片段、本地启动验证步骤最后再演示怎么通过 TaoToken 统一 Key 和 API 通道给这个 App 接上 AI 能力。目标很明确跑通你的第一个完整 App 骨架而不是停留在“Hello World”层面。适合谁看如果你已经会一点 JavaScript能看懂const和function但从来没把前后端连起来跑通过那这篇就是写给你的。如果你已经写过页面但不知道数据怎么存、接口怎么设计同样适用。整篇不堆概念每一步都有命令、有代码、有验证方式跟着敲就能看到结果。先看最终要跑通的效果手机或浏览器上显示一个用户列表列表数据来自本地后端接口后端从数据库读取数据库里预置了几条用户记录。再加一个按钮点击后调用 AI 接口生成一句欢迎语显示在页面上。听起来简单但这条链路覆盖了全栈开发 80% 的日常操作。项目目录结构先定下来后面所有代码都往这个骨架里填my-fullstack-app/ ├── backend/ │ ├── app.js │ ├── models/ │ │ └── User.js │ ├── routes/ │ │ └── users.js │ └── package.json ├── frontend/ │ ├── App.js │ ├── components/ │ │ └── UserList.js │ └── package.json └── README.md这个结构不复杂但每一层都有明确归属。backend 管数据和接口frontend 管界面和交互两边通过 HTTP 请求通信。数据库用 MongoDB因为它的文档模型对新手友好不需要提前建表。前端用 React Native一套代码能跑在手机和网页上。UI 设计不单独开文件夹而是体现在组件的样式和布局里后面会具体说。2. TaoToken 统一 API 接入前置准备Key、Base URL 与模型 ID 三件套在给 App 接 AI 能力之前先把 TaoToken 的接入信息准备好。TaoToken 是一个统一 API 通道你不需要分别去对接多家模型服务用一个 Key 和统一的 Base URL 就能调用不同模型。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 地址后面不加 UTM 参数。接入任何 AI 能力本质上就是三件套Base URL、API Key、Model ID。这三样东西缺一不可而且必须配套使用。Base URL 告诉你的代码往哪里发请求API Key 证明你有权限Model ID 指定你要用哪个模型。很多人第一次接入失败不是代码写错了而是这三件套里有一个对不上。先拿 Key。打开 https://taotoken.net/api-keys 登录后创建一个新的 API Key。创建时建议给 Key 起一个能认出来的名字比如fullstack-demo方便后面管理。创建完成后立刻复制保存因为页面刷新后完整 Key 不会再显示。这个 Key 就是后面代码里要填的TAOTOKEN_API_KEY。Base URL 固定用https://taotoken.net/api不要自己加斜杠或路径。Model ID 根据你要用的模型来填比如gpt-4o-mini或claude-3-5-sonnet这类常见标识。具体可用模型列表可以在 https://taotoken.net/doc 查看文档里会列出当前支持的模型和对应的 ID 写法。把这三件套写进后端的环境变量里不要硬编码在代码中。在backend/目录下新建.env文件TAOTOKEN_API_KEYsk-你的实际Key TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_MODELgpt-4o-mini然后在backend/package.json里加上dotenv依赖让 Node.js 能读取这个文件。这样做的原因是Key 属于敏感信息写死在代码里一旦提交到 Git 就会泄露。用环境变量隔离本地开发和线上部署可以换不同的 Key代码本身不用改。如果你用的是 Claude Code 这类编码工具接入方式略有不同。Claude Code 需要配置ANTHROPIC_BASE_URL和ANTHROPIC_API_KEYBase URL 同样指向 TaoToken 的 API 地址Key 用刚才创建的。具体配置可以参考 https://taotoken.net/doc 里的 Claude Code 接入章节。Cline MCP 和 Codex 的auth.json也是类似逻辑核心都是把 Base URL 指向 TaoTokenKey 填进去Model ID 选对。这里要提醒一点TaoToken 是统一 API 通道不是让你绕过什么限制而是把多家模型的调用方式统一成一套接口。你仍然需要遵守各模型的使用规范。接入前确认你的使用场景符合要求不要拿它去做违规的事情。三件套准备好之后先别急着写 App 代码用一条 curl 命令验证 Key 能不能用curl https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -d { model: gpt-4o-mini, messages: [{role: user, content: 说一句你好}] }如果返回里有choices字段和正常内容说明 Key 和 Base URL 都对。如果返回 401说明 Key 有问题如果返回 404检查 Base URL 是不是写成了https://taotoken.net/api/v1之外的其他路径。这一步验证通过后面接进 App 就只是把同样的请求逻辑搬到代码里。3. 可复制配置后端 Express Mongoose TaoToken 完整代码这一节把后端完整写出来包括数据库模型、用户接口、AI 接口三部分。所有代码都可以直接复制到对应文件里运行。先初始化后端项目mkdir -p my-fullstack-app/backend cd my-fullstack-app/backend npm init -y npm install express mongoose dotenv cors node-fetchcors是为了让前端跨域访问后端接口node-fetch用来在后端调用 TaoToken 的 API。装完之后package.json里加上启动脚本{ scripts: { start: node app.js } }数据库模型文件models/User.jsconst mongoose require(mongoose); const UserSchema new mongoose.Schema({ name: { type: String, required: true }, email: { type: String, required: true, unique: true }, createdAt: { type: Date, default: Date.now } }); module.exports mongoose.model(User, UserSchema);这个模型定义了三个字段name、email、createdAt。required表示必填unique表示邮箱不能重复default表示创建时自动填当前时间。Mongoose 会根据这个 Schema 在 MongoDB 里生成对应的集合你不需要手动建表。用户路由文件routes/users.jsconst express require(express); const router express.Router(); const User require(../models/User); router.get(/, async (req, res) { try { const users await User.find().sort({ createdAt: -1 }); res.json(users); } catch (error) { res.status(500).json({ message: error.message }); } }); router.post(/, async (req, res) { try { const user new User({ name: req.body.name, email: req.body.email }); const saved await user.save(); res.status(201).json(saved); } catch (error) { res.status(400).json({ message: error.message }); } }); module.exports router;这里有两个接口GET /users返回所有用户按创建时间倒序POST /users创建新用户。注意try/catch不能省数据库操作可能失败捕获后返回错误信息比直接崩溃好排查。AI 路由文件routes/ai.jsconst express require(express); const router express.Router(); const fetch require(node-fetch); router.post(/greet, async (req, res) { const { name } req.body; try { const response await fetch(${process.env.TAOTOKEN_BASE_URL}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${process.env.TAOTOKEN_API_KEY} }, body: JSON.stringify({ model: process.env.TAOTOKEN_MODEL, messages: [ { role: system, content: 你是一个友好的助手用一句话回复。 }, { role: user, content: 给用户 ${name} 写一句欢迎语 } ] }) }); const data await response.json(); if (!data.choices || !data.choices[0]) { return res.status(502).json({ message: AI 返回格式异常, raw: data }); } res.json({ greeting: data.choices[0].message.content }); } catch (error) { res.status(500).json({ message: error.message }); } }); module.exports router;这个接口接收用户名调用 TaoToken 的 chat completions 接口把模型返回的第一条消息内容取出来返回给前端。注意这里检查了data.choices是否存在因为如果 Key 无效或模型 ID 写错返回的结构会不一样直接取choices[0]会报Cannot read properties of undefined。主文件app.js把所有部分串起来require(dotenv).config(); const express require(express); const mongoose require(mongoose); const cors require(cors); const usersRouter require(./routes/users); const aiRouter require(./routes/ai); const app express(); const port 3000; app.use(cors()); app.use(express.json()); app.use(/users, usersRouter); app.use(/ai, aiRouter); app.get(/, (req, res) { res.send(Backend is running); }); mongoose.connect(mongodb://127.0.0.1:27017/fullstack_demo) .then(() { console.log(MongoDB connected); app.listen(port, () { console.log(Server is running on port ${port}); }); }) .catch((err) { console.error(MongoDB connection failed:, err.message); });启动前确认本地 MongoDB 已经运行。如果用 Docker一条命令拉起来docker run -d --name mongo-demo -p 27017:27017 mongo:7然后启动后端npm start看到MongoDB connected和Server is running on port 3000就说明后端起来了。这时候可以用 curl 测一下用户接口curl -X POST http://localhost:3000/users \ -H Content-Type: application/json \ -d {name:张三,email:zhangsanexample.com}再查一下curl http://localhost:3000/users应该能看到刚才插入的用户。AI 接口也测一下curl -X POST http://localhost:3000/ai/greet \ -H Content-Type: application/json \ -d {name:张三}如果返回里有greeting字段和一句欢迎语说明 TaoToken 接入成功。这一步是整个链路里最容易出问题的环节下一节专门讲验证和排错。4. 验证请求与成功结果前端 React Native 调用后端接口后端跑通之后前端就简单了因为所有复杂逻辑都在后端处理完了。前端只做两件事展示用户列表、调用 AI 接口显示欢迎语。先初始化前端项目cd my-fullstack-app npx create-expo-app frontend cd frontend npm installExpo 是 React Native 的脚手架能让你不配置原生环境就跑起来。创建完成后把App.js替换成下面内容import React, { useState, useEffect } from react; import { View, Text, FlatList, Button, StyleSheet, ActivityIndicator } from react-native; const API_BASE http://localhost:3000; export default function App() { const [users, setUsers] useState([]); const [greeting, setGreeting] useState(); const [loading, setLoading] useState(true); useEffect(() { fetch(${API_BASE}/users) .then((res) res.json()) .then((data) { setUsers(data); setLoading(false); }) .catch((err) { console.error(加载用户失败:, err); setLoading(false); }); }, []); const handleGreet async () { try { const res await fetch(${API_BASE}/ai/greet, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ name: 新用户 }) }); const data await res.json(); setGreeting(data.greeting || 没有返回内容); } catch (err) { setGreeting(请求失败: err.message); } }; if (loading) { return ( View style{styles.center} ActivityIndicator sizelarge / /View ); } return ( View style{styles.container} Text style{styles.title}用户列表/Text FlatList data{users} keyExtractor{(item) item._id} renderItem{({ item }) ( View style{styles.card} Text style{styles.name}{item.name}/Text Text style{styles.email}{item.email}/Text /View )} / Button title生成欢迎语 onPress{handleGreet} / {greeting ? Text style{styles.greeting}{greeting}/Text : null} /View ); } const styles StyleSheet.create({ container: { flex: 1, padding: 20, paddingTop: 60, backgroundColor: #f5f5f5 }, center: { flex: 1, justifyContent: center, alignItems: center }, title: { fontSize: 24, fontWeight: bold, marginBottom: 16 }, card: { backgroundColor: #fff, padding: 16, borderRadius: 8, marginBottom: 12 }, name: { fontSize: 18, fontWeight: 600 }, email: { fontSize: 14, color: #666, marginTop: 4 }, greeting: { marginTop: 16, fontSize: 16, color: #2a7 } });这段代码里useEffect在组件加载时请求用户列表handleGreet在按钮点击时请求 AI 欢迎语。FlatList负责渲染列表StyleSheet定义样式。UI 设计就体现在这些样式里卡片式布局、圆角、浅灰背景、绿色欢迎语都是为了让界面看起来不那么“裸”。启动前端npx expo start按提示用手机扫码或者在浏览器里打开。如果是在浏览器里跑注意localhost指向的是你电脑本机后端也在本机所以能通。如果是在真机上跑localhost指向手机会失败需要把API_BASE改成电脑的局域网 IP比如http://192.168.1.100:3000。成功的话你会看到用户列表显示出来点击“生成欢迎语”按钮下面会出现一句 AI 生成的欢迎语。整个链路就通了前端请求后端后端查数据库返回用户列表后端调 TaoToken 返回 AI 内容前端展示结果。这里有个细节值得说为什么 AI 请求要放在后端而不是前端直接调因为 API Key 不能暴露在前端代码里。前端代码是公开的任何人打开开发者工具都能看到。把 Key 放在后端前端只调自己的后端接口Key 就不会泄露。这是接入任何第三方 API 的基本原则。5. 本篇常见错排查401、local proxy failed、reading choices 与 OAuth 报错这一节把接入过程中最容易遇到的几个报错列出来对照着排查。这些错误我都实际遇到过原因和解法都验证过。401 Unauthorized最常见意思是 Key 无效或没带上。检查三件事.env文件里TAOTOKEN_API_KEY是不是完整复制了有没有多余空格请求头里Authorization是不是Bearer开头注意 Bearer 后面有一个空格Key 是不是已经过期或被删除。如果用的是 Claude Code检查ANTHROPIC_API_KEY环境变量有没有生效可以在终端里echo $ANTHROPIC_API_KEY确认。local proxy failed这个报错通常出现在本地开发环境意思是请求发不出去。原因可能是 Base URL 写错了比如写成了https://taotoken.net/api/带了尾部斜杠或者写成了http而不是https。另一个可能是本地网络环境有特殊配置导致请求被拦截。检查TAOTOKEN_BASE_URL是不是严格等于https://taotoken.net/api不要加任何多余字符。Cannot read properties of undefined (reading choices)这个报错说明返回的数据结构里没有choices字段。原因通常是模型 ID 写错了或者请求体格式不对。检查TAOTOKEN_MODEL是不是文档里列出的有效模型 ID检查messages数组是不是至少有一条消息role和content字段有没有拼错。可以在后端把data打印出来看实际返回了什么const data await response.json(); console.log(AI raw response:, JSON.stringify(data, null, 2));OAuth 相关报错如果你用的是 Claude Code 或 Codex 这类工具可能会遇到 OAuth 认证失败。这类工具默认走官方 OAuth 流程接入 TaoToken 时需要改成 API Key 模式。Claude Code 里设置ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY后它会优先用 API Key 而不是 OAuth。Codex 的auth.json里要把OPENAI_API_KEY和OPENAI_BASE_URL都填上Base URL 指向 TaoToken。Cline MCP 的配置里同样需要 Base URL、Key、Model ID 三件套齐全缺一个都会报认证错误。MongoDB connection failed后端启动时报这个说明连不上数据库。检查 MongoDB 有没有启动端口是不是 27017。如果用 Dockerdocker ps看一下容器在不在运行。连接字符串mongodb://127.0.0.1:27017/fullstack_demo里的127.0.0.1不要写成localhost某些环境下localhost会解析到 IPv6 导致连接失败。前端请求跨域失败浏览器控制台报 CORS 错误。检查后端有没有app.use(cors())这行必须在路由注册之前。如果是在真机上跑检查API_BASE是不是用了局域网 IP 而不是localhost。FlatList 不显示数据接口返回了数据但列表是空的。检查keyExtractor返回的字段是不是唯一MongoDB 的_id是对象类型直接当 key 可能有问题可以改成item._id.toString()。另外检查renderItem里取的字段名和数据库里的是否一致。排查的核心思路是先确认后端接口单独能通用 curl 测再确认前端能请求到后端看浏览器 Network 面板最后确认 AI 接口返回结构正确打印原始响应。一层一层往下查不要跳步。6. 语义一致 CTA把 AI 能力接进你的下一个 App这个最小可运行示例跑通之后你已经有了一个完整的 App 骨架前端展示、后端接口、数据库存储、UI 样式、AI 能力接入。接下来可以在这个骨架上加功能比如用户注册登录、数据分页、图片上传、多模型切换。每加一个功能都是往对应的抽屉里放东西不会打乱整体结构。如果你想把 AI 能力接进更多场景比如让 App 支持对话、代码生成、文档总结可以直接用同一套 TaoToken 三件套。模型对话功能可以在 https://taotoken.net/models 体验不同模型的效果找到适合你场景的那个。长期做编码或 Agent 类项目的话Coding Plan 会更划算具体在 https://taotoken.net/coding-plan 看。接入文档在 https://taotoken.net/doc 里面有各语言和各工具的详细配置示例。Key 管理在 https://taotoken.net/api-keys 可以创建多个 Key 分别用于不同项目。最后给一个实用建议把.env文件加进.gitignore永远不要提交到仓库。如果 Key 不小心泄露了立刻去控制台删除重新创建。本地开发用一套 Key线上部署用另一套方便出问题时快速定位和隔离。这套骨架不复杂但足够你跑通第一个完整 App剩下的就是往里面填业务逻辑了。 从零构建一个完整App：前端、后端、数据库与UI设计全链路代码示例（含TaoToken统一API接入）
1. 从零构建完整 App 到底难在哪前端后端数据库 UI 设计全链路拆解很多人第一次听到“从零构建一个完整 App”脑子里浮现的是几千行代码、十几个文件夹、一堆看不懂的配置文件。其实真正卡住新手的不是代码量而是不知道一个 App 的骨架到底由哪几块拼起来以及每块之间怎么“对上暗号”。我试过把全栈开发拆成四个抽屉前端负责“长什么样、点了有什么反应”后端负责“数据从哪来、逻辑怎么算”数据库负责“东西存哪、怎么取”UI 设计负责“为什么这样摆、用户看不看得懂”。这四个抽屉各司其职但必须用一条数据线串起来这条线就是 API。这篇内容聚焦全栈 App 开发入门用一个最小可运行示例把前端界面、后端接口、数据库建模、UI 设计四个环节串成一条线。你会拿到可复制的项目目录结构、各层示例代码片段、本地启动验证步骤最后再演示怎么通过 TaoToken 统一 Key 和 API 通道给这个 App 接上 AI 能力。目标很明确跑通你的第一个完整 App 骨架而不是停留在“Hello World”层面。适合谁看如果你已经会一点 JavaScript能看懂const和function但从来没把前后端连起来跑通过那这篇就是写给你的。如果你已经写过页面但不知道数据怎么存、接口怎么设计同样适用。整篇不堆概念每一步都有命令、有代码、有验证方式跟着敲就能看到结果。先看最终要跑通的效果手机或浏览器上显示一个用户列表列表数据来自本地后端接口后端从数据库读取数据库里预置了几条用户记录。再加一个按钮点击后调用 AI 接口生成一句欢迎语显示在页面上。听起来简单但这条链路覆盖了全栈开发 80% 的日常操作。项目目录结构先定下来后面所有代码都往这个骨架里填my-fullstack-app/ ├── backend/ │ ├── app.js │ ├── models/ │ │ └── User.js │ ├── routes/ │ │ └── users.js │ └── package.json ├── frontend/ │ ├── App.js │ ├── components/ │ │ └── UserList.js │ └── package.json └── README.md这个结构不复杂但每一层都有明确归属。backend 管数据和接口frontend 管界面和交互两边通过 HTTP 请求通信。数据库用 MongoDB因为它的文档模型对新手友好不需要提前建表。前端用 React Native一套代码能跑在手机和网页上。UI 设计不单独开文件夹而是体现在组件的样式和布局里后面会具体说。2. TaoToken 统一 API 接入前置准备Key、Base URL 与模型 ID 三件套在给 App 接 AI 能力之前先把 TaoToken 的接入信息准备好。TaoToken 是一个统一 API 通道你不需要分别去对接多家模型服务用一个 Key 和统一的 Base URL 就能调用不同模型。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 地址后面不加 UTM 参数。接入任何 AI 能力本质上就是三件套Base URL、API Key、Model ID。这三样东西缺一不可而且必须配套使用。Base URL 告诉你的代码往哪里发请求API Key 证明你有权限Model ID 指定你要用哪个模型。很多人第一次接入失败不是代码写错了而是这三件套里有一个对不上。先拿 Key。打开 https://taotoken.net/api-keys 登录后创建一个新的 API Key。创建时建议给 Key 起一个能认出来的名字比如fullstack-demo方便后面管理。创建完成后立刻复制保存因为页面刷新后完整 Key 不会再显示。这个 Key 就是后面代码里要填的TAOTOKEN_API_KEY。Base URL 固定用https://taotoken.net/api不要自己加斜杠或路径。Model ID 根据你要用的模型来填比如gpt-4o-mini或claude-3-5-sonnet这类常见标识。具体可用模型列表可以在 https://taotoken.net/doc 查看文档里会列出当前支持的模型和对应的 ID 写法。把这三件套写进后端的环境变量里不要硬编码在代码中。在backend/目录下新建.env文件TAOTOKEN_API_KEYsk-你的实际Key TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_MODELgpt-4o-mini然后在backend/package.json里加上dotenv依赖让 Node.js 能读取这个文件。这样做的原因是Key 属于敏感信息写死在代码里一旦提交到 Git 就会泄露。用环境变量隔离本地开发和线上部署可以换不同的 Key代码本身不用改。如果你用的是 Claude Code 这类编码工具接入方式略有不同。Claude Code 需要配置ANTHROPIC_BASE_URL和ANTHROPIC_API_KEYBase URL 同样指向 TaoToken 的 API 地址Key 用刚才创建的。具体配置可以参考 https://taotoken.net/doc 里的 Claude Code 接入章节。Cline MCP 和 Codex 的auth.json也是类似逻辑核心都是把 Base URL 指向 TaoTokenKey 填进去Model ID 选对。这里要提醒一点TaoToken 是统一 API 通道不是让你绕过什么限制而是把多家模型的调用方式统一成一套接口。你仍然需要遵守各模型的使用规范。接入前确认你的使用场景符合要求不要拿它去做违规的事情。三件套准备好之后先别急着写 App 代码用一条 curl 命令验证 Key 能不能用curl https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -d { model: gpt-4o-mini, messages: [{role: user, content: 说一句你好}] }如果返回里有choices字段和正常内容说明 Key 和 Base URL 都对。如果返回 401说明 Key 有问题如果返回 404检查 Base URL 是不是写成了https://taotoken.net/api/v1之外的其他路径。这一步验证通过后面接进 App 就只是把同样的请求逻辑搬到代码里。3. 可复制配置后端 Express Mongoose TaoToken 完整代码这一节把后端完整写出来包括数据库模型、用户接口、AI 接口三部分。所有代码都可以直接复制到对应文件里运行。先初始化后端项目mkdir -p my-fullstack-app/backend cd my-fullstack-app/backend npm init -y npm install express mongoose dotenv cors node-fetchcors是为了让前端跨域访问后端接口node-fetch用来在后端调用 TaoToken 的 API。装完之后package.json里加上启动脚本{ scripts: { start: node app.js } }数据库模型文件models/User.jsconst mongoose require(mongoose); const UserSchema new mongoose.Schema({ name: { type: String, required: true }, email: { type: String, required: true, unique: true }, createdAt: { type: Date, default: Date.now } }); module.exports mongoose.model(User, UserSchema);这个模型定义了三个字段name、email、createdAt。required表示必填unique表示邮箱不能重复default表示创建时自动填当前时间。Mongoose 会根据这个 Schema 在 MongoDB 里生成对应的集合你不需要手动建表。用户路由文件routes/users.jsconst express require(express); const router express.Router(); const User require(../models/User); router.get(/, async (req, res) { try { const users await User.find().sort({ createdAt: -1 }); res.json(users); } catch (error) { res.status(500).json({ message: error.message }); } }); router.post(/, async (req, res) { try { const user new User({ name: req.body.name, email: req.body.email }); const saved await user.save(); res.status(201).json(saved); } catch (error) { res.status(400).json({ message: error.message }); } }); module.exports router;这里有两个接口GET /users返回所有用户按创建时间倒序POST /users创建新用户。注意try/catch不能省数据库操作可能失败捕获后返回错误信息比直接崩溃好排查。AI 路由文件routes/ai.jsconst express require(express); const router express.Router(); const fetch require(node-fetch); router.post(/greet, async (req, res) { const { name } req.body; try { const response await fetch(${process.env.TAOTOKEN_BASE_URL}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${process.env.TAOTOKEN_API_KEY} }, body: JSON.stringify({ model: process.env.TAOTOKEN_MODEL, messages: [ { role: system, content: 你是一个友好的助手用一句话回复。 }, { role: user, content: 给用户 ${name} 写一句欢迎语 } ] }) }); const data await response.json(); if (!data.choices || !data.choices[0]) { return res.status(502).json({ message: AI 返回格式异常, raw: data }); } res.json({ greeting: data.choices[0].message.content }); } catch (error) { res.status(500).json({ message: error.message }); } }); module.exports router;这个接口接收用户名调用 TaoToken 的 chat completions 接口把模型返回的第一条消息内容取出来返回给前端。注意这里检查了data.choices是否存在因为如果 Key 无效或模型 ID 写错返回的结构会不一样直接取choices[0]会报Cannot read properties of undefined。主文件app.js把所有部分串起来require(dotenv).config(); const express require(express); const mongoose require(mongoose); const cors require(cors); const usersRouter require(./routes/users); const aiRouter require(./routes/ai); const app express(); const port 3000; app.use(cors()); app.use(express.json()); app.use(/users, usersRouter); app.use(/ai, aiRouter); app.get(/, (req, res) { res.send(Backend is running); }); mongoose.connect(mongodb://127.0.0.1:27017/fullstack_demo) .then(() { console.log(MongoDB connected); app.listen(port, () { console.log(Server is running on port ${port}); }); }) .catch((err) { console.error(MongoDB connection failed:, err.message); });启动前确认本地 MongoDB 已经运行。如果用 Docker一条命令拉起来docker run -d --name mongo-demo -p 27017:27017 mongo:7然后启动后端npm start看到MongoDB connected和Server is running on port 3000就说明后端起来了。这时候可以用 curl 测一下用户接口curl -X POST http://localhost:3000/users \ -H Content-Type: application/json \ -d {name:张三,email:zhangsanexample.com}再查一下curl http://localhost:3000/users应该能看到刚才插入的用户。AI 接口也测一下curl -X POST http://localhost:3000/ai/greet \ -H Content-Type: application/json \ -d {name:张三}如果返回里有greeting字段和一句欢迎语说明 TaoToken 接入成功。这一步是整个链路里最容易出问题的环节下一节专门讲验证和排错。4. 验证请求与成功结果前端 React Native 调用后端接口后端跑通之后前端就简单了因为所有复杂逻辑都在后端处理完了。前端只做两件事展示用户列表、调用 AI 接口显示欢迎语。先初始化前端项目cd my-fullstack-app npx create-expo-app frontend cd frontend npm installExpo 是 React Native 的脚手架能让你不配置原生环境就跑起来。创建完成后把App.js替换成下面内容import React, { useState, useEffect } from react; import { View, Text, FlatList, Button, StyleSheet, ActivityIndicator } from react-native; const API_BASE http://localhost:3000; export default function App() { const [users, setUsers] useState([]); const [greeting, setGreeting] useState(); const [loading, setLoading] useState(true); useEffect(() { fetch(${API_BASE}/users) .then((res) res.json()) .then((data) { setUsers(data); setLoading(false); }) .catch((err) { console.error(加载用户失败:, err); setLoading(false); }); }, []); const handleGreet async () { try { const res await fetch(${API_BASE}/ai/greet, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ name: 新用户 }) }); const data await res.json(); setGreeting(data.greeting || 没有返回内容); } catch (err) { setGreeting(请求失败: err.message); } }; if (loading) { return ( View style{styles.center} ActivityIndicator sizelarge / /View ); } return ( View style{styles.container} Text style{styles.title}用户列表/Text FlatList data{users} keyExtractor{(item) item._id} renderItem{({ item }) ( View style{styles.card} Text style{styles.name}{item.name}/Text Text style{styles.email}{item.email}/Text /View )} / Button title生成欢迎语 onPress{handleGreet} / {greeting ? Text style{styles.greeting}{greeting}/Text : null} /View ); } const styles StyleSheet.create({ container: { flex: 1, padding: 20, paddingTop: 60, backgroundColor: #f5f5f5 }, center: { flex: 1, justifyContent: center, alignItems: center }, title: { fontSize: 24, fontWeight: bold, marginBottom: 16 }, card: { backgroundColor: #fff, padding: 16, borderRadius: 8, marginBottom: 12 }, name: { fontSize: 18, fontWeight: 600 }, email: { fontSize: 14, color: #666, marginTop: 4 }, greeting: { marginTop: 16, fontSize: 16, color: #2a7 } });这段代码里useEffect在组件加载时请求用户列表handleGreet在按钮点击时请求 AI 欢迎语。FlatList负责渲染列表StyleSheet定义样式。UI 设计就体现在这些样式里卡片式布局、圆角、浅灰背景、绿色欢迎语都是为了让界面看起来不那么“裸”。启动前端npx expo start按提示用手机扫码或者在浏览器里打开。如果是在浏览器里跑注意localhost指向的是你电脑本机后端也在本机所以能通。如果是在真机上跑localhost指向手机会失败需要把API_BASE改成电脑的局域网 IP比如http://192.168.1.100:3000。成功的话你会看到用户列表显示出来点击“生成欢迎语”按钮下面会出现一句 AI 生成的欢迎语。整个链路就通了前端请求后端后端查数据库返回用户列表后端调 TaoToken 返回 AI 内容前端展示结果。这里有个细节值得说为什么 AI 请求要放在后端而不是前端直接调因为 API Key 不能暴露在前端代码里。前端代码是公开的任何人打开开发者工具都能看到。把 Key 放在后端前端只调自己的后端接口Key 就不会泄露。这是接入任何第三方 API 的基本原则。5. 本篇常见错排查401、local proxy failed、reading choices 与 OAuth 报错这一节把接入过程中最容易遇到的几个报错列出来对照着排查。这些错误我都实际遇到过原因和解法都验证过。401 Unauthorized最常见意思是 Key 无效或没带上。检查三件事.env文件里TAOTOKEN_API_KEY是不是完整复制了有没有多余空格请求头里Authorization是不是Bearer开头注意 Bearer 后面有一个空格Key 是不是已经过期或被删除。如果用的是 Claude Code检查ANTHROPIC_API_KEY环境变量有没有生效可以在终端里echo $ANTHROPIC_API_KEY确认。local proxy failed这个报错通常出现在本地开发环境意思是请求发不出去。原因可能是 Base URL 写错了比如写成了https://taotoken.net/api/带了尾部斜杠或者写成了http而不是https。另一个可能是本地网络环境有特殊配置导致请求被拦截。检查TAOTOKEN_BASE_URL是不是严格等于https://taotoken.net/api不要加任何多余字符。Cannot read properties of undefined (reading choices)这个报错说明返回的数据结构里没有choices字段。原因通常是模型 ID 写错了或者请求体格式不对。检查TAOTOKEN_MODEL是不是文档里列出的有效模型 ID检查messages数组是不是至少有一条消息role和content字段有没有拼错。可以在后端把data打印出来看实际返回了什么const data await response.json(); console.log(AI raw response:, JSON.stringify(data, null, 2));OAuth 相关报错如果你用的是 Claude Code 或 Codex 这类工具可能会遇到 OAuth 认证失败。这类工具默认走官方 OAuth 流程接入 TaoToken 时需要改成 API Key 模式。Claude Code 里设置ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY后它会优先用 API Key 而不是 OAuth。Codex 的auth.json里要把OPENAI_API_KEY和OPENAI_BASE_URL都填上Base URL 指向 TaoToken。Cline MCP 的配置里同样需要 Base URL、Key、Model ID 三件套齐全缺一个都会报认证错误。MongoDB connection failed后端启动时报这个说明连不上数据库。检查 MongoDB 有没有启动端口是不是 27017。如果用 Dockerdocker ps看一下容器在不在运行。连接字符串mongodb://127.0.0.1:27017/fullstack_demo里的127.0.0.1不要写成localhost某些环境下localhost会解析到 IPv6 导致连接失败。前端请求跨域失败浏览器控制台报 CORS 错误。检查后端有没有app.use(cors())这行必须在路由注册之前。如果是在真机上跑检查API_BASE是不是用了局域网 IP 而不是localhost。FlatList 不显示数据接口返回了数据但列表是空的。检查keyExtractor返回的字段是不是唯一MongoDB 的_id是对象类型直接当 key 可能有问题可以改成item._id.toString()。另外检查renderItem里取的字段名和数据库里的是否一致。排查的核心思路是先确认后端接口单独能通用 curl 测再确认前端能请求到后端看浏览器 Network 面板最后确认 AI 接口返回结构正确打印原始响应。一层一层往下查不要跳步。6. 语义一致 CTA把 AI 能力接进你的下一个 App这个最小可运行示例跑通之后你已经有了一个完整的 App 骨架前端展示、后端接口、数据库存储、UI 样式、AI 能力接入。接下来可以在这个骨架上加功能比如用户注册登录、数据分页、图片上传、多模型切换。每加一个功能都是往对应的抽屉里放东西不会打乱整体结构。如果你想把 AI 能力接进更多场景比如让 App 支持对话、代码生成、文档总结可以直接用同一套 TaoToken 三件套。模型对话功能可以在 https://taotoken.net/models 体验不同模型的效果找到适合你场景的那个。长期做编码或 Agent 类项目的话Coding Plan 会更划算具体在 https://taotoken.net/coding-plan 看。接入文档在 https://taotoken.net/doc 里面有各语言和各工具的详细配置示例。Key 管理在 https://taotoken.net/api-keys 可以创建多个 Key 分别用于不同项目。最后给一个实用建议把.env文件加进.gitignore永远不要提交到仓库。如果 Key 不小心泄露了立刻去控制台删除重新创建。本地开发用一套 Key线上部署用另一套方便出问题时快速定位和隔离。这套骨架不复杂但足够你跑通第一个完整 App剩下的就是往里面填业务逻辑了。