用户登录登出功能
一、功能需求分析
1. 登录退出功能分析
流程图
功能
登录页面
登录功能
退出功能
二、登录页面
1. 接口设计
-
接口说明
类目 说明 请求方法 GET url定义 /user/login/
参数格式 无参数 -
返回结果
登录页面
2.后端代码
-
user/views.py代码:
from django.shortcuts import render
from django.views import View
# .... class LoginView(View):
"""
登录视图
"""
def get(self, request):
return render(request, 'user/login.html') - user/urls.py代码:
from django.urls import path, include
from . import views
app_name = 'user' urlpatterns = [
path('register/', views.RegisterView.as_view(), name='register'),
path('login/', views.LoginView.as_view(), name='login'),
]
3.前端页面代码
1.user/login.html
因为表单需要post请求,所以记得在页面使用{% csrf_token %}
标签。
注册功能已经开发好了,所以页面的上的立即注册
处的a标签href可以写好
{% extends 'base/base.html' %}
{% load static %} {% block title %}登录{% endblock title %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/user/auth.css' %}">
{% endblock link %} {% block main_start %}
<!-- container start -->
<main id="container">
<div class="login-contain">
<div class="top-contain">
<h4 class="please-login">请登录</h4>
<a href="{% url 'user:register' %}" class="register">立即注册 ></a>
</div>
<form action="" method="post" class="form-contain">
<div class="form-item">
<input type="tel" placeholder="请输入用户名或手机号" name="account" class="form-control" autocomplete="off">
</div>
<div class="form-item">
<input type="password" placeholder="请输入密码" name="password" class="form-control">
</div>
<div class="form-item clearfix">
<label>
<input type="checkbox" name="remember">
<span>记住我</span>
</label>
<a href="javascript:void(0);" class="forget-password">忘记密码?</a>
</div>
<div class="form-login">
<input type="submit" value="登录" class="login-btn">
</div>
{% csrf_token %}
</form>
</div>
</main>
<!-- container end -->
{% endblock main_start %}
三、登录功能
1. 业务流程
判断用户名账号是否为空
判断密码是否为空,格式是否正确
判断账户与密码是否正确
2.接口设计
接口说明:
类目 | 说明 |
---|---|
请求方法 | POST |
url定义 | /user/login/ |
参数格式 | 表单参数 |
参数说明:
参数名 | 类型 | 是否必须 | 描述 |
---|---|---|---|
account | 字符串 | 是 | 用户输入的用户名 |
password | 字符串 | 是 | 用户输入的密码 |
remember | 字符串 | 否 | 用户是否选择免登录 |
返回结果:
{
"errno": "",
"errmsg": "OK",
}
3.后端代码
-
视图 在user目录下的views.py文件中定义如下视图:
class LoginView(View):
"""
登录视图
"""
def get(self, request):
return render(request, 'user/login.html') def post(self, request):
form = LoginForm(data=request.POST, request=request) if form.is_valid():
return json_response(errmsg='恭喜登录成功!')
else:
err_msg_list = []
for item in form.errors.values():
err_msg_list.append(item[0])
err_msg_str = '/'.join(err_msg_list) return json_response(errno=Code.PARAMERR, errmsg=err_msg_str) - 表单 在user目下的forms.py文件中定义如下表单:
class LoginForm(forms.Form):
account = forms.CharField(error_messages={'required': '账户不能为空'})
password = forms.CharField(max_length=20, min_length=6,
error_messages={
'max_length': '密码长度要小于20',
'min_length': '密码长度要大于6',
'require': '密码不能为空'
})
remember = forms.BooleanField(required=False) def __init__(self, *args, **kwargs):
self.request = kwargs.pop('request', None)
super().__init__(*args, **kwargs) def clean_account(self):
"""
校验用户账户
:return:
"""
account = self.cleaned_data.get('account')
if not re.match(r'^1[3-9]\d{9}$', account) and (len(account)<5 or len(account)>20):
raise forms.ValidationError('用户账户格式不正确,请重新输入')
# 一定要return
return account def clean(self):
"""
校验用户名密码,并实现登录逻辑
:return:
"""
cleaned_data = super().clean()
account = cleaned_data.get('account')
password = cleaned_data.get('password')
remember = cleaned_data.get('remember') # 登录逻辑
user_queryset = User.objects.filter(Q(mobile=account)|Q(username=account))
if user_queryset:
user = user_queryset.first()
if user.check_password(password):
if remember:
self.request.session.set_expiry(constants.USER_SESSION_EXPIRY)
else:
self.request.session.set_expiry(0)
login(self.request, user) else:
raise forms.ValidationError('用户名密码错误!')
else:
raise forms.ValidationError('用户账号不存在,请重新输入!')在user文件加下创建constants.py文件定义如下常量
# 用户session信息过期时间 单位秒 默认14天
USER_SESSION_EXPIRY = 14*24*60*60
4.前端js代码
修改user/login.html中用户账户输入框input的name为account
。
在static/js/user/下创建login.js文件
js代码如下:
$(function () {
let $loginBtn = $('.login-btn'); // 获取登录按钮元素
$loginBtn.click(function (e) {
e.preventDefault(); // 阻止默认提交
// 1.校验账户
let sAccount = $('input[name="account"]').val();
if (sAccount === ''){
message.showError('用户账户不能为空');
return
}
if(!(/^\w{5,20}$/).test(sAccount) && !(/^1[3-9]\d{9}$/).test(sAccount)){
message.showError('用户账户格式不正确,请求重新输入');
return
}
// 2.校验用户输入密码
let sPassword = $('input[name="password"]').val();
if(sPassword === ''){
message.showError('用户密码不能为空');
return
}
// 3.获取用户是否勾选'记住我',勾选为true,否则为false
let bRemember = $('input[name="remember"]').is(':checked');
// 4.发送ajax
$.ajax({
url: '/user/login/',
data: {
account: sAccount,
password: sPassword,
remember: bRemember
},
type: 'POST',
dataType: 'json',
success: function (res) {
if(res.errno === '0'){
message.showSuccess('恭喜, 登录成功!');
setTimeout(function () {
//注册成功之后重定向到打开登录页面之前的页面
if(!document.referrer || document.referrer.includes('/user/login/') || document.referrer.includes('/user/register/')){
window.location.href = '/'
}else {
window.location.href = document.referrer
}
}, 3000)
}else{
message.showError(res.errmsg)
}
},
error: function (xhr, msg) {
message.showError('服务器超时,请重试') }
});
});
});
四、登出功能
1.接口设计
接口说明:
类目 | 说明 |
---|---|
请求方法 | GET |
url定义 | /user/logou/ |
参数格式 | 无参数 |
2.后端代码
# 在user目录下的views.py文件中定义如下视图:
class LogoutView(View):
"""
登出视图
"""
def get(self, request):
logout(request) return redirect(reverse('user:login'))
# 在urser目录下的urls.py文件定义如下路由:
from django.urls import path
from . import views
app_name = 'user' urlpatterns = [
path('register/', views.RegisterView.as_view(), name='register'),
path('login/', views.LoginView.as_view(), name='login'),
path('logout/', views.LogoutView.as_view(), name='logout'),
]
3.前端代码
# 修改templates/base/base.html中的header部分的代码如下
<header id="header">
<div class="mw1200 header-contain clearfix">
<!-- logo start -->
<h1 class="logo">
<a href="javascript:void(0);" class="logo-title">Python</a>
</h1>
<!-- logo end -->
<!-- nav start -->
<nav class="nav">
<ul class="menu">
<li class="active"><a href="base.html">首页</a></li>
<li><a href="../course/course.html">在线课堂</a></li>
<li><a href="../doc/docDownload.html">下载文档</a></li>
<li><a href="search.html">搜索</a></li>
</ul>
</nav>
<!-- nav end -->
<!-- login start -->
<div class="login-box">
{% if user.is_authenticated %}
<div class="author">
<i class="PyWhich py-user"></i>
<span>{{ user.username }}</span>
<ul class="author-menu">
{% if user.is_staff %}
<li><a href="javascript:void(0);">后台管理</a></li>
{% endif %}
<li><a href="{% url 'user:logout' %}">退出登录</a></li>
</ul>
</div>
{% else %}
<div>
<i class="PyWhich py-user"></i>
<span>
<a href="{% url 'user:login' %}" class="login">登录</a> / <a href="{% url 'user:register' %}"
class="reg">注册</a>
</span>
</div>
{% endif %} </div>
<!-- login end -->
</div>
</header>
Django项目: 4.用户登录登出功能的更多相关文章
-
Struts2学习第六课 实现登录登出功能
关于Struts2请求的扩展名问题: 1).org.apache.struts2包下的default.properties中配置了struts2应用的一些常量 2).struts.action.ext ...
-
SpringBoot登录登出切面开发
阅读本文约“2.5分钟” 本文开发环境是SpringBoot2.X版本. 对于系统而言(这里多指管理系统或部分具备登录登出功能的系统),登录登出是一个类权限验证的过程,现在一般是以token进行校验, ...
-
ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程,简单编程
原文:ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 登录登出 上一章节我们总算完善了注册的功能,而且也添加了一个用户,现 ...
-
flask 实现登录 登出 检查登录状态 的两种方法的总结
这里我是根据两个项目的实际情况做的总结,方法一(来自项目一)的登录用的是用户名(字符串)和密码,前后端不分离,用form表单传递数据:方法二用的是手机号和密码登录,前后端分离,以json格式传递数据, ...
-
Django开发之登陆和登出
使用django自带的验证模块 1.首先使用python manage.py startapp models为当前项目添加一个应用. 2.在setting.py中INSTALLED_APPS后面添加' ...
-
CAS5.3 单点登录/登出/springboot/springmvc
环境: jdk:1.8 cas server:5.3.14 + tomcat 8.5 cas client:3.5.1 客户端1:springmvc 传统web项目(使用web.xml) 客户端2:s ...
-
ThinkPHP---案例1登录登出和添加部门
配置文件分3类:系统配置文件,分组配置文件,应用配置文件 ①系统配置文件ThinkPHP/Conf/convention.php: ②分组 / 模块 /平台配置文件Home/Conf/config.p ...
-
Android网络开发实例(基于抓包实现的网络模拟登录,登出和强制登出)
学习Android有几个月了,最近喜欢上了网络编程,于是想通过Android写一些一个小程序用于连接外网.在这里非常感谢雪夜圣诞的支持,非常感谢,给我打开新的一扇门. 1.声明,本程序只能用于西南大学 ...
-
单点登录(二)使用Cookie+File实现单点登录登出(附源代码)
上一篇文章<单点登录(一)使用Cookie+File实现单点登录>中,我们实现了单点登录的功能. 本文作为上一篇文章的扩展部分,加入"单点登出"功能. 源代码下载:链接 ...
随机推荐
-
rabbitmq使用心得
因为公司项目需要使用消息中间件,实现相关业务的异步处理,所有选用了rabbitmq.通过看文档,爬过一个一个坑,终于还是实现了相关功能. 直接上配置文件: <?xml version=" ...
-
zend studion实现自动换行
真是学一门语言不仅有学语言的阻碍,同时还有编写代码工具的障碍,zend studion的自动换行问题 zend studion默认的是不会自己换行,百度查找后找到了如下个方法: 实现: 菜单" ...
-
C++资料收集&;整理
类别 地址 ZLib c++ zlib(qt)压缩与解压缩 STL STL学习之map容器(2)_insert Basic std::nothrow new (nothrow) T() 的原理 C++ ...
-
Java: arr==null vs arr.length==0
当 arr 是一个array时,写Java开始的corner case常常会写类似下面的语句: if(arr == null || arr.length == 0){ return 0; } 其实这是 ...
-
三、MongoDB的创建、更新和删除
一.MongoDB的下载.安装与部署 二.MongoDB的基础知识简介 三.MongoDB的创建.更新和删除 概要 下面开始学习MongoDB最重要也是最基础的部分:C(创建)R(查询)U(更新)D( ...
-
UVA 11374 Airport Express 机场快线(单源最短路,dijkstra,变形)
题意: 给一幅图,要从s点要到e点,图中有两种无向边分别在两个集合中,第一个集合是可以无限次使用的,第二个集合中的边只能挑1条.问如何使距离最短?输出路径,用了第二个集合中的哪条边,最短距离. 思路: ...
-
使用C#模拟ASP.NET页面中按钮点击
c# 模拟Asp.net页面中的某个按钮的点击,向web服务器发出请求 主要就组织要提交的数据,然后以post方式提交. 假设我们有如下的网页 1 <% @ Page Language = &q ...
-
MAC xampp 启动失败
原文地址: http://meiyitianabc.blog.163.com/blog/static/1050221272013116232752/ 问题:80port被暂用,导致server无法启动 ...
-
Swift-开发 # 1.2版本迁移
{ Parallels: 可以将一个win程序拖到mac中运行. } --类似于虚拟机 遇到的几大问题: 1.自动修改无效? --忽略它的存在,坑. 2.无止境的修改,还是错? --使用替换工具-&g ...
-
Web层后端权限模块
从零开始编写自己的C#框架(19)——Web层后端权限模块 不知不觉本系统写了*个月了,最近写页面的具体功能时感觉到有点吃力,很多地方如果张嘴来讲的话可以说得很细,很全面,可写成文字的话,就不太 ...