繁体   English   中英

Django Crispy_Form 无法在 HTML 中呈现

[英]Django Crispy_Form unable to render in HTML

我一直在线关注文档/视频,似乎无法让我的表单呈现,如果有人能解释我做错了什么,我会很高兴:我的目标是让表单呈现

这是我的代码:

视图.py

我根据请求类型处理了这两种情况,并且没有将 else 块留空。 定义了表单,别忘了重定向

from django.shortcuts import render, redirect
from django.contrib import messages
from .forms import UserRegisterForm


def register(request):
    if request.method == 'POST':
        form = UserRegisterForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            messages.success(request, f'Account created for {username}!')
            return redirect('')
    else:
        form = UserRegisterForm()
    return render(request, 'register.html', {'form': form})

forms.py

从现有的 Django Forms 定义一个表单并包含所有必要的字段

from django import forms
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm


class UserRegisterForm(UserCreationForm):
    email = forms.EmailField()

    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

寄存器.html

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
    <form method="POST">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">Join Today</legend>
            {{ form |crispy }}
        </fieldset>
        <div class="form-group">
            <button class="btn btn-outline-info" type="submit">Sign Up</button>
        </div>
    </form>
    <div class="border-top pt-3">
        <small class="text-muted">
            Already Have An Account? <a class="ml-2" href="#">Sign In</a>
        </small>
    </div>
</div>
{% endblock content %}

底座.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Q&A Learning Center {% block title %}{% endblock %}</title>
</head>
<body>
<div></div>
<header>
    <!-- NavBar -->
    {% include 'partials/_navbar.html' %}
    <div class="container">
        <div class="row">
            <div class="col-md-6 m-auto">
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>
</header>

</body>
</html>

主应用程序 urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('', include('pages.urls')),
    path('admin/', admin.site.urls),
]

页面\urls.py

从 django.urls 导入路径

从。 导入视图

urlpatterns = [
    path('', views.index, name='index'),
    path('about/', views.about, name='about'),
    path('register/', views.register, name='register'),
]

页面\views.py

def register(request):
    return render(request, 'users/register.html')

设置.py

INSTALLED_APPS = [
    'users.apps.UsersConfig',
    'crispy_forms',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_mysql',
]
CRISPY_TEMPLATE_PACK = 'bootstrap4'

我在网站上得到的结果

在 Chrome 和 Firefox 上试过

显然你的空间很小。

改变这个。

{{ form |crispy }}

为了这。

{{ form|crispy }}

更正表单 meta class 中的行:

fields = ['username', 'email', 'password1', 'password2']

对此:

fields = ('username', 'email', 'password1', 'password2')

我设法让表单呈现。 我不确定具体是什么解决方案,但我改变的是; 我已将 register.urls 作为具有自己的 url 的独立应用程序放在主 urls 文件中,并正确路由到 register.html 然后它工作。 还更改了 base.html 我认为我显示网站内容的位置也有错误

这是更新的代码:

myApp.urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('', include('pages.urls')),
    path('', include('users.urls')),
    path('admin/', admin.site.urls),
]

用户.urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('register/', views.register, name='register'),
]

users.views.py

from django.shortcuts import render, redirect
from django.contrib import messages
from .forms import UserRegisterForm


def register(request):
    if request.method == 'POST':
        form = UserRegisterForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('index/')
    else:
        form = UserRegisterForm()
    return render(request, 'users/register.html', {
        'form': form
    })

底座.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Q&A Learning Center</title>
</head>
<body>
<nav>
    {% include 'partials/_navbar.html' %}
</nav>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

users.templates.users.register.html

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-8">
        <div class="card">
            <div class="card-body">
                <h2>Sign Up</h2>
                <form method="post">
                    {% csrf_token %}
                    {{ form|crispy }}
                    <button type="submit" class="btn btn-primary">Sign up</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM