开场白：
大家好，我是你们的老朋友，一个每天都在和 Bug 斗智斗勇的全栈程序员。今天我要带大家玩点高级的——用 Django Ninja 开发后端接口，再用我之前写的“万能 API 工具”来调用这些接口。无论你是前端还是后端，这篇文章都会让你收获满满！
正文：
1. 为什么选择 Django Ninja？
Django Ninja 是一个基于 Django 的快速 API 框架，它的特点是：
- 速度快：比 Django REST Framework 更轻量。
- 类型安全：支持 Pydantic 模型，接口定义更清晰。
- 开发效率高：代码简洁，功能强大。
如果你还没用过 Django Ninja，那今天就是入坑的最佳时机！
2. 项目搭建：从 0 到 1
首先，我们需要安装 Django 和 Django Ninja：
pip install django django-ninja
然后，创建一个 Django 项目和一个应用：
django-admin startproject myproject
cd myproject
python manage.py startapp myapp
在 myapp 中，我们开始编写 API 接口。
3. 编写 Django Ninja 接口
Django Ninja 的接口定义非常简洁。以下是一些常见的接口场景：
场景 1：简单的 GET 请求
from ninja import NinjaAPI
from django.http import JsonResponse
api = NinjaAPI()
@api.get("/hello")
def hello(request):
return {"message": "Hello, World!"}
场景 2：带路径参数的 GET 请求
@api.get("/user/{user_id}")
def get_user(request, user_id: int):
return {"user_id": user_id, "name": "John Doe"}
场景 3：带查询参数的 GET 请求
@api.get("/items")
def get_items(request, page: int = 1, limit: int = 10):
return {"page": page, "limit": limit, "items": ["item1", "item2"]}
场景 4：POST 请求（带请求体）
from pydantic import BaseModel
class ItemModel(BaseModel):
name: str
description: str = None
price: float
@api.post("/items")
def create_item(request, item: ItemModel):
return {"item": item.dict()}
场景 5：PUT 请求（更新数据）
@api.put("/items/{item_id}")
def update_item(request, item_id: int, item: ItemModel):
return {"item_id": item_id, "updated_item": item.dict()}
场景 6：DELETE 请求
@api.delete("/items/{item_id}")
def delete_item(request, item_id: int):
return {"message": f"Item {item_id} deleted"}
场景 7：文件上传
@api.post("/upload")
def upload_file(request, file: UploadedFile):
return {"filename": file.name, "size": file.size}
4. 用万能 API 工具调用接口
接下来，我们用之前写的万能 API 工具来调用这些接口。
初始化 API 客户端
const api = new Api('http://127.0.0.1:8000/api');
调用 GET 请求
// 调用 /hello
api.get('/hello')
.then(data => console.log(data))
.catch(error => console.error(error));
// 调用 /user/123
api.get('/user/123')
.then(data => console.log(data))
.catch(error => console.error(error));
// 调用 /items?page=2&limit=5
api.get('/items', { page: 2, limit: 5 })
.then(data => console.log(data))
.catch(error => console.error(error));
调用 POST 请求
// 调用 /items
api.post('/items', { name: 'Laptop', description: 'A powerful laptop', price: 999.99 })
.then(data => console.log(data))
.catch(error => console.error(error));
调用 PUT 请求
// 调用 /items/123
api.put('/items/123', { name: 'Updated Laptop', price: 1099.99 })
.then(data => console.log(data))
.catch(error => console.error(error));
调用 DELETE 请求
// 调用 /items/123
api.delete('/items/123')
.then(data => console.log(data))
.catch(error => console.error(error));
调用文件上传接口
// 假设有一个文件输入框 <input type="file" id="fileInput">
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
api.request('/upload', 'POST', formData, 'include', 10000, 3, false, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then(data => console.log(data))
.catch(error => console.error(error));
5. 总结：前后端联调的终极指南
通过 Django Ninja，我们可以快速开发出高效、类型安全的 API 接口；而通过万能 API 工具，我们可以轻松调用这些接口，处理各种复杂的网络请求场景。无论是 GET、POST、PUT、DELETE，还是文件上传，这套组合都能完美应对！
结尾：
如果你觉得这篇文章对你有帮助，别忘了点赞、转发、打赏！你的支持是我持续分享的动力！
求关注、求转发、求打赏！你们的支持是我最大的动力！
互动话题：
你在前后端联调中遇到过哪些问题？欢迎在评论区分享你的故事！
