BBS首页的搭建之导航条and修改密码和退出登录功能的实现
目录
一、导航条的搭建
html页面
<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="#">BBS仿博客园作业</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="#">新闻 <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="#">专区</a></li>
<li><a href="#">闪存</a></li>
<li><a href="#">班级</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">怀旧</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">发现</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="学习BBS">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
{% if request.session.username %}
<li><a href="#">{{ request.session.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="#">修改密码</a></li>
<li><a href="#">查看信息</a></li>
<li><a href="#">设置</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">退出登录</a></li>
</ul>
</li>
{% else %}
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
{% endif %}
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
效果：
二、修改密码功能的实现
这里需要用到模态框，在当前页面弹出一个页面，这样做的原因是因为比直接跳转到一个空的页面好看
https://v3.bootcss.com/javascript/#modals
html页面搭建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</head>
<body background="/static/img/img_2.png"
style="background-repeat:no-repeat; background-attachment: fixed; background-size: 100% 100%">
{#导航条#}
<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="#">BBS仿博客园作业</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="#">新闻 <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="#">专区</a></li>
<li><a href="#">闪存</a></li>
<li><a href="#">班级</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">怀旧</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">发现</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="学习BBS">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
{% if request.session.username %}
<li><a href="#">{{ request.session.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="#">退出登录</a></li>
</ul>
</li>
{% else %}
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
{% endif %}
</ul>
<!-- 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">
<h1 class="text-center">修改密码</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="">
<div class="form-group">
<label for="username">username:</label>
<input type="text" id="username" class="form-control" disabled
value="{{ request.session.username }}">
</div>
<div class="form-group">
<label for="password">password:</label>
<input type="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="re_password">Confirm Password:</label>
<input type="password" id="re_password" class="form-control">
</div>
<div class="form-group">
<label for="old_password">old_password:</label>
<input type="password" id="old_password" class="form-control">
</div>
<div class="form-group">
<label for="old_password">Original password:</label>
<input type="password" id="old_password" class="form-control">
</div>
{# <input type="button" class="btn btn-success btn-block" value="提交">#}
<botton class="btn btn-warning btn-block">提交</botton>
<br>
</form>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
修改密码后端逻辑实现
1.session登录装饰器的验证
# 登录装饰器
def login_auth(func_name):
def inner(request, *args, **kwargs):
if request.session.get('username'):
res = func_name(request, *args, **kwargs)
return res
else:
return redirect('/login/')
return inner
2.阻止事件二次提交，主要针对bottom按钮在form表单中，又绑定了Ajax提交：
<script>
$('.btn').click(function (event) {
event.preventDefault();
// return false
})
3.视图函数功能逻辑的实现
@login_auth
def set_password(request):
if request.method == 'POST':
# 1.定义返回前端的数据格式
back_dic = {'code': 200, 'msg': '修改成功'}
# 2.接收参数
new_pwd = request.POST.get('new_password')
re_pwd = request.POST.get('re_password')
old_pwd = request.POST.get('old_password')
# 3.验证参数
if new_pwd != re_pwd:
back_dic['code'] = 1005
back_dic['msg'] = '两次密码不一致'
return JsonResponse(back_dic)
# 4.判断老密码是否正确
old_pwd = my_hashlib(old_pwd)
is_right = models.UserInfo.objects.filter(username=request.session.get('username'),
password=old_pwd).first()
print(is_right)
if not is_right:
back_dic['code'] = 1006
back_dic['msg'] = '老密码不正确'
return JsonResponse(back_dic)
# 5.修改新密码
new_pwd = my_hashlib(new_pwd)
models.UserInfo.objects.filter(pk=request.session.get('id')).update(password=new_pwd)
return JsonResponse(back_dic)
4.js前端页面的实现
<script src="/static/layer/layer.js"></script>
<script>
$('.btn').click(function (event) {
event.preventDefault();
// return false
// 获取参数
var new_password = $('#password').val();
var re_password = $('#re_password').val();
var old_password= $('#old_password').val();
// 2、验证参数
if(!new_password){
layer.msg('新密码必须填写');
return;
}
if(!re_password){
layer.msg('二次确认密码必须填写');
return;
}
if(!old_password){
layer.msg('老密码必须填写');
return;
}
// 3.发起Ajax请求，把前端输入的数据提交到后端
$.ajax({
url:'/set_pwd/', // 这里的URL不能省略
type: 'post',
data: {
new_password: new_password,
re_password: re_password,
old_password: old_password,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (res) {
if(res.code == 200){
layer.msg(res.msg, {icon:1}, function () {
location.reload();
})
} else{
layer.msg(res.msg,{icon: 2})
}
}
})
})
三、退出登录功能的实现
1.视图函数
# 退出登录
def logout(request):
# 清空session
request.session.flush()
# 前端使用的是Ajax提交的，后端不能再跳转了，
# 因为success的res会接收
return redirect('/login/')
ps:不要忘记在前端加上路径/login/
浙公网安备 33010602011771号