使用 Bootstrap 在 Django 中查看
Posted
技术标签:
【中文标题】使用 Bootstrap 在 Django 中查看【英文标题】:Sign up View in Django with Bootsrap 【发布时间】:2016-09-02 14:12:54 【问题描述】:我是一名自学成才的程序员(初学者),正在尝试编写基于注册类的视图。通过一些教程,我已经能够编写如下代码:
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>
【问题讨论】:
抱歉,它不是基于登录类的查看其基于注册类的视图。 我确定 form 将在引导设计页面上工作,请添加您的模板代码 我已经添加了html页面。 【参考方案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">
【讨论】:
是的,如果我按原样添加 html 代码,这是可行的。但是,我应该如何将它集成到我现在在我的问题中添加的当前 html 页面中。谢谢! 请查看编辑后的回复,让我知道它是否适合您。以上是关于使用 Bootstrap 在 Django 中查看的主要内容,如果未能解决你的问题,请参考以下文章
python测试开发django-120.bootstrap-table表格添加操作按钮(查看/修改/删除)
python测试开发django-138.Bootstrap 字体图标(Glyphicons)
django-bootstrap4|django 加载popper.min.js失败
Django-bootstrap3|在Django中快速使用Bootstrap模版