thinkphp5 第21课：项目案例-更新密码

更新管理员的登录密码效果如下：

当我们点击导航中的管理员”修改密码“时，弹出一个模态框，这部分代码在nav.html中

在前面的模板中，我们曾加包含过nav.html

在此我们再来看一下nav.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="javascript:void(0)">学生管理系统</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><a href="{:url('index/student/all')}">学生列表</a></li>
                <li><a href="{:url('index/student/add')}">添加学生</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">{$Think.session.admin} <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#" data-toggle="modal" data-target="#myModal">修改密码</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="{:url('index/index/logout')}">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">更新密码</h4>
            </div>
            <div class="modal-body">
                <form id="form1" action="{:url('index/admin/updatepwd')}" method="post">
                    <div class="form-group">
                        <label for="newpassword" class="control-label">新密码</label>
                        <input type="password" class="form-control" id="newpassword" name="newpassword">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="btn-save"  class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<script>
    $('#btn-save').click(function () {
        var newpwd = $('#newpassword').val();
        $.post("{:url('admin/updatepwd')}",{newpwd:newpwd},function(data){
            if(data.error==false){
                alert('更新密码成功');
                window.location.href="{:url('index/index/index')}"
            }else{
                alert('更新密码失败');
            }
        },'json');
    })
</script>

其中这部分代码就是有关模态框的

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">更新密码</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="newpassword" class="control-label">新密码</label>
                        <input type="password" class="form-control" id="newpassword" name="newpassword">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="btn-save"  class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

在最外层的div中，有一个id属性：id="myModal"

另外在导航菜单中有这样一行代码：

<li><a href="#" data-toggle="modal" data-target="#myModal">修改密码</a></li>

其中的data-target的值就指向了这个模态框

所以，当我们点击”修改密码“时，会显示模态框

我们使用了jquery封装好的$.post异步提交

$.post("{:url('admin/updatepwd')}",{newpwd:newpwd},function(data){
    if(data.error==false){
        alert('更新密码成功');
        window.location.href="{:url('index/index/index')}"
    }else{
        alert('更新密码失败');
    }
},'json');

由admin控制器的updatepwd执行更新密码操作

admin控制器的更新密码

<?php

namespace app\index\controller;


use app\common\controller\AdminBase;
use think\Db;
use think\exception\PDOException;
use think\Session;

/**
 * 管理员控制器
 * 主要实现更新密码
 */
class Admin extends AdminBase
{

    //更新密码
    public function updatepwd()
    {
        $pwd = input('newpwd');
        $user = Session::get('admin');
        try {
            Db::name('users')->where('user', $user)->update(['password' => $pwd]);
            return ['error' => false];
        } catch (PDOException $ex) {
            return ['error' => true];
        }

    }
}

上面的代码，表面上返回的是一个数组：

return ['error' => false];

由于是ajax调用 ，系统会自动返回json数据格式。

如果不清楚json数据格式，可以详见：

https://www.runoob.com/json/json-tutorial.html

当我们使用ajax调用时，服务器代码一般都会返回json格式的数据