使用 Bootstrap 在 Django 中查看

Question

我是一名自学成才的程序员（初学者），正在尝试编写基于注册类的视图。通过一些教程，我已经能够编写如下代码：

from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login
from django.views import generic
from django.views.generic import View
from .forms import UserForm


class UserFormView (View):
form_class = UserForm
template_name = "signup.html"

#display signup blank form
def get(self, request):
    form = self.form_class(None)
    return render(request, self.template_name, {'form': form})


#process form data
def post(self, request):
    form = self.form_class(request.POST)

    if form.is_valid():

        user = form.save(commit=False)

        #cleaned (normalized) data
        username = form.cleaned_data['username']
        password = form.cleaned_data['password']
        user.set_password(password)
        user.save()

        # Returns User objects if credentials are correct

        user = authenticate(username=username, password=password)

        if user is not None:
            login(request, user)
            return redirect("home")

    return render(request, self.template_name, {'form': form})

这是forms.py：

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


class UserForm (forms.ModelForm):
password = forms.CharField(widget=forms.PasswordInput)

class Meta:
    model = User

    fields = ['first_name', 'last_name', 'username', 'email', 'password' ]

现在，我有一个使用引导程序设计的 signup.html 页面。我现在不知道如何将我的视图集成到 html 页面。在平面 html 中使用 {{ form }} 不是在引导程序设计的页面中工作的。请帮忙

signup.html：

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" style="margin-top: 70px">
    <form role="form" method="post" action="">{% csrf_token %}
        <h2>Welcome to Artivism <small>Sign up</small></h2>
        <hr class="colorgraph" style="height: 7px; border-top: 0; background: grey; border-radius: 5px;">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-md-6">
            {% for field in form %}
                <div class="form-group">
                    <input type="text" name="first_name" id="first_name" class="form-control input-lg" placeholder="First Name" tabindex="1" value="{{User.first_name}}">
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6">
                <div class="form-group">
                    <input type="text" name="last_name" id="last_name" class="form-control input-lg" placeholder="Last Name" tabindex="2" value="{{User.last_name}}">
                </div>
            </div>
        </div>
        <div class="form-group">
            <input type="text" name="user name" id="user_name" class="form-control input-lg" placeholder="User Name" tabindex="3" value="{{User.username}}">
        </div>
        <div class="form-group">
            <input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" tabindex="4" value="{{User.email}}">
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
                <div class="form-group">
                    <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5" value="{{User.password}}">
                </div>
            </div>
        <span class="help-block">By clicking Sign Up, you agree to our Terms and that you have read our Data Use Policy, including our Cookie Use.</span>

        <hr class="colorgraph" style="height: 7px; border-top: 0; background: grey; border-radius: 5px;"">
        <div class="row">
            <div class="col-xs-12 col-md-6 col-md-offset-3"><input type="submit" value="Sign Up" class="btn btn-primary btn-block btn-lg"></div>
        </div>
    </form>
</div>

Answer 1

在您的 signup.html 页面中包含以下表格，如果它适合您，请告诉我：

<form method="post" action="{% url 'signup' %}" class="form-horizontal">
    {% csrf_token %}
    {% for field in form %}
        <div class="form-group">
            <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
            <div class="col-sm-10">
                <input class="form-control" type="{{ field.field.widget.input_type }}"
                   name="{{ field.name }}"
                   id="id_{{ field.name }}"
                   value="{{ field.value }}" >
            </div>
        </div>
    {% endfor %}
    <input type="submit" value="Sign Up" class="btn btn-primary pull-right">
</form>

在您的情况下，简单的解决方案是将您的表单输入替换为以下输入（如果您的表单字段是['first_name', 'last_name', 'username', 'email', 'password']，这应该可以工作）：

<input type="text" name="first_name" id="id_first_name" class="form-control input-lg" placeholder="First Name" tabindex="1">

<input type="text" name="last_name" id="id_last_name" class="form-control input-lg" placeholder="Last Name" tabindex="2">

<input type="text" name="username" id="id_username" class="form-control input-lg" placeholder="Username" tabindex="3">

<input type="email" name="email" id="id_email" class="form-control input-lg" placeholder="Email Address" tabindex="4">

<input type="password" name="password" id="id_password" class="form-control input-lg" placeholder="Password" tabindex="5">