User Register and Login
A-基本页面
-在usls。py中创建register和login的url
-在viesw中写入registerPage函数
-引入数据库USER中的Form-UserCreationForm
from django.contrib.auth.forms import UserCreationForm def registerPage(request): form = UserCreationForm() if request.method=='POST': form = UserCreationForm(request.POST) if form.is_valid(): form.save() context = {'form': form} return render(request,'accounts/register.html',context)
-在template模板中写入register。html
-{{form_as.p}} 使其按顺序排列
-在forms.py中自定义model 引入User 选择属性
from django.forms import ModelForm from .models import Order from django.contrib.auth.forms import UserCreationForm from django.contrib.auth.models import User class OrderForm(ModelForm): class Meta: model = Order fields = '__all__' class CreatUserForm(UserCreationForm): class Meta: model = User fields = ['username','email','password1','password2']
-更改有关views中的引入函数
from .forms import OrderForm,CreatUserForm form = CreatUserForm() form = CreatUserForm(request.POST)
-在r127.0.0.1/register 添加数据 从127.0.0.1/admin/User中查找
B 渲染模板
-在register。html中修改页面的渲染方式 单个单个渲染方便后面套用JS
<h3>Register</h3> <form method="POST" action=""> {% csrf_token %} {{ form.username.label }} {{ form.username }} {{ form.email.label }} {{ form.email }} {{ for.password1.label }} {{ form.password1 }} {{ form.password2.label }} {{ form.password2 }} <input type="submit" name="Create User"> </form>
-访问 jsfiddle 找到js 渲染模板
-注册表格模板: https://jsfiddle.net/ivanov11/hzf0jxLg/
<!DOCTYPE html> <html> <head> <title>Login</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous"> <style> body, html { margin: 0; padding: 0; height: 100%; background: #7abecc !important; } .user_card { width: 350px; margin-top: auto; margin-bottom: auto; background: #74cfbf; position: relative; display: flex; justify-content: center; flex-direction: column; padding: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 5px; } .form_container { margin-top: 20px; } #form-title{ color: #fff; } .login_btn { width: 100%; background: #33ccff !important; color: white !important; } .login_btn:focus { box-shadow: none !important; outline: 0px !important; } .login_container { padding: 0 2rem; } .input-group-text { background: #f7ba5b !important; color: white !important; border: 0 !important; border-radius: 0.25rem 0 0 0.25rem !important; } .input_user, .input_pass:focus { box-shadow: none !important; outline: 0px !important; } </style> </head> <body> <div class="container h-100"> <div class="d-flex justify-content-center h-100"> <div class="user_card"> <div class="d-flex justify-content-center"> <h3 id="form-title">REGISTER ACCOUNT</h3> </div> <div class="d-flex justify-content-center form_container"> <form method="POST" action=""> {% csrf_token %} <div class="input-group mb-3"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-user"></i></span> </div> {{form.username}} </div> <div class="input-group mb-2"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-envelope-square"></i></span> </div> {{form.email}} </div> <div class="input-group mb-2"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-key"></i></span> </div> {{form.password1}} </div> <div class="input-group mb-2"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-key"></i></span> </div> {{form.password2}} </div> <div class="d-flex justify-content-center mt-3 login_container"> <input class="btn login_btn" type="submit" value="Register Account"> </div> </form> </div> {{form.errors}} <div class="mt-4"> <div class="d-flex justify-content-center links"> Already have an account? <a href="{% url 'login' %}" class="ml-2">Login</a> </div> </div> </div> </div> </div> <script> /* Because i didnt set placeholder values in forms.py they will be set here using vanilla Javascript //We start indexing at one because CSRF_token is considered and input field */ //Query All input fields var form_fields = document.getElementsByTagName('input') form_fields[1].placeholder='Username..'; form_fields[2].placeholder='Email..'; form_fields[3].placeholder='Enter password...'; form_fields[4].placeholder='Re-enter Password...'; for (var field in form_fields){ form_fields[field].className += ' form-control' } </script> </body> </html> {#<h3>Register</h3>#} {#<form method="POST" action="">#} {# {% csrf_token %}#} {# {{ form.username.label }}#} {# {{ form.username }}#} {##} {# {{ form.email.label }}#} {# {{ form.email }}#} {##} {# {{ for.password1.label }}#} {# {{ form.password1 }}#} {##} {# {{ form.password2.label }}#} {# {{ form.password2 }}#} {# <input type="submit" name="Create User">#} {#</form>#}
-登录表单模板: https://jsfiddle.net/ivanov11/dghm5cu7/
<!DOCTYPE html> <html> <head> <title>Login</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous"> <style> body, html { margin: 0; padding: 0; height: 100%; background: #7abecc !important; } .user_card { width: 350px; margin-top: auto; margin-bottom: auto; background: #74cfbf; position: relative; display: flex; justify-content: center; flex-direction: column; padding: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 5px; } .form_container { margin-top: 20px; } #form-title{ color: #fff; } .login_btn { width: 100%; background: #33ccff !important; color: white !important; } .login_btn:focus { box-shadow: none !important; outline: 0px !important; } .login_container { padding: 0 2rem; } .input-group-text { background: #f7ba5b !important; color: white !important; border: 0 !important; border-radius: 0.25rem 0 0 0.25rem !important; } .input_user, .input_pass:focus { box-shadow: none !important; outline: 0px !important; } #messages{ background-color: grey; color: #fff; padding: 10px; margin-top: 10px; } </style> </head> <body> <div class="container h-100"> <div class="d-flex justify-content-center h-100"> <div class="user_card"> <div class="d-flex justify-content-center"> <h3 id="form-title">LOGIN</h3> </div> <div class="d-flex justify-content-center form_container"> <form method="POST" action=""> {% csrf_token %} <div class="input-group mb-3"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-user"></i></span> </div> <input type="text" name="username" placeholder="Username..." class="form-control"> </div> <div class="input-group mb-2"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-key"></i></span> </div> <input type="password" name="password" placeholder="Password..." class="form-control" > </div> <div class="d-flex justify-content-center mt-3 login_container"> <input class="btn login_btn" type="submit" value="Login"> </div> </form> </div> {% for message in messages %} <p id="messages">{{message}}</p> {% endfor %} <div class="mt-4"> <div class="d-flex justify-content-center links"> Don't have an account? <a href="{% url 'register' %}" class="ml-2">Sign Up</a> </div> </div> </div> </div> </div> </body> </html>