标签：return request pwd session 首页导航条 old password BBS

一、导航条的搭建

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/

标签：return,request,pwd,session,首页,导航条,old,password,BBS
From： https://www.cnblogs.com/yuezongke/p/17388971.html

BBS首页的搭建之导航条and修改密码功能的实现