1. 从零搭一个前后端分离项目为什么我选 Cursor django-ninja Expo如果你正在找一个能真正跑起来的前后端分离项目模板并且希望用 Cursor 把后端 API 和前端 App 一次性串起来那这篇内容就是为你写的。我会用 django-ninja 做后端接口用 Expo React Native 做跨平台前端再通过 TaoToken 的统一 Key 把模型调用集中管理起来。整套流程我实际跑过一遍从建项目到前后端联调成功中间踩的坑都会写出来。先说清楚这套组合能做什么。django-ninja 是一个基于 Django 的快速 API 框架写法接近 FastAPI自带 OpenAPI 文档非常适合让 Cursor 理解接口结构。Expo 则是 React Native 的上层封装你不用配 Android Studio 或 Xcode 就能在手机和浏览器里预览界面。而 TaoToken 在这里的角色是统一模型入口——后端需要调用大模型能力时不用在每个服务里散落不同的 Key而是走同一个 API 通道。适合谁看有 Python 基础、想尝试 AI 辅助编程的开发者做过一点前端、想用 React Native 快速出 App 的人以及已经在用 Cursor 但还没把它和真实项目工作流结合起来的同学。整篇内容按可跟做的步骤组织配置文件和命令都可以直接复制。2. TaoToken 前置准备统一 Key 与 API 通道在开始写业务代码之前先把模型调用的通道准备好。TaoToken 提供统一的 API 入口后端 django-ninja 里如果要加 AI 能力比如生成摘要、对话接口直接走这个通道就行不用分别对接多家模型。你需要先拿到一个 API Key。打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册后在控制台里创建 Key。控制台地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 进去之后找到 API Keys 页面新建一个复制出来保存好。API 的基础地址是 https://taotoken.net/api 注意这个地址不带任何查询参数直接作为 base_url 使用。如果你用的是 OpenAI 兼容的 SDK把 base_url 指向它、api_key 填你申请到的 Key 就能调用。注意Key 只显示一次复制后存到环境变量里不要硬编码进代码提交到仓库。对于长期做编码和 Agent 任务的场景可以了解一下 Coding Plan地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 它更适合高频调用模型辅助写代码的用法。如果你只是想先验证模型能不能通可以直接用模型对话页面 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 试一条消息。3. 可复制配置settings.json、config.toml 与 Cursor 规则文件这一节是整篇的核心把后端、前端、Cursor 三边的配置骨架都给你。先建目录结构mkdir aigallery cd aigallery mkdir backend frontend3.1 后端 django-ninja 的 settings 关键片段安装依赖pip install django django-ninja django-cors-headers pyjwt pillow python-dotenv创建项目django-admin startproject backend ./backend cd backend python manage.py startapp appUser python manage.py startapp appGallery在backend/backend/settings.py里重点改这几处。CORS 必须开否则 Expo 前端请求会被浏览器拦INSTALLED_APPS [ django.contrib.admin, django.contrib.auth, django.contrib.contenttypes, django.contrib.sessions, django.contrib.messages, django.contrib.staticfiles, corsheaders, ninja, appUser, appGallery, ] MIDDLEWARE [ corsheaders.middleware.CorsMiddleware, django.middleware.security.SecurityMiddleware, # ... 其余保持默认 ] CORS_ALLOW_ALL_ORIGINS True # 开发阶段先全开上线前收紧 import os TAOTOKEN_API_KEY os.getenv(TAOTOKEN_API_KEY, ) TAOTOKEN_BASE_URL https://taotoken.net/api把 Key 写进.env文件不要写进 settingsTAOTOKEN_API_KEY你的Key3.2 后端调用 TaoToken 的封装在appGallery下新建services/llm.pyimport os from openai import OpenAI client OpenAI( api_keyos.getenv(TAOTOKEN_API_KEY), base_urlhttps://taotoken.net/api, ) def chat(prompt: str) - str: resp client.chat.completions.create( modelgpt-4o-mini, messages[{role: user, content: prompt}], ) return resp.choices[0].message.content3.3 Cursor 规则文件片段在项目根目录建.cursor/rules/project.mdc让 Cursor 理解你的技术栈和约定--- description: 前后端分离项目规则 globs: [backend/**/*.py, frontend/**/*.tsx] --- - 后端使用 django-ninjaAPI 定义在 api.pyschema 定义在 schema.py - 每个 Django App 独立负责一个模块模型之间不建外键关联 - 前端使用 Expo expo-router页面放在 app/ 目录 - 网络请求统一走 utils/api.ts不要在各页面直接 fetch - 模型调用统一走 TaoTokenbase_url 为 https://taotoken.net/api3.4 前端 Expo 的 config.toml 与 API 封装创建前端项目npx create-expo-applatest frontend cd frontendExpo 用app.json或app.config.ts管理配置如果你用 EAS 构建会涉及eas.json。这里给一个app.config.ts的关键片段把后端地址注入环境变量import type { ExpoConfig } from expo/config; const config: ExpoConfig { name: aigallery, slug: aigallery, extra: { apiBase: process.env.API_BASE ?? http://127.0.0.1:8000, }, }; export default config;前端统一请求封装utils/api.tsimport Constants from expo-constants; const base Constants.expoConfig?.extra?.apiBase ?? http://127.0.0.1:8000; export async function requestT(path: string, options: RequestInit {}): PromiseT { const res await fetch(${base}${path}, { headers: { Content-Type: application/json, ...(options.headers || {}) }, ...options, }); if (!res.ok) throw new Error(HTTP ${res.status}); return res.json() as PromiseT; }4. 启动前后端并联调验证接口连通性配置写完了现在把两边跑起来验证接口真的能通。后端启动cd backend python manage.py makemigrations python manage.py migrate python manage.py runserver 0.0.0.0:8000注意用0.0.0.0这样手机上的 Expo 才能访问到你电脑的局域网 IP。启动后访问http://127.0.0.1:8000/api/docs应该能看到 django-ninja 自动生成的 OpenAPI 文档。前端启动cd frontend npx expo start终端会出一个二维码手机装 Expo Go 扫码就能预览。如果你在浏览器里按w会打开 web 版本。现在写一个最简单的接口来验证连通。在appGallery/api.pyfrom ninja import Router from .services.llm import chat router Router() router.get(/ping) def ping(request): return {status: ok} router.post(/echo) def echo(request, text: str): return {reply: chat(text)}在backend/urls.py注册from django.contrib import admin from django.urls import path from ninja import NinjaAPI from appGallery.api import router as gallery_router api NinjaAPI() api.add_router(/gallery, gallery_router) urlpatterns [ path(admin/, admin.site.urls), path(api/, api.urls), ]前端页面里调用import { useEffect, useState } from react; import { Text, View } from react-native; import { request } from ../utils/api; export default function Home() { const [msg, setMsg] useState(); useEffect(() { request{ status: string }(/api/gallery/ping) .then((d) setMsg(d.status)) .catch((e) setMsg(String(e))); }, []); return ( View Text后端状态{msg}/Text /View ); }实测下来只要后端返回{status:ok}前端页面显示「后端状态ok」就说明前后端通道打通了。这一步是整个项目的地基先别急着写业务。5. 本篇常见错排查报错一前端请求 CORS 被拦。现象是浏览器控制台出现Access-Control-Allow-Origin相关错误。检查settings.py里corsheaders是否加进INSTALLED_APPSCorsMiddleware是否放在MIDDLEWARE最前面。开发阶段CORS_ALLOW_ALL_ORIGINS True最省事。报错二手机扫码后请求超时。大概率是后端只监听了127.0.0.1。改成python manage.py runserver 0.0.0.0:8000并且前端apiBase要填你电脑的局域网 IP比如http://192.168.1.10:8000不能填localhost。报错三调用模型返回 401。检查.env里的TAOTOKEN_API_KEY是否被正确加载。python-dotenv需要在settings.py顶部加load_dotenv()。另外确认base_url写的是https://taotoken.net/api不要多加斜杠或路径。报错四django-ninja 路由 404。确认api.add_router的前缀和前端请求路径一致。比如注册的是/gallery前端就要请求/api/gallery/ping少一层都会 404。报错五Expo 里 fetch 报网络错误但后端日志没请求。多半是手机和电脑不在同一局域网或者电脑防火墙拦了 8000 端口。先在同一 WiFi 下再检查防火墙规则。6. 把 Key 和接入方式固定下来项目跑通之后建议把模型调用的接入方式固定成团队约定所有后端服务统一从环境变量读 Keybase_url 统一指向 TaoToken 的 API 通道前端不直接持有 Key只调后端接口。这样后续换模型或加新能力时只改后端一处。如果你在接入过程中遇到 Key 或通道配置的问题先去 API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 确认 Key 状态再对照接入文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 检查参数格式。需要长期用模型辅助编码的话Coding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 会更合适。Claude Code 相关的接入说明在 https://taotoken.net/claude-code?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite 可以查到。最后留一个我踩过的坑Cursor 在生成 django-ninja 的 schema 时偶尔会把Schema和ModelSchema混用导致序列化字段对不上。遇到这种情况直接把schema.py和对应的models.py一起丢给 Cursor让它对照字段逐个核对比反复描述问题快得多。