登入註冊

1.  進入.html檔案確定請求的地址
{%block form%}
<form action=’/login/’>
2.  進入views.py檔案
3.  檢視models.py檔案
4.  設定註冊頁面register.html
5.  建立.css檔案

login.css

p{
    margin:0;
}
#container{
    width:990px;
    margin:0 auto;
}
#container>h2{
    color:#999;
    font-weight:normal;
    margin:50px 0 30px 0;
    padding-bottom:15px;
    border-bottom:1px solid #ccc;
}
#container>p.user-pic{
    float:left;
}

#user-login{
    float:right;
    margin-right:40px;
    margin-top:80px;
}

#user-login .form-line{
    overflow:hidden;
    margin-bottom:20px;
}
#user-login .form-line>p{
    float:left;
    /*寬度，文字右對齊，右外邊距，行高，文字顏色*/
    width:64px;
    text-align:right;
    margin-right:40px;
    line-height:40px;
    color:#999;
    height:40px;
}
#user-login .form-line>div{
    float:left;
}
#uphone,#upwd{
    /*寬度，高度，邊框，內邊距*/
    width:278px;
    height:38px;
    border:1px solid #ccc;
    padding:0 10px;
    color:#555;
    /*取消輪廓，文字大小*/
    outline:none;
    font-size:18px;
}
#uphone:focus,#upwd:focus{
    border-color:#64A131;
    box-shadow:0 0 2px #64A131;
}

#user-login .forget-pwd{
    width:300px;
}
#user-login .forget-pwd p{
    float:right;
}
#user-login .forget-pwd a{
    color:#999;
    text-decoration:underline;
}
#user-login .forget-pwd input{
    width:18px;
    height:18px;
    vertical-align:middle;
}
#user-login .form-btn{
    width:300px;
}
#user-login .form-btn .register{
    float:right;
    width:143px;
    height:38px;
    border:1px solid #64A131;
    background:#F5FFED;
    border-radius:5px;
    font-size:18px;
    text-decoration:none;
    color:#64a131;
    text-align:center;
    line-height:40px;
}
#user-login .form-btn input{
    /*寬度，高度，取消邊框，邊框倒角，背景顏色，文字顏色，文字大小*/
    width:145px;
    height:40px;
    border:none;
    border-radius:5px;
    background:#64a131;
    color:#fff;
    font-size:18px;
}


/**絕對定位練習*/
#container p.user-pic{
    /*目的是為了配合 a 標記做絕對定位*/
    position:relative;
}
#container p.user-pic a{
    position:absolute;
    left:175px;
    bottom:20px;
    /*寬度，高度，邊框，倒角，文字大小，顏色，水平居中，垂直居中*/
    width:153px;
    height:48px;
    border:1px solid #64A131;
    border-radius:5px;
    font-size:18px;
    color:#64a131;
    text-align:center;
    line-height:50px;
    text-decoration:none;
}

#uphone_err{
    margin-top:10px;
}


 

register.css

.form-control{
    /*寬度，高度，邊框，內邊距*/
    width:278px;
    height:38px;
    border:1px solid #ccc;
    padding:0 10px;
    color:#555;
    /*取消輪廓，文字大小*/
    outline:none;
    font-size:18px;
}
.form-control:focus{
    border-color:#64A131;
    box-shadow:0 0 2px #64A131;
}
#user-login{
    margin-top:40px;
}
 

.register.html檔案（註冊頁面）

{%extends 'login.html'%}
{%load static%}

{%block style%}
    <link rel="stylesheet" href="{%static 'css/register.css'%}">
{%endblock%}

{%block title%}
    註冊會員
{%endblock%}

{%block btn%}
    <a href="{%url 'login'%}">會員登入</a>
{%endblock%}

{%block form%}
    <form action="/register/" method="post">
    {%csrf_token%}
        <div class="form-line">
            <p>手機號</p>
            <div>
                <input type="text" name="uphone" class="form-control">
                <p id="uphone_err">
                    {{errMsg}}
                </p>
            </div>
        </div>
        <div class="form-line">
            <p>密碼</p>
            <div>
                <input type="password" name="upwd" class="form-control">
            </div>
        </div>
        <div class="form-line">
            <p>確認密碼</p>
            <div>
                <input type="password" id="cpwd" class="form-control">
            </div>
        </div>
        <div class="form-line">
            <p>使用者名稱稱</p>
            <div>
                <input type="text" name='uname' class="form-control">
            </div>
        </div>
        <div class="form-line">
            <p>郵箱</p>
            <div>
                <input type="email" name="uemail" class="form-control">
            </div>
        </div>
        <div class="form-line">
            <p></p>
            <div class="form-btn">
                <a href="{%url 'login'%}" class="register">會員登入</a>
                <input type="submit" value="註冊">
            </div>
        </div>
    </form>
{%endblock%}
 

.models檔案

from django.db import models

# Create your models here.


class Users(models.Model):
    uphone = models.CharField(max_length=20, verbose_name='聯絡方式')
    upass = models.CharField(max_length=50, verbose_name='密碼')
    uemail = models.EmailField(verbose_name='郵箱')
    uname = models.CharField(max_length=20, null=True, verbose_name='使用者名稱')
    isActive = models.BooleanField(default=True, verbose_name='啟用')

    def __str__(self):
        return self.uname

    class Meta:
        db_table = 'users'
        verbose_name = '使用者'
        verbose_name_plural = verbose_name


class GoodsType(models.Model):
    title = models.CharField(max_length=30, verbose_name='型別名稱')
    desc = models.TextField(null=True, verbose_name='型別描述')
    picture = models.ImageField(
        upload_to='static/upload/goodstype', verbose_name='型別圖片')

    def __str__(self):
        return self.title

    class Meta:
        db_table = 'goodstype'
        verbose_name = '商品型別'
        verbose_name_plural = verbose_name


class Goods(models.Model):
    title = models.CharField(max_length=100, verbose_name='商品名稱')
    price = models.DecimalField(
        max_digits=7, decimal_places=2, verbose_name='商品價格')
    spec = models.CharField(max_length=30, verbose_name='商品規格')
    picture = models.ImageField(
        upload_to='static/upload/goods', verbose_name='商品圖片')
    isActive = models.BooleanField(default=True, verbose_name='銷售中')
    goodsType = models.ForeignKey(GoodsType, null=True)

    def __str__(self):
        return self.title

    class Meta:
        db_table = 'goods'
        verbose_name = '商品資訊'
        verbose_name_plural = verbose_name

.urls檔案

from django.conf.urls import url
from .views import *

urlpatterns = [
    url(r'^login/$', login_views,name='login'),
    url(r'^register/$', register_views,name='register'),
]

.views檔案

from django.shortcuts import render
from django.http import HttpResponse
from .models import *

# Create your views here.


def login_views(request):
    # 判斷request.method是get還是post
    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        uphone = request.POST.get('uphone', '')
        upwd = request.POST.get('upwd', '')
        # if uphone and upwd:
        #     users = Users.objects.filter(uphone=uphone, upass=upwd)
        #     if users:
        #         return HttpResponse('登入成功!!')
        #     else:
        #         errMsg = '手機號或密碼不正確'
        #         return render(request, 'login.html', locals())
        if uphone and upwd:
            users = Users.objects.filter(uphone=uphone)
            if users:
                u = users[0]
                if upwd == u.upass:
                    return HttpResponse('登入成功')
                else:
                    errMsg = '對不起,輸入的密碼不正確'
                    return render(request, 'login.html', locals())
            else:
                errMsg = '對不起,手機號碼不存在'
                return render(request, 'login.html', locals())
        else:
            errMsg = '手機號或密碼不能為空'
            return render(request, 'login.html', locals())


def register_views(request):
    # 判斷request.method 得到使用者的意圖
    if request.method == 'GET':
        return render(request, 'register.html')
    else:
        # 實現註冊操作
        uphone = request.POST.get('uphone', '')
        upwd = request.POST.get('upwd', '')
        uname = request.POST.get('uname', '')
        uemail = request.POST.get('uemail', '')

        if uphone and upwd and uname and uemail:
            # 先判斷uphone的資料是否存在
            u = Users.objects.filter(uphone=uphone)
            if u:
                errMsg = '手機號碼已存在'
                return render(request, 'register.html', locals())
            else:
                Users.objects.create(uphone=uphone, upass=upwd,
                                     uname=uname, uemail=uemail)
                return HttpResponse('註冊成功!!!')
        else:
            return HttpResponse('資料不能為空')

.html檔案

{%load static%}
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="{%static 'css/login.css'%}"> 
  <script src="{%static 'js/jquery-1.11.3.js'%}"></script>
  <script src="{%static 'js/login.js'%}"></script>
    
  {%block style%}
  {%endblock%}

 </head>
 <body>
  <div id="container">
        <!-- 1、上 ：會員登入 -->
        <h2>
            {%block title%}
                會員登入
            {%endblock%}
        </h2>
        <!-- 2、下：左，登入影象 -->
        <p class="user-pic">
            <img src="{%static 'images/huiyuan.jpg'%}">
            <!-- 會員註冊超連結 -->
            {%block btn%}
                <a href="{%url 'register'%}">會員註冊</a>
            {%endblock%}
        </p>
        <!-- 3、下：右，表單以及控制元件 -->
        <div id="user-login">
            {%block form%}
            <form action="/login/" method="post">
                {%csrf_token%}
                <!-- 1、第一行：手機號 -->
                <div class="form-line">
                    <!-- 左：文字，手機號<p> -->
                    <p>手機號</p>
                    <!-- 右：文字框 <div> -->
                    <div>
                        <input type="text" id="uphone" name="uphone" value="{{u.uphone}}">
                        <p id="uphone_err">
                            {{errMsg}}
                        </p>
                    </div>
                </div>
                <!-- 2、密碼 -->
                <div class="form-line">
                    <p>密碼</p>
                    <div>
                        <input type="password" id="upwd" name="upwd">
                    </div>
                </div>
                <!-- 3、記住密碼 -->
                <div class="form-line">
                    <p></p>
                    <div class="forget-pwd">
                        <p>
                            <a href="#">忘記密碼?</a>
                            <a href="#">快捷登入</a>
                        </p>
                        <input type="checkbox" name="isSave">
                        記住密碼
                    </div>
                </div>
                <!-- 4、登入 & 註冊會員 -->
                <div class="form-line">
                    <p></p>
                    <div class="form-btn">
                        <a href="#" class="register">註冊會員</a>
                        <input type="submit" value="登入">
                    </div>
                </div>
            </form>
            {%endblock%}
        </div>
        <!-- 4、增加空塊級元素，將container撐起來 -->
        <div style="clear:both;"></div>
    </div>
 </body>
</html>