Django實現用戶註冊登陸

學習Django中:試着着寫一個用戶註冊登陸系統,開始搞事情 =====O(∩_∩)O哈哈~=====css

=================html

Ubuntuhtml5

python 2.7.12python

Django 1.10.4數據庫

IDE:Pycharmdjango

Bootstrap(其實沒怎麼用~~)bootstrap

=================app

新建項目:(我是直接用pycharm直接生成的)

使用終端:post

(建立項目)django-admin.py startproject mysite學習

(進入mysite新建app)django-admin.py startapp app01

記得在settings.py裏面添加app

 設計模型:

/mysite/app01/models.py:

 1 from __future__ import unicode_literals
 2 
 3 from django.db import models
 4 
 5 # Create your models here.
 6 
 7 class User(models.Model):
 8     username = models.CharField(max_length=50)
 9     password = models.CharField(max_length=50)
10     email = models.EmailField()

建立User類,存放 username、password、email三個字段

同步數據庫:

Python manage.py makemigrations

python manage.py migrate

Django會自動建立一系列表

沒有自動建立superuser.......我們手動建立:

python manage.py createsuperuser

設計邏輯視圖(views):(使用表單)

/mysite/app01/views.py:

 1 #coding=utf-8
 2 from django.shortcuts import render,render_to_response
 3 from django.http import HttpResponse
 4 from django import forms
 5 from models import User
 6 # Create your views here.
 7 class UserForm(forms.Form):
 8     username = forms.CharField(label='用戶名',max_length=50)
 9     password = forms.CharField(label='密碼',widget=forms.PasswordInput())
10     email = forms.EmailField(label='郵箱')
11 
12 def regist(request):
13     if request.method == 'POST':    
14         userform = UserForm(request.POST)
15         if userform.is_valid():
16             username = userform.cleaned_data['username']
17             password = userform.cleaned_data['password']
18             email = userform.cleaned_data['email']
19 
20             User.objects.create(username=username,password=password,email=email)
21             User.save()
22 
23             return HttpResponse('regist success!!!')
24     else:
25         userform = UserForm()
26     return render_to_response('regist.html',{'userform':userform})
27 
28 def login(request):
29     if request.method == 'POST':
30         userform = UserForm(request.POST)
31         if userform.is_valid():
32             username = userform.cleaned_data['username']
33             password = userform.cleaned_data['password']
34 
35             user = User.objects.filter(username__exact=username,password__exact=password)
36 
37             if user:
38                 return render_to_response('index.html',{'userform':userform})
39             else:
40                 return HttpResponse('用戶名或密碼錯誤,請從新登陸')
41 
42     else:
43         userform = UserForm()
44     return render_to_response('login.html',{'userform':userform})

 

註釋:

label:標籤

widget:裝飾

widget=forms.PasswordInput():設置密碼字段

設計模板文件

在templates裏面新建index.html、regist.html、login.html

regist.html

<!DOCTYPE html>
{% load static %}
<html lang="zh-CN"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面,任何其餘內容都*必須*跟隨其後! -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Regist</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static 'css/signin.css' %}" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="{% static 'js/ie-emulation-modes-warning.js' %}"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
<style>
        html,body{text-align:center;margin:0px auto;}
</style>
<body>
<h1>註冊頁面</h1>
<form method = 'post' enctype="multipart/form-data">
{{userform.as_p}}
<input type="submit" value = "Regist" />
</form>
</body>
</html>

 

 login.html

<!DOCTYPE html>
{% load static %}
<html lang="zh-CN"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面,任何其餘內容都*必須*跟隨其後! -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Login</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static 'css/signin.css' %}" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="{% static 'js/ie-emulation-modes-warning.js' %}"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
<style>
        html,body{text-align:center;margin:0px auto;}
</style>
<body>
<h1>登陸頁面</h1>
<form method = 'post' enctype="multipart/form-data">
{{userform.as_p}}
<input type="submit" value = "Login" />
</form>
</body>
</html>

 

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主頁</title>
</head>
<style>
        html,body{text-align:center;margin:0px auto;}
</style>
<body>
<h1>Hello Word!</h1>
</body>
</html>

 

 設計urls

/mysite/urls.py

from django.conf.urls import url,include
from django.contrib import admin
from app01 import urls
import app01

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'',include(app01.urls)),
]

 

 /mysite/app01/urls.py

from django.conf.urls import url,include
from django.contrib import admin
import views
admin.autodiscover()

urlpatterns = [
    url(r'^index/$',views.index),
    url(r'^login/$',views.login),
    url(r'^regist/$',views.regist),

]

 

 使用admin後臺管理註冊的用戶

在models.py裏面設計一個UserAdmin類,用來記錄註冊用戶的信息

/mysite/app01/models.py

from __future__ import unicode_literals
from django.contrib import admin
from django.db import models

# Create your models here.

class User(models.Model):
    username = models.CharField(max_length=50)
    password = models.CharField(max_length=50)
    email = models.EmailField()

class UserAdmin(admin.ModelAdmin):
    list_display = ('username','password','email')

admin.site.register(User,UserAdmin)

 

 同步一下數據庫(方法同上)

 效果圖

主頁:

註冊頁:

登陸頁面:

 後臺:

相關文章
相關標籤/搜索