登录注册案例-数据库

登录注册

1. 进入.html文件确定请求的地址
{%block form%}

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>

posted @ 2018-11-12 11:22 IndustriousHe 阅读(486) 评论(0) 收藏举报

刷新页面返回顶部

IndustriousHe

登录注册案例-数据库

登录注册

login.css

register.css

.register.html文件（注册页面）

.models文件

.urls文件

.views文件

.html文件

公告