1. Django 首页接入 AI 时，Key 到底该放哪
做 Django 项目首页的时候，很多人第一步就卡在「AI 接口的 Key 放哪里」。你可能会想，直接写死在views.py里不就行了？本地跑通没问题，但一旦要提交代码、换环境、或者前端也要调一次，Key 就散落在好几个地方，改一次要翻半天。更麻烦的是，首页往往既有 Django 模板渲染，又有前端front/src里的 JS 逻辑，两边都想调 AI，Key 和接口地址各写一份，联调时对不上号。
这篇就聚焦这个场景：Django 项目首页要接 AI 能力，怎么用一套统一的 Key 和 API 通道，把后端settings.json、前端config.toml以及首页接口调用串起来。适合正在本地开发、准备联调首页 AI 请求的同学。我会给出可直接复制的配置骨架，演示用 TaoToken 的统一 Key 完成首页接口调用，再附上curl验证和常见报错排查。目标很明确：一次配置，首页 AI 请求跑通。
先说清楚 TaoToken 在这里的角色。它是一个统一的模型 API 通道，你申请一个 Key，就能通过同一个入口调用不同模型，不用为每个模型单独记一套地址和密钥。对 Django 首页这种「后端要调、前端也可能要调」的场景，统一 Key 能省掉很多对不齐的麻烦。官网入口是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 地址是 https://taotoken.net/api ，注意 API 这个地址不带 UTM 参数，配置里填的就是它。
2. 前置准备：拿到统一 Key 并理清首页调用链
在动手改 Django 之前，先把 Key 和调用链理清楚。首页的 AI 请求通常有两条路径：一条是 Django 后端视图里调，比如首页要展示一段 AI 生成的推荐语；另一条是前端front/src里的 JS 直接调，比如搜索框的实时补全。两条路径如果各配各的 Key，联调时最容易出现「后端通了前端 401」的情况。用统一 Key 的思路是：Key 只存一份，后端通过环境变量读，前端通过构建时的配置注入，两边指向同一个 API 地址。
第一步，去控制台创建一个 API Key。打开 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，在 API Keys 页面新建一个 Key，复制出来先存到本地一个临时文件里，别直接贴进代码。如果你还没想好调哪个模型，可以先去模型对话页面试试效果，地址是 https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，选一个适合首页文案或搜索补全的模型，记下模型名，后面配置里要用。
第二步，确认你的 Django 项目结构。按你 excerpt 里的结构，模板在templates/news/index.html，前端样式和脚本在front/src下，共享的header.scss、footer.scss通过@import引入。AI 接口配置要同时照顾到 Django 的settings和前端构建配置，所以我会分别给出settings.json和config.toml的骨架。这里的settings.json可以理解成你项目里存放运行时配置的文件（比如放在项目根目录或config/下），config.toml则是前端构建工具读取的配置。两者都从环境变量或本地未提交的文件里读 Key，避免硬编码。
注意：Key 不要提交到 Git。建议在项目根目录建一个
.env或local_settings.json，并把它加进.gitignore。下面骨架里用占位符YOUR_TAOTOKEN_KEY表示，你替换成自己的即可。
3. 可复制配置：settings.json 与 config.toml 骨架
先看后端侧的settings.json。这个文件放在 Django 项目能读到的地方，比如config/settings.json，然后在settings.py里加载。它的作用是集中管理 AI 接口的地址、Key 和默认模型，首页视图直接从这里取，不用在代码里散落字符串。
{ "ai": { "base_url": "https://taotoken.net/api", "api_key": "YOUR_TAOTOKEN_KEY", "default_model": "你的模型名", "timeout": 30, "homepage": { "enable": true, "prompt_template": "请为首页生成一句简短的欢迎语，风格轻松" } } }在settings.py里加载它，并暴露成 Django 配置：
import json from pathlib import Path BASE_DIR = Path(__file__).resolve().parent.parent with open(BASE_DIR / "config" / "settings.json", "r", encoding="utf-8") as f: AI_CONFIG = json.load(f)["ai"] TAOTOKEN_BASE_URL = AI_CONFIG["base_url"] TAOTOKEN_API_KEY = AI_CONFIG["api_key"] TAOTOKEN_DEFAULT_MODEL = AI_CONFIG["default_model"]再看前端侧的config.toml。前端构建工具（比如你用的 gulp 或 vite）读取这个文件，把 API 地址和 Key 注入到front/src的代码里。注意前端注入 Key 只适合本地联调，生产环境应该走后端代理，别把 Key 暴露到浏览器。
[ai] base_url = "https://taotoken.net/api" api_key = "YOUR_TAOTOKEN_KEY" default_model = "你的模型名" [homepage] enable = true search_suggest = true前端读取时，可以在front/src/config.js里做一层封装：
// front/src/config.js const aiConfig = { baseUrl: process.env.AI_BASE_URL || "https://taotoken.net/api", apiKey: process.env.AI_API_KEY || "", defaultModel: process.env.AI_DEFAULT_MODEL || "你的模型名", }; export default aiConfig;这样后端和前端都指向同一个base_url，Key 也来自同一处，联调时不会再出现地址对不上的问题。首页的 Django 视图可以这样调：
import requests from django.conf import settings from django.shortcuts import render def index(request): ai_text = "" if settings.AI_CONFIG["homepage"]["enable"]: resp = requests.post( f"{settings.TAOTOKEN_BASE_URL}/v1/chat/completions", headers={ "Authorization": f"Bearer {settings.TAOTOKEN_API_KEY}", "Content-Type": "application/json", }, json={ "model": settings.TAOTOKEN_DEFAULT_MODEL, "messages": [ {"role": "user", "content": settings.AI_CONFIG["homepage"]["prompt_template"]} ], }, timeout=settings.AI_CONFIG["timeout"], ) if resp.status_code == 200: ai_text = resp.json()["choices"][0]["message"]["content"] return render(request, "news/index.html", {"ai_text": ai_text})模板templates/news/index.html里直接渲染：
<div class="homepage-ai"> <p>{{ ai_text }}</p> </div>样式可以复用你front/src/css/index.scss里的写法，比如给这个区块加padding: 20px; font-size: 14px; line-height: 50px;，让它和首页其他模块视觉一致。共享的header.scss、footer.scss继续用@import "footer.scss";引入，不用因为加了 AI 区块就改结构。
4. 验证请求：curl 跑通再进 Django
配置写完别急着启动 Django，先用curl单独验证 Key 和接口通不通。这一步能帮你把「Key 错」「地址错」「模型名错」三类问题提前排掉，省得在 Django 日志里翻半天。
curl -X POST https://taotoken.net/api/v1/chat/completions \ -H "Authorization: Bearer YOUR_TAOTOKEN_KEY" \ -H "Content-Type: application/json" \ -d '{ "model": "你的模型名", "messages": [ {"role": "user", "content": "用一句话介绍 Django 首页"} ] }'如果返回里能看到choices数组，并且message.content有内容，说明 Key、地址、模型名三者都对。这时候再启动 Django：
python manage.py runserver打开首页，看homepage-ai区块有没有渲染出 AI 文案。如果curl通了但 Django 首页没内容，大概率是settings.json没被正确加载，或者视图里的enable是false。可以在视图里临时打印settings.TAOTOKEN_BASE_URL和settings.TAOTOKEN_DEFAULT_MODEL确认。
前端侧验证时，可以在front/src里写一个临时函数，调用同一个base_url，确认浏览器控制台没有 401。如果前端报跨域，说明你直接从前端调了 API，这时候要么在后端加一个代理视图，要么在本地开发时配置代理转发。生产环境建议统一走后端，别让 Key 出现在浏览器里。
提示：
curl验证时如果返回 401，先检查 Key 有没有多余空格；返回 404，检查base_url后面有没有多拼/v1；返回模型不存在，去模型对话页面确认模型名拼写。
5. 本篇常见错排查
第一个高频错是settings.json路径不对。Django 的BASE_DIR指向的是manage.py所在目录，如果你把settings.json放在别处，open就会报FileNotFoundError。解决办法是把文件放到BASE_DIR / "config"下，或者用绝对路径先跑通再改相对路径。
第二个错是前端config.toml没被构建工具读取。你 excerpt 里用的是 gulp，gulp 默认不会自动读config.toml，需要在gulpfile.js里显式加载，比如用toml包解析后注入process.env。如果没注入，front/src/config.js里的process.env.AI_API_KEY就是undefined，请求自然失败。
第三个错是首页模板里ai_text为空但没报错。这通常是resp.status_code不是 200，但代码里只处理了 200 分支。建议在else里打印resp.status_code和resp.text，把真实错误暴露出来。常见的是超时，把timeout从 30 调到 60 再试。
第四个错是@import顺序导致样式覆盖。你首页新增的 AI 区块样式如果写在index.scss里，但header.scss或footer.scss在后面@import，可能被覆盖。把 AI 区块的样式放在最后引入，或者提高选择器优先级。
第五个错是 Key 泄露。如果你把settings.json提交到了 Git，赶紧去控制台吊销这个 Key 重新生成。本地开发用.env或未跟踪的local_settings.json，生产环境用环境变量注入。
6. 把首页 AI 请求固定成一套配置
走到这里，Django 首页的 AI 接口应该已经能跑通了。回头看，核心就三件事：Key 只存一份，后端settings.json和前端config.toml指向同一个base_url，首页视图和前端脚本都从配置里取，不硬编码。这样换模型、换环境、联调时都不会再对不上号。
如果你后面要把这套配置用到长期编码或 Agent 场景，比如首页之外还要接代码补全、自动化任务，可以看看 Coding Plan，地址是 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，它更适合需要持续调用模型的开发流程。接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，里面有针对不同语言和框架的调用示例，遇到参数不确定的时候翻一下比猜快。API Keys 管理还是回到 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，需要新增或吊销 Key 都在这里操作。
最后留一个我踩过的坑：首页 AI 请求别放在模板渲染的同步流程里做重试，一旦模型响应慢，整个首页都会卡住。可以先把 AI 文案缓存起来，或者用异步任务生成后写进缓存，首页只读缓存。这样首页加载速度不受模型波动影响，联调时也更容易定位问题。
