【四】修改密码和注销登录功能实现
【一】修改密码和注销登录功能实现
【路由接口】
- 首页接口
home/
- 用户修改密码
set_password/
- 用户退出登录
log_out/
【引言】
- 我们都知道bootstrap部分的js特效其实是依赖于jQuery的
- 所以
- 特别提醒！
- 一定要在bootstrap之前引入jQuery
- 先加载jQuery，再加载bootstrap样式
- 虽然静态页面，二者顺序无所谓，但是动态js特效就会产生很多意想不到的bug
- 特别提醒
- bootstrap官方开发文档中的某些组件，其实是有bug的
- 如果确认自己的环境、配置、代码都没问题，任然不能显示出官方文档的效果
- 记得找找bug！
【二】需求
【1】首页部分
- 需要展示的效果
- 首先要有一个导航栏
- 导航栏仿照博客园
- 右侧未登录时
- 展示注册功能
- 展示登录功能
- 在用户登录后
- 展示登录的用户名
- 展示更多操作选项
- 如修改密码
- 退出登录
- ...
- 要求
- 对用户进行登录验证
- 展示错误信息
- 使用到的技术
bootstrap展示样式ajax加载点击动作ajax发送post请求
【三】前端页面搭建
【1】页面搭建
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 本地 链接 引入方法 -->
<!-- Websource 文件夹 拷贝到当前文件夹下即可使用 -->
<!-- jQuery 文件(先导入) -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<!-- Bootstrap 的 JS 文件 (动画效果需要jQuery) -->
<script src="{% static 'plugins/Bootstrap/js/bootstrap.min.js' %}"></script>
<!-- Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="{% static 'plugins/Bootstrap/css/bootstrap.min.css' %}">
<!-- bootstrap-sweetalert(弹框) 的 CSS 文件 -->
<link rel="stylesheet" href="{% static 'plugins/bootstrap-sweetalert/dist/sweetalert.css' %}">
<!-- bootstrap-sweetalert(弹框) 的 JS 文件 -->
<script src="{% static 'plugins/bootstrap-sweetalert/dist/sweetalert.js' %}"></script>
<!-- 以下为 css样式书写区 -->
<style>
</style>
</head>
<body>
{#导航条#}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">博客系统</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">BBS <span class="sr-only">(current)</span></a></li>
<li><a href="#">链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
<ul class="nav navbar-nav navbar-right">
{% if request.user.is_authenticated %}
<li><a href="#">{{ request.user.username }}</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">更多操作 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>
<li><a href="#">修改头像</a></li>
<li><a href="#">后台管理</a></li>
<li role="separator" class="divider"></li>
<li><a href="/log_out/">退出登录</a></li>
</ul>
<!-- Large modal 修改密码模态框 -->
<!-- Large modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<h1 class="text-center">修改密码</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="">用户名</label>
<input type="text" disabled value="{{ request.user.username }}"
class="form-control">
</div>
<div class="form-group">
<label for="">原密码</label>
<input type="password" id="id_old_password" class="form-control">
</div>
<div class="form-group">
<label for="">新密码</label>
<input type="password" id="id_new_password" class="form-control">
</div>
<div class="form-group">
<label for="">确认密码</label>
<input type="password" id="id_confirm_password" class="form-control">
</div>
<button type="button" class="btn btn-default pull-right"
data-dismiss="modal">
取消修改
</button>
<button class="btn btn-danger center-block pull-right"
style="margin-bottom: 30px;margin-right: 10px" id="id_edit">
确认修改
</button>
<span style="color: red" id="id_pwd_error"></span>
</div>
</div>
</div>
</div>
</div>
</li>
{% else %}
<li><a href="/register/">注册</a></li>
<li><a href="/login/">登陆</a></li>
{% endif %}
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script>
$('#id_edit').click(function(){
$.ajax({
url:"/set_password/",
type:"post",
data : {
"old_password":$("#id_old_password").val(),
"new_password":$("#id_new_password").val(),
"confirm_password":$("#id_confirm_password").val(),
"csrfmiddlewaretoken":"{{ csrf_token }}",
},
success:function (args){
if (args.code === 1000){
// 刷新页面
alert(args.message);
window.location.reload();
}else{
$("#id_pwd_error").text(args.message)
}
}
})
})
</script>
</body>
</html>
-
首先要有一个导航栏
- 导航栏参照bootstrap官方文档的导航栏
<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> -
分别修改其中的参数
-
展示效果
-
修改密码采用模态框
- 模板参考bootstrap官方文档
- 官方文档里面有bug
- 下面的代码我对bug进行了更改
<!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> ... </div> </div> </div> - 模板参考bootstrap官方文档
-
模态框中用户需要输入相关的数据
- 用户名(默认指定，不让用户选择)
- 旧密码
- 新密码
- 二次密码
- 确认修改
- 取消修改
<!-- Large modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <h1 class="text-center">修改密码</h1> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="form-group"> <label for="">用户名</label> <input type="text" disabled value="{{ request.user.username }}" class="form-control"> </div> <div class="form-group"> <label for="">原密码</label> <input type="password" id="id_old_password" class="form-control"> </div> <div class="form-group"> <label for="">新密码</label> <input type="password" id="id_new_password" class="form-control"> </div> <div class="form-group"> <label for="">确认密码</label> <input type="password" id="id_confirm_password" class="form-control"> </div> <button type="button" class="btn btn-default pull-right" data-dismiss="modal"> 取消修改 </button> <button class="btn btn-danger center-block pull-right" style="margin-bottom: 30px;margin-right: 10px" id="id_edit"> 确认修改 </button> <span style="color: red" id="id_pwd_error"></span> </div> </div> </div> </div> </div>
【2】事件绑定
-
给登陆/注册按钮绑定跳转路由
<li><a href="/register/">注册</a></li><li><a href="/login/">登陆</a></li> -
给修改密码/退出登录绑定跳转路由
-
<li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li> -
<li><a href="/log_out/">退出登录</a></li>
-
-
给确认修改按钮绑定Ajax请求
$('#id_edit').click(function(){ $.ajax({ url:"/set_password/", type:"post", data : { "old_password":$("#id_old_password").val(), "new_password":$("#id_new_password").val(), "confirm_password":$("#id_confirm_password").val(), "csrfmiddlewaretoken":"{{ csrf_token }}", }, success:function (args){ if (args.code === 1000){ // 刷新页面 alert(args.message); window.location.reload(); }else{ $("#id_pwd_error").text(args.message) } } }) }) -
先拿到确认修改按钮
-
绑定Ajax请求
-
指定跳转路由
/set_password/
-
构造数据
-
data : { "old_password":$("#id_old_password").val(), "new_password":$("#id_new_password").val(), "confirm_password":$("#id_confirm_password").val(), "csrfmiddlewaretoken":"{{ csrf_token }}", },
-
-
根据后端状态展示信息
-
success:function (args){ if (args.code === 1000){ // 刷新页面 alert(args.message); window.location.reload(); }else{ $("#id_pwd_error").text(args.message) }
-
-
【四】后端校验数据返回信息
【1】首页接口
- 返回首页页面
# 首页接口
def home(request, *args, **kwargs):
return render(request, 'home.html', locals())
【2】修改密码接口
- 全局登录验证
- 修改配置文件
# 全局登陆验证
LOGIN_URL = '/login/'
- 修改密码校验
from django.contrib.auth.decorators import login_required
# 修改密码接口
@login_required
def set_password(request, *args, **kwargs):
if request.is_ajax():
back_dict = {"code": 1000, "message": ""}
old_password = request.POST.get('old_password')
new_password = request.POST.get('new_password')
confirm_password = request.POST.get('confirm_password')
is_right = request.user.check_password(old_password)
if is_right:
if new_password == confirm_password:
request.user.set_password(new_password)
request.user.save()
back_dict['message'] = "修改成功"
else:
back_dict['code'] = 2001
back_dict['message'] = "两次密码不一致"
else:
back_dict['code'] = 2002
back_dict['message'] = "与原密码不符"
return JsonResponse(back_dict)
-
主逻辑
-
校验请求方式-Ajax请求
if *request*.is_ajax():
-
不是Ajax请求，不会走修改密码
-
构建初识化返回数据字典
-
获取用户输入的信息
- 旧密码
old_password = request.POST.get('old_password')
- 新密码
new_password = request.POST.get('new_password')
- 确认密码
confirm_password = request.POST.get('confirm_password')
- 旧密码
-
将旧密码交给auth模块中的功能进行校验
is_right = request.user.check_password(old_password)
-
旧密码不正确
-
返回错误信息
back_dict['code'] = 2002 back_dict['message'] = "与原密码不符"
-
-
旧密码正确
-
校验两次密码正确
- 修改密码
request.user.set_password(new_password)
- 保存密码
request.user.save()
- 更新反馈信息
back_dict['message'] = "修改成功"
- 修改密码
-
校验两次密码不正确
-
更新错误信息
back_dict['code'] = 2001 back_dict['message'] = "两次密码不一致"
-
-
-
返回反馈信息
return JsonResponse(back_dict)
-
【3】退出登录接口
- 使用auth模块自带的注销功能
# 退出登录接口
@login_required
def log_out(request, *args, **kwargs):
auth.logout(request)
return redirect('/home/')
本文来自博客园，作者：Chimengmeng，转载请注明原文链接：https://www.cnblogs.com/dream-ze/p/17571579.html
