Inertia.js Django 适配器使用教程

Inertia.js Django 适配器使用教程

inertia-django The Django adapter for Inertia.js 项目地址: https://gitcode.com/gh_mirrors/in/inertia-django

1. 项目介绍

Inertia.js Django 适配器是一个用于将 Django 后端与 Inertia.js 前端框架结合的开源项目。Inertia.js 允许你使用 Vue、React 或 Svelte 等现代前端框架来构建单页应用（SPA），同时仍然利用 Django 作为后端。通过 Inertia.js，你可以从前端直接渲染页面，而无需担心 API 的复杂性。

2. 项目快速启动

2.1 安装依赖

首先，通过 pip 安装 inertia-django 包：

pip install inertia-django

2.2 配置 Django 项目

在 Django 项目的 settings.py 文件中，添加 inertia 到 INSTALLED_APPS 和 MIDDLEWARE：

INSTALLED_APPS = [
    # django apps
    'inertia',
    # your project's apps
]

MIDDLEWARE = [
    # django middleware
    'inertia.middleware.InertiaMiddleware',
    # your project's middleware
]

2.3 配置 Inertia.js

在 settings.py 中配置 Inertia.js 的相关设置：

INERTIA_VERSION = '1.0'  # 默认值为 '1.0'
INERTIA_LAYOUT = 'layout.html'  # 必需，没有默认值
INERTIA_JSON_ENCODER = 'inertia.utils.InertiaJsonEncoder'  # 默认值为 inertia.utils.InertiaJsonEncoder
INERTIA_SSR_URL = 'http://localhost:13714'  # 默认值为 http://localhost:13714
INERTIA_SSR_ENABLED = False  # 默认值为 False

2.4 创建视图

在 Django 视图中使用 Inertia.js 渲染页面：

from inertia.views import render_inertia

def example_view(request):
    return render_inertia(request, 'ExampleComponent', props={'name': 'Brandon'})

2.5 前端配置

在前端项目中，确保你已经安装了 Inertia.js 和相应的适配器（如 @inertiajs/inertia-vue3），并配置好 Inertia 的初始化代码。

3. 应用案例和最佳实践

3.1 应用案例

Inertia.js Django 适配器适用于需要使用现代前端框架（如 Vue、React 或 Svelte）构建单页应用的 Django 项目。例如，一个电子商务网站可以使用 Inertia.js 来实现流畅的用户体验，同时利用 Django 强大的后端功能。

3.2 最佳实践

• 懒加载数据：使用 Inertia.js 的 lazy 函数来延迟加载数据，以提高页面加载速度。
• SSR 支持：如果需要，可以启用 SSR（服务器端渲染）来提高 SEO 和首屏加载速度。
• 自定义 JSON 编码器：根据项目需求，自定义 JSON 编码器以处理特定的数据类型。

4. 典型生态项目

• Django Svelte Template：一个演示如何将 Django 与 Svelte 结合使用的模板项目。
• Inertia.js 官方文档：详细介绍了 Inertia.js 的使用方法和最佳实践。
• Django REST Framework：虽然 Inertia.js 不需要 API，但在某些场景下，结合 DRF 可以提供更灵活的解决方案。

通过以上步骤，你可以快速上手并使用 Inertia.js Django 适配器来构建现代化的单页应用。

inertia-django The Django adapter for Inertia.js 项目地址: https://gitcode.com/gh_mirrors/in/inertia-django