使用Django注册平面UI模板

时间:2014-01-14 07:01:41

标签: django django-templates django-registration

我使用Flat UI为注册页面创建了模板设计。现在我想使用Django注册来注册用户。我已经调整了各种资源,但是它们非常复杂并且使用Django内置的形式来创建表单。

我需要简单的步骤,我可以遵循

signup.html (归属/ django的/ mysite的/模板)

{% extends "base.html" %}


{% block title %}Signup page{% endblock %}


 {% block content %}


  <div class="container" style="width:500px">
  <h3 style="margin-top:100px">Sign Up</h3> 
  <hr>
  <div class="login-form">

    <form action="" method="post">
        <div class="control-group span3" style="width:400px" >
          <input type="text"  value="" placeholder="Enter your name" id="name" style="width:400px;padding-bottom:15px;margin-bottom:10px" >
          <i class="input-icon fui-user" for="login-name"></i>
        </div>

        <div class="control-group span3" style="width:400px" >
          <input type="text"  value="" placeholder="Your E-mail" id="email" style="width:400px;padding-bottom:15px;margin-bottom:10px" >
          <i class="input-icon fui-mail" for="login-name"></i>
        </div>

        <div class="control-group span3" style="width:400px">
          <input type="password" value="" placeholder="Password" id="pass" style="width:400px;padding-bottom:15px;margin-bottom:10px">
          <i class="input-icon fui-lock" for="login-pass"></i>
        </div>


        <div class="control-group span3" style="width:400px">
          <input type="password"  value="" placeholder="Confirm Password" id="login-pass" style="width:400px;padding-bottom:15px;margin-bottom:10px">
          <i class="input-icon fui-lock" for="login-pass"></i>
        </div>

        <div style="text-align:center"> 
        <a class="btn btn-hg btn-primary btn-wide" href="#">Sign Up</a>
        <!--<a class="login-link" href="#">Lost your password ?</a> -->
        </div>
    </form>

  </div><!-- /login-form -->

  </div> <!-- /container -->


 {% endblock content %}

views.py

def signup(request):

  return render(request, 'signup.html')

urls.py

urlpatterns = patterns('',


url(r'^signup/$', views.signup),)

我应该在views.py或models.py中写一下使用django注册注册用户。

2 个答案:

答案 0 :(得分:2)

您可以通过django表单将django注册与自定义html / css一起使用。以下是步骤:

  1. 如果您已包含相关的导入,则urls.py看起来很好,因此无需进行任何更改。

  2. 在与forms.py相同的文件夹中创建views.py文件,并将以下代码添加到forms.py

  3. from django import forms
    
    class Signup_form(forms.Form):
        # CSS styles should not be inline. i've moved your style contents under a 'form-control' class
        name = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'type':'text', 'placeholder':'Enter your name', 'id':'name', 'name':'name', 'class' : 'form-control'}))
        email = forms.EmailField(label="Email address", widget=forms.TextInput(attrs={'type':'text', 'placeholder':'Your E-mail', 'id':'email', 'name':'email', 'class' : 'form-control'}))
        pass1 = forms.CharField(max_length = 20, widget=forms.TextInput(attrs={'type':'password', 'placeholder':'Password', 'id':'pass1', 'name':'pass1', 'class' : 'form-control'}))
        pass2 = forms.CharField(max_length = 20, widget=forms.TextInput(attrs={'type':'password', 'placeholder':'Confirm Password', 'id':'pass2', 'name':'pass2', 'class' : 'form-control'}))
    

    3.在views.py文件中,您必须链接将Signup_form传递给您的视图层。将您的views.py文件更改为以下内容:

    from forms import Signup_form
    
    def signup(request):
        form = Signup_form()
    
        name = request.POST.get('name','')
        email = request.POST.get('email', '')
        pass1 = request.POST.get('pass1', '')
        pass2 = request.POST.get('pass2', '')
    
        # Do some validations here
    
        user = User.objects.create_user(name, email, pass2)
        if user:
            user.save()
    
        return render(request, 'signup.html', {'form': form})
    

    4.如果您已在视图图层中传递了Signup_form对象,则可以使用django模板标记在signup.html页面中显示它们。以下是signup.html的外观:

    {% extends "base.html" %}
    
        <link rel="stylesheet" href="{% static 'css/custom.css' %}">
    {% block title %}Signup page{% endblock %}
    
    {% block content %}
    
    <div class="container" style="width:500px">
        <h3 style="margin-top:100px">Sign Up</h3> 
        <hr>
        <div class="login-form">
    
        <form action="" method="post"> {% csrf_token %}
            <div class="control-group span3" style="width:400px" >
                {{ form.name.errors }}
                {{ form.name }}
                <i class="input-icon fui-user" for="login-name"></i>
        </div>
    
        <div class="control-group span3" style="width:400px" >
            {{ form.email.errors }}
            {{ form.email }}
            <i class="input-icon fui-mail" for="login-name"></i>
        </div>
    
        <div class="control-group span3" style="width:400px">
            {{ form.pass1.errors }}
            {{ forms.pass2 }}
            <i class="input-icon fui-lock" for="login-pass"></i>
        </div>
    
    
        <div class="control-group span3" style="width:400px">
            {{ form.pass2.errors }}
            {{ forms.pass2 }}
            <i class="input-icon fui-lock" for="login-pass"></i>
        </div>
    
        <div style="text-align:center"> 
            <input type="submit" class="btn btn-hg btn-primary btn-wide" value="Sign Up">
            <!--<a class="login-link" href="#">Lost your password ?</a> -->
        </div>
    </form>
    
    </div><!-- /login-form -->
    
    </div> <!-- /container -->
    
    
    {% endblock content %}
    

    5.由于我之前已将CSS样式(在第2点中)移动到“表单控件”类中,现在我们将通过在外部custom.css文件中添加样式来放回它。在static / css / custom.css目录中创建一个custom.css文件,并在其中添加以下内容:

    .form-control {
    width:400px;
    padding-bottom:15px;
    margin-bottom:10px;
    }
    

答案 1 :(得分:1)

在你的Views.py

from django.contrib.auth.models import User

def signup(request):

    username = request.POST.get("name","")
    password = request.POST.get("pass","")
    login_pass = request.POST.get("login-pass","")
    email = request.POST.get("email","")
    if username != "" or password != "" or login_pass != "":
        #do some validations

    user = User.objects.create_user(username, email, password)
    if user:
        user.is_active = True
        user.save()
    return render(request, 'signup.html')

以上代码会将新用户注册到系统

如果您使用Django表格,那么所有验证都将由Django完成。

注意:请将name属性添加到在request.POST中获取vaLues所需的HTML字段。同时将HTMl表单操作指向“注册”视图