实战django(一)--(你也能看懂的)注册与登录(带前端模板)
时间:2022-07-23
本文章向大家介绍实战django(一)--(你也能看懂的)注册与登录(带前端模板),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
先是具体目录:(主要是注意templates和static的位置),其中person文件夹是上一期实战的,不用理会,login是本节实战app
项目urls.py
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('person.urls',namespace='person')),
path('login/',include('login.urls',namespace='login'))
]
app中urls.py
from django.urls import path
from . import views
app_name='login'
urlpatterns=[
path('',views.login,name='login'),
path('register/',views.register,name='register'),
path('register/savereg/',views.save_register,name='savereg'),
path('tologin/',views.to_login,name='tologin'),
]
models.py
from django.db import models
# Create your models here.
class Users(models.Model):
id=models.AutoField(primary_key=True)
phone=models.CharField(max_length=20)
username=models.CharField(max_length=20)
password=models.CharField(max_length=50)
repassword=models.CharField(max_length=50)
birthday=models.DateField()
regday=models.DateField()
views.py
from django.shortcuts import render
from .models import Users
import datetime
# Create your views here.
def login(request):
return render(request,'login/login.html')
def register(request):
return render(request,'login/register.html')
def save_register(request):
if request.method == 'POST':
phone=request.POST.get('phone')
username=request.POST.get('username')
password=request.POST.get('password')
repassword=request.POST.get('repassword')
birthday=request.POST.get('birthday')
errormsg=''
if phone =='':
errormsg='手机号不能为空'
elif password =='':
errormsg='密码不能为空'
else:
if password!=repassword:
errormsg='确认密码与密码不一致'
if errormsg == '':
Users.objects.create(phone=phone,username=username,password=password,birthday=birthday,
regday=datetime.datetime.now().strftime('%Y-%m-%d'))
return render(request,'login/pagejump.html')
else:
return render(request,'login/register.html',context={'errormsg':errormsg})
def to_login(request):
if request.method == 'POST':
phone=request.POST.get('phone')
if phone == '':
return render(request, 'login/login.html', {'errormsg': '用户名不能为空'})
try:
user_obj = Users.objects.get(phone=phone)
except Users.DoesNotExist:
return render(request,'login/login.html',{'errormsg':'账号不存在,请重新输入'})
pwd=user_obj.password
password = request.POST.get('password')
if password != '':
repwd=password
if pwd == repwd:
username=user_obj.username
return render(request, 'login/index.html',{'username':username})
else:
return render(request, 'login/login.html',{'errormsg':'密码错误'})
else:
return render(request, 'login/login.html', {'errormsg': '密码不能为空'})
login.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒老师</title>
<meta name="keywords" content="盒老师">
<meta name="content" content="盒老师">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<link type="text/css" rel="stylesheet" href="/static/login/css/login.css">
<script type="text/javascript" src="/static/login/js/jquery.min.js"></script>
</head>
<body class="login_bj" >
<div class="zhuce_body" style="position:absolute;left:130px;top:300px;">
<div class="zhuce_kong login_kuang" >
<div class="zc">
<div class="bj_bai" style="height:330px;">
<h3>登录</h3>
<form action="{% url 'login:tologin'%}" method="post">
<p style="color: red;margin-top: 0px;">{{errormsg}}</p>
<input name="phone" type="text" class="kuang_txt" placeholder="手机号">
<input name="password" type="text" class="kuang_txt" placeholder="密码">
<div>
<input name="" type="checkbox" value="" checked><span>记住我</span><a href="#" style="float:rigth;">忘记密码</a>
</div>
<div>
<p>没有账号?<a href="{% url 'login:register'%}">立即注册</a></p>
</div>
<input style="margin-top:2px;" name="登录" type="submit" class="btn_zhuce" value="登录">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
register.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒老师</title>
<meta name="keywords" content="盒老师">
<meta name="content" content="盒老师">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<link type="text/css" rel="stylesheet" href="/static/login/css/login.css">
<script type="text/javascript" src="/static/login/js/jquery.min.js"></script>
</head>
<body class="login_bj" >
<div class="zhuce_body" style="position:absolute;left:150px;top:300px;">
<div class="zhuce_kong">
<div class="zc">
<div class="bj_bai">
<h3>欢迎注册</h3>
<form action="{% url 'login:savereg'%}" method="post">
<p style="color: red">{{errormsg}}</p>
<input style="margin-top: 3px;" name="phone" type="text" class="kuang_txt" placeholder="手机号">
<input name="username" type="text" class="kuang_txt " placeholder="用户名">
<input name="password" type="text" class="kuang_txt " placeholder="密码">
<input name="repassword" type="text" class="kuang_txt " placeholder="确认密码"><br>
<input name="birthday" type="text" class="kuang_txt " placeholder="生日">
<div stytle="margin-top:2px;">
<input name="注册" type="submit" class="btn_zhuce" value="注册"></span>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
pagejump.html
<body>
<div align="center" style="border: 1px solid blueviolet;
position:absolute;left:500px;top: 200px;width: 400px;height: 50px;">
<p style="text-align: center;font-size: 20px;">注册成功!还有<span id="sp">4</span>秒跳转到登录界面...</p>
</div>
<script>
//onload事件会在页面加载完后立即发生
onload=function () {
//etInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval(go,1000)
};
var x=3;
function go() {
if (x>=0){
document.getElementById("sp").innerText=x;
}else {
kk="{% url 'login:login'%}";
}
x--;
}
</script>
</body>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3><p>hello {{username}}</p></h3>
</body>
</html>
启动服务器:http://127.0.0.1:8000/login/,来到初始页面:
点击立即注册,跳转到http://127.0.0.1:8000/login/register/
我们输入相应信息(后端会有一些简单的验证,如何有错误就会在前端显示,假设我们什么都不输入):
其他的更复杂的验证就没怎么写了。我们输入以下数据:
点击注册:若注册成功,则会跳转到pagejump页:否则返回错误信息给注册页
三秒后会跳转到登录页,同样的,我们在登录页也有简单的验证,先是登录账号(手机号)不能为空,然后如果在数据库中找不到该手机号,则返回错误信息‘账号不存在,请重新输入’,否则找到该条记录,找到对应密码,将数据库中的密码与输入的进行比较,如果相同,则可以登录,跳转到index界面,否则就返回错误信息,‘密码错误’。
登录成功后获取用户名,并进行显示。
总结:也不知道该总结啥。。。。
补充:
(1)忘记密码:这个就不实现了,就是绑定手机号或邮箱之类的,发送短信验证进行修改。
(2)注册和登录时输入密码显示为*,也就是不可见。
(3)记住我,将用户放在cookie或session中,下次直接跳转至index页面,而不用进行登录(下一步要实现的)。
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(49)-工作流设计-我的申请
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(47)-工作流设计-补充
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(46)-工作流设计-设计分支
- 瑞典研发未来概念车,车厢、底盘能分离,颠覆汽车使用方式
- WCF技术剖析之十一:异步操作在WCF中的应用(下篇)
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(45)-工作流设计-设计步骤
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(44)-工作流设计-设计表单
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(43)-工作流设计-字段分类设计
- 因为这个原因,你的工作即将被取代!
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(73)-微信公众平台开发-消息管理
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(72)-微信公众平台开发-消息处理
- 充斥着AI生成内容的世界,你能辨别虚拟与现实吗?
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(71)-微信公众平台开发-公众号管理
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(69)-微信公众平台开发-功能概述
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法