Django 基础教程

Django 查询

Django 展示数据

Django Admin

Django 模板

Django 表单组件

Django 高级

Django FAQ

django前端套用现成模板


实现 Django 前端套用现成模板有多种方式。在这里,我将列出几种常见的方式,并为每种方式提供简要的标题和示例代码来说明它们的用法。

使用 Django 自带的模板引擎

Django 自带了一个强大的模板引擎,可用于渲染 HTML 模板。首先,在 Django 项目的设置中启用模板引擎,并指定模板的文件夹路径。然后,在视图函数中使用 render 函数来渲染模板并返回给用户。

# settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

# views.py
from django.shortcuts import render

def my_view(request):
    context = {'name': 'John Doe'}
    return render(request, 'my_template.html', context)

使用第三方前端框架

您可以使用流行的前端框架(如 Bootstrap、Materialize 等)来设计您的前端,并在 Django 中将这些框架的资源文件(CSS、JavaScript 等)引入到模板中。这样可以快速构建漂亮的用户界面。

首先,将前端框架的资源文件下载到您的项目中,并在模板中使用 static 模板标签引入这些资源。

<!-- templates/my_template.html -->
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
    <h1>Hello, {{ name }}</h1>
    <!-- Your content here -->
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>

使用前端模板引擎

除了 Django 自带的模板引擎外,您还可以使用前端模板引擎(如 Handlebars、Mustache 等),在前端渲染模板。在这种情况下,Django 只提供数据,而模板渲染由前端负责。

首先,在前端引入相应的模板引擎库。然后,在视图函数中返回 JSON 数据,由前端模板引擎根据数据渲染页面。

# views.py
from django.http import JsonResponse

def my_view(request):
    data = {'name': 'Jane Smith'}
    return JsonResponse(data)
<!-- templates/my_template.html -->
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <!-- Include your front-end template engine library here -->
    <script src="{% static 'js/handlebars.min.js' %}"></script>
</head>
<body>
    <h1>Hello, {{ name }}</h1>
    <!-- Your front-end template here -->
    <script type="text/x-handlebars-template" id="my-template">
        <h1>Hello, {{ name }}</h1>
    </script>
    <script>
        // Fetch data from the backend and render the template
        fetch('/api/my-view/')
            .then(response => response.json())
            .then(data => {
                const template = document.getElementById('my-template').innerHTML;
                const compiledTemplate = Handlebars.compile(template);
                document.body.innerHTML = compiledTemplate(data);
            });
    </script>
</body>
</html>

以上是几种常见的在 Django 中套用现成前端模板的方法。您可以根据项目的需求和前端技术栈选择适合您的方式。

Django的Admin界面是一个强大且可定制的后台管理界面,你可以通过定制Admin模板来改变其外观和行为。py`中进行设置:###Dja ...
以下是一些可以与Django结合使用的前端框架,并附上简要的解释:React.Material-UI:优势在于实现了时尚的MaterialD ...
DjangoTemplateEngine:Django自带的模板引擎,允许你在HTML中嵌入Python代码。jQuery是一个广泛使用的J ...
适合Django的前端框架有:BootstrapBulmaSemanticUIMaterializeCSSFoundation具体解释:Bo ...
前端框架搭配Django可以使用以下几种前端框架:Bootstrap:Bootstrap是一个流行的开源前端框架,提供了响应式布局、丰富的样 ...