登录注册案例-数据库

登录注册

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>