1. Django 首页接入 AI 时Key 到底该放哪做 Django 项目首页的时候很多人第一步就卡在「AI 接口的 Key 放哪里」。你可能会想直接写死在views.py里不就行了本地跑通没问题但一旦要提交代码、换环境、或者前端也要调一次Key 就散落在好几个地方改一次要翻半天。更麻烦的是首页往往既有 Django 模板渲染又有前端front/src里的 JS 逻辑两边都想调 AIKey 和接口地址各写一份联调时对不上号。这篇就聚焦这个场景Django 项目首页要接 AI 能力怎么用一套统一的 Key 和 API 通道把后端settings.json、前端config.toml以及首页接口调用串起来。适合正在本地开发、准备联调首页 AI 请求的同学。我会给出可直接复制的配置骨架演示用 TaoToken 的统一 Key 完成首页接口调用再附上curl验证和常见报错排查。目标很明确一次配置首页 AI 请求跑通。先说清楚 TaoToken 在这里的角色。它是一个统一的模型 API 通道你申请一个 Key就能通过同一个入口调用不同模型不用为每个模型单独记一套地址和密钥。对 Django 首页这种「后端要调、前端也可能要调」的场景统一 Key 能省掉很多对不齐的麻烦。官网入口是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_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_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 在 API Keys 页面新建一个 Key复制出来先存到本地一个临时文件里别直接贴进代码。如果你还没想好调哪个模型可以先去模型对话页面试试效果地址是 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_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, encodingutf-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_urlKey 也来自同一处联调时不会再出现地址对不上的问题。首页的 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: fBearer {settings.TAOTOKEN_API_KEY}, Content-Type: application/json, }, json{ model: settings.TAOTOKEN_DEFAULT_MODEL, messages: [ {role: user, content: settings.AI_CONFIG[homepage][prompt_template]} ], }, timeoutsettings.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 classhomepage-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、地址、模型名三者都对。这时候再启动 Djangopython 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 里用的是 gulpgulp 默认不会自动读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_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 它更适合需要持续调用模型的开发流程。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 里面有针对不同语言和框架的调用示例遇到参数不确定的时候翻一下比猜快。API Keys 管理还是回到 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 需要新增或吊销 Key 都在这里操作。最后留一个我踩过的坑首页 AI 请求别放在模板渲染的同步流程里做重试一旦模型响应慢整个首页都会卡住。可以先把 AI 文案缓存起来或者用异步任务生成后写进缓存首页只读缓存。这样首页加载速度不受模型波动影响联调时也更容易定位问题。
