0621-用户管理系统

实例  用户管理系统 staff类库

<?php

namespace inc;

use PDO;

class Staff
{       //1、连接数据库
    private $pdo = null;

    public function __construct(PDO $pdo)
    {
        $this->pdo = $pdo;
    }
    // 列出用户
    // $num: 每页记录数量, $page: 当前页码
    public function list($num, $page)
    {
        $offset = $num * ($page - 1);
        $sql = "SELECT * FROM `staff` LIMIT {$num} OFFSET {$offset}";
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute();

        // 调试: 查看生成的SQL语句
       // echo $stmt->debugDumpParams();

        // 将查询结果集以二维数组的方式返回
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }

    // 新增用户
    public function insert()
    {
        // 对于前端发送来的JSON字符串, PHP无法直接接收解析,需要使用原始流进行接收
        // file_get_contents(),将接收到的文件或内容(字符串形式)保存到变量中
//        echo file_get_contents('php://input');
//        die;

        $jsonStr = file_get_contents('php://input');
        // json_decode(),第二个参数默认为false,返回对象, true,返回数组
//        $staff = json_decode($jsonStr, false);
        $staff = json_decode($jsonStr, true);

        if (empty($staff['name']) || empty($staff['age']) || empty($staff['position']) || empty($staff['mobile'])) {
            echo json_encode(['status' => 2, 'message'=>'员工基本信息不能为空']);
            exit;
        }

        // 入职时间默认为当前的时间戳
        $staff['hiredate'] = time();

//        var_dump($staff); // 数组
//        die;

        // extract(): 将关联数组转变量, compace(),将多个变量转关联数组
        extract($staff);
//        echo $name, $age, $sex, $position, $mobile, $hiredate;
//        die;
        // 拼装SQL语句, 考虑到INSERT 语句比较长,采用了多行字符串的语法, NOWDOC语法
        $sql = <<< 'INSERT_SQL'
             INSERT INTO `staff`
              (`staff_id`,`name`,`age`,`sex`,`position`,`mobile`,`hiredate`)
              VALUES (NULL,:name,:age,:sex,:position,:mobile, :hiredate);
INSERT_SQL;
//        echo $sql; die;

        // 执行SQL操作
        $stmt = $this->pdo->prepare($sql);

        // 将变量绑定到SQL语句模板对象: PDOStement
        $stmt->bindParam('name', $name, PDO::PARAM_STR);
        $stmt->bindParam('age', $age, PDO::PARAM_INT);
        $stmt->bindParam('sex', $sex, PDO::PARAM_INT);
        $stmt->bindParam('position', $position, PDO::PARAM_STR);
        $stmt->bindParam('mobile', $mobile, PDO::PARAM_STR);
        $stmt->bindParam('hiredate', $hiredate, PDO::PARAM_INT);
        $stmt->execute();
        // 如果直接将$staff数组做为参数传递给execute()方法, 默认都是字符类型,无法指定具体类型
        // 如果涉及查询条件,会出问题,例如,显示数量等
//        $stmt->execute($staff);
//        echo $stmt->debugDumpParams();die;

        if ($stmt->rowCount() === 1) {
            $result = ['status'=>1, 'message'=>'添加成功'];
        } else {
            $result = ['status'=>0, 'message'=>'添加失败'];
        }
        // 将执行结果再经JSON格式返回到前端
        echo json_encode($result);
        exit();
    }

    // 编辑
    public function update($staffId)
    {

        $sql = 'SELECT * FROM `staff` WHERE `staff_id` = :staff_id';
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute(['staff_id'=>$staffId]);

        $staff = [];
        if ($stmt->rowCount() === 1) {
            $staff = $stmt->fetch(PDO::FETCH_ASSOC);
        }

        echo json_encode($staff);
        die;
    }

    // 执行编辑操作
    public function doEdit()
    {
        $jsonStr = file_get_contents('php://input'); //php不能直接识别JSON，用这个方法接原始数据流转换成JSON 格式
        // 将前端接收到的JSON转为PHP数组格式
        $staff = json_decode($jsonStr, true);    // 将前端接收到的JSON转为PHP数组格式

        // 准备更新语句的模板  //<<< 'UPDATE_SQL定界符
        $sql = <<< 'UPDATE_SQL'
            UPDATE `staff` 
            SET `name`=:name, `age`=:age, `sex`=:sex, `position`=:position,`mobile`=:mobile
            WHERE `staff_id` = :staff_id;
UPDATE_SQL;

        $stmt = $this->pdo->prepare($sql);
        $stmt->execute($staff);

        switch ($stmt->rowCount())
        {
            case 0:
                $result = ['status'=>0, 'message'=>'没有数据被更新'];
                break;
            case 1:
                $result = ['status'=>1, 'message'=>'更新成功'];
                break;
            default:
                $result = ['status'=>2, 'message'=>'未知错误或更新失败'];
        }

        // 将执行结果再经JSON格式返回到前端
        echo json_encode($result);
        exit();
    }

    public function find($name){
       $name = isset($name)? $name : null ;
        //$offset = $num * ($page - 1);
        //SELECT * FROM `staff` WHERE `name` LIKE '小' LIMIT 50
//        $sql = "SELECT '. * . ' FROM '.`staff`. ' WHERE '. `name` . ' LIKE ' . $name .' LIMIT ' . 50";
//        $sql = "SELECT * FROM `staff` LIMIT {$num} OFFSET {$offset}";

        $sql = "SELECT * FROM `staff` WHERE `name` LIKE '%{$name}%' LIMIT 5 OFFSET 0";


        // 调试: 查看生成的SQL语句

        // 将查询结果集以二维数组的方式返回
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute();
        $finds=$stmt->fetchAll(PDO::FETCH_ASSOC);
       // $stmt->debugDumpParams();
        return $finds ;

    }



    // 删除操作
    public function delete($id)
    {
        $sql = 'DELETE FROM `staff` WHERE `staff_id` = :staff_id';
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute(['staff_id'=>$id]);
        if ($stmt->rowCount() === 1) {
            $result = ['status'=>1, 'message'=>'删除成功'];
        } else {
            $result = ['status'=>0, 'message'=>'删除失败'];
        }
        // 将执行结果再经JSON格式返回到前端
        echo json_encode($result);
        exit();

    }

    // 编辑
    public function update1($staffId)
    {

        $sql = 'SELECT * FROM `staff` WHERE `staff_id` = :staff_id';
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute(['staff_id'=>$staffId]);

        $staff = [];
        if ($stmt->rowCount() === 1) {
            $staff = $stmt->fetch(PDO::FETCH_ASSOC);
        }

        echo json_encode($staff);
        die;
    }

    // 修改密码
    public function np($password)
    {   //file_get_contents将真个文件读入到一个字符串
        $jsonStr = file_get_contents('php://input'); //php不能直接识别JSON，用这个方法接原始数据流转换成JSON 格式
        // 将前端接收到的JSON转为PHP数组格式
        $staff = json_decode($jsonStr, true);    // 将前端接收到的JSON转为PHP数组格式

        // 准备更新语句的模板  //<<< 'UPDATE_SQL定界符
        $sql = "SELECT * FROM `user` WHERE `email`='admin@php.cn'";
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute($staff);
        $stmt->debugDumpParams();
        $res= $stmt->fetchAll(PDO::FETCH_ASSOC);
       // echo print_r($res[0]['user_id'],true);

        $sql = "UPDATE  `user` SET `password`=sha1('{$password}') WHERE `user_id` = '{$res[0]['user_id']}'"; //变量加大括号，在加''号表示字符串
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute();
        $stmt->debugDumpParams();

        $result= $stmt->fetchAll(PDO::FETCH_ASSOC);


        switch ($stmt->rowCount())
        {
            case 0:
                $result = ['status'=>0, 'message'=>'密码没有更新成功'];
                break;
            case 1:
                $result = ['status'=>1, 'message'=>'密码更新成功'];
                break;
            default:
                $result = ['status'=>2, 'message'=>'未知错误或更新失败'];
        }

        // 将执行结果再经JSON格式返回到前端
        echo json_encode($res[0]['user_id']);
        exit();
    }





    // 退出登录
    public function logout()
    {
        session_destroy();
        echo json_encode(['status'=>1, 'message'=>'退出成功']);
        exit;
    }

}

实例   staff_manage.php 实现按用户名查找，修改管理员密码，还有待继续改动

<?php
//开启会话
session_start();
//require 'caozuo.php';

// $_SERVER['QUERY_STRING']: 获取URL中的查询字符串(键值对)
// http://php.io/0620/staff_manage.php?action=list?p=1
//echo $_SERVER['REQUEST_URI'],'<br>';
// strstr($str, $searchStr, true): 返回$searchStr之前的字符,获取除页码之前的URL地址
// 使用p=当作标志位进行切割
//http://php.io/0620/staff_manage.php?action=list?
//echo strstr($_SERVER['REQUEST_URI'], 'p=', true), '<br>';
//echo $_SERVER['QUERY_STRING'],'<br>';
// 将查询字符串解析到数组中
//parse_str($_SERVER['QUERY_STRING'], $params);
//print_r($params);// Array ( [action] => list [p] => 2 )



// 连接数据库
require 'inc/connect.php';

// 加载Staff类并实例化
require 'inc/Staff.php';

$staff = new inc\Staff($pdo);

// 当前页数
// print_r($_GET);

// 当前的页码, 默认为1
$page = ($_GET['p']) ??  1;
// 获取当前请求类型

$action = $_GET['action'];
echo $action;
// 每页显示的记录数量
$num = 6;

// 总页数= 总数据条数/每页的条数 ，然后向上取整  //这一部分是计算显示list的总页数
$sql = "SELECT CEIL(COUNT(*)/{$num}) FROM `staff`";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$total = $stmt->fetchColumn(0);  //绑定0列,所有用户的索引值，从0开始
//echo $total;die;





// 判断应该执行的操作
switch ($action)
{
    // 员工列表
    case 'list':

        $staffs = $staff->list($num, $page);
        break;

    // 新增员工
    case 'insert':
        $staff->insert();
        break;

    // 更新
    case 'update':
        $staff->update1($_GET['id']);
        break;

    // 更新操作
    case 'doEdit':
        $staff->doEdit();
        break;
   // 查找操作
    case 'find':                                     //这里是find操作

        $staffs = $staff->find( $_GET['name']);


    break;

    // 删除操作
    case 'delete':
        $staff->delete($_GET['id']);
        break;
        //修改密码
    case 'ps3':
        echo $_GET['ps3'];
        $staff->np($_GET['ps3']);
        break;

    // 退出登录操作
    case 'logout':
        $staff->logout();
        break;
}

?>





<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <title>后台首页</title>
</head>
<body>

<!--  **************  公共部分，不论什么时候都显示调用****************-->

<div class="container">
    <div class="row">
        <!--        判断用户是否登录?-->
        <div class="col-md-10 col-md-offset-1">
            <?php if (isset($_SESSION['user_id'])) :?>

                <!--        顶部导航-->
                <nav class="navbar navbar-default" style="border-radius: 0;background-color: lightblue">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">用户管理系统</a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#"><?php echo $_SESSION['username'];?></a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">操作 <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" type="button" data-toggle="modal" data-target="#myModal">修改密码</a></li>
                                        <li><a href="#" onclick="logout();return false;">退出</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>

                <!--            显示用户信息与基本操作-->
                <table class="table table-bordered table-hover">
                    <caption><h3 class="text-center">用户信息表</h3></caption>
                    <thead>
                    <tr class="bg-info text-center">
                        <td>ID</td>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>性别</td>
                        <td>职位</td>
                        <td>手机</td>
                        <td>入职时间</td>
                        <?php if($_SESSION['username'] === 'admin') : ?>
                            <td>操作</td>
                        <?php endif; ?>
                    </tr>
                    </thead>

                    <tbody>
                    <?php foreach ($staffs as $staff ): ?>
                    <tr class="text-center">
                        <td><?php echo $staff['staff_id']?></td>
                        <td><?php echo $staff['name']?></td>
                        <td><?php echo $staff['age']?></td>
                        <td><?php echo $staff['sex'] ? '男' : '女' ?></td>
                        <td><?php echo $staff['position']?></td>
                        <td><?php echo $staff['mobile']?></td>
                        <td><?php echo date('Y-m-d',$staff['hiredate']) ?></td>
                        <?php if ($_SESSION['username'] === 'admin'): ?>
                        <td>
                            <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#update" onclick="edit(document.forms.namedItem('update'),<?php echo $staff['staff_id']?>)">编辑</button>
                            <button class="btn btn-danger btn-sm"  onclick="isDel(this,<?php echo $staff['staff_id'];?>)">删除</button>
                        </td>
                        <?php endif; ?>
                    </tr>
                    <?php endforeach;?>
                    </tbody>
                </table>





<!--                搜索功能               -->
                <div class="pull-left">
                   <form action="" class="form-group form-inline">
                       <label for="search"></label>
                       <input type="text" class="form-control" placeholder="输入姓名" id="search">
                      <button class="btn btn-info btn-sm" id = 'fbtn' type="button">搜索</button>
                   </form>


               </div>
<!--                添加功能, 使用模态框来做-->
                <div class="pull-right"><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#insert">添加</button></div>


<!--                分页条-->
                <nav class="text-center">
                    <ul class="pagination">
                        <?php
                        $url = strstr($_SERVER['REQUEST_URI'], 'p=', true);

                        // 前一页, 重点是越界处理,当前页为0时, 始终保证为1即可
                        $prev = $_GET['p']-1;
                        $prev = ($prev <= 0) ? 1 : $prev;
                        echo '<li><a href='.$url.'p='.$prev .'>前一页</a></li>';

                        for ($i = 1; $i <= $total; $i++){
                            // 设置当前页亮亮, 页码与当前的get参数p相等
                            $active = ($i == $_GET['p']) ? 'active' : '';
                            echo "<li class='{$active}'><a href='{$url}p={$i}'>{$i}</a></li>";
                        }

                        // 下一页: 与前一页功能类似, 重点也是对于页码越界的处理
                        $next = $_GET['p']+1;
                        // 如果当前页大于最大页码则只输出当前页,不再递增
                        $next = ($next >= $total) ? $total : $next;
                        echo '<li><a href='.$url.'p='.$next .'>下一页</a></li>';

                        ?>
                    </ul>
                </nav>



            <?php else :?>
                <script>alert('请登录');location.href='login.php';</script>
            <?php endif;?>
        </div>
    </div>

<!--添加数据的模态框-->
    <div class="modal fade" id="insert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <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">×</span></button>
                    <h4 class="modal-title text-center" id="myModalLabel">添加员工</h4>
                </div>
                <div class="modal-body">
                    <form name="insert">
                        <div class="form-group">
                            <label for="name">姓名:</label>
                            <input type="text" class="form-control" id="name" placeholder="Name" required>
                        </div>
                        <div class="form-group">
                            <label for="age">年龄</label>
                            <input type="number" class="form-control" id="age" min="25" placeholder="Age" required>
                        </div>
                        <div class="form-group">
<!--                            label中的for也input中的id绑定, 单击会直接选择对应的按钮-->
                            <label for="1">性别:</label>
<!--                            后面的label,推荐将for与radio中的value属性值设置成一样的,并且value与id也一样-->
                            <input type="radio" id="1" name="sex" value="1" checked><label for="1">男</label>
                            <input type="radio" id="0" name="sex" value="0"><label for="0">女</label>
                        </div>

                        <div class="form-group">
                            <label for="position">职务:</label>
                            <input type="text" class="form-control" id="position" placeholder="Position" required>
                        </div>

                        <div class="form-group">
                            <label for="mobile">手机:</label>
                            <input type="text" class="form-control" id="mobile" placeholder="Mobile" required>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<!--                    以当前表单做为参数,调用save()函数完成数据的添加操作-->
                    <button type="button" class="btn btn-primary"  onclick="save(document.forms.namedItem('insert'))">保存</button>
<!--                    信息提示框-->
                    <div class="alert alert-success  pull-left" role="alert" id="alert1" style="display: none">
<!--                        登录成功-->
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<!--编辑用户的模态框-->
<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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">×</span></button>
                <h4 class="modal-title text-center" id="myModalLabel">编辑员工信息</h4>
            </div>
            <div class="modal-body">
                <form name="update">
                    <div class="form-group">
                        <label for="name">姓名:</label>
                        <input type="text" class="form-control" id="name">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="number" class="form-control" id="age" min="25">
                    </div>
                    <div class="form-group">
                        <!--                            label中的for也input中的id绑定, 单击会直接选择对应的按钮-->
                        <label for="1">性别:</label>
                        <!--                            后面的label,推荐将for与radio中的value属性值设置成一样的,并且value与id也一样-->
                        <input type="radio" id="1" name="sex" value="1" checked><label for="1">男</label>
                        <input type="radio" id="0" name="sex" value="0"><label for="0">女</label>
                    </div>

                    <div class="form-group">
                        <label for="position">职务:</label>
                        <input type="text" class="form-control" id="position">
                    </div>

                    <div class="form-group">
                        <label for="mobile">手机:</label>
                        <input type="text" class="form-control" id="mobile">
                    </div>

                    <!--                    需要额外增加一个隐藏域,保存正在编辑的员工主键id,这是前后端数据交互的依据,这个数据不需要展现给用户-->
                    <input type="hidden" name="staff_id">

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <!--                    以当前表单做为参数,调用save()函数完成数据的添加操作-->
                <!--                doEdit()是真正执行更新的操作, 只需要将当前表单做为参数即可, 可以通过该表单获取到所有需要更新的数据-->
                <button type="button" class="btn btn-primary"  onclick="doEdit(document.forms.namedItem('update'))">保存</button>
                <!--                    信息提示框-->
                <div class="alert alert-success  pull-left" role="alert" id="alert2" style="display: none">
                    <!--                        保存成功-->
                </div>
            </div>
        </div>
    </div>
</div>


<!--删除操作的模态框-->
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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">×</span></button>
<!--                <h4 class="modal-title text-center" id="myModalLabel">删除用户</h4>-->
            </div>
            <div class="modal-body">
                <h3 class="h3 text-center">是否真的删除?</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <!--                    以当前表单做为参数,调用save()函数完成数据的添加操作-->
                <!--                doEdit()是真正执行更新的操作, 只需要将当前表单做为参数即可, 可以通过该表单获取到所有需要更新的数据-->
                <button type="button" class="btn btn-primary" id="del">删除</button>
                <!--                    信息提示框-->
                <div class="alert alert-success  pull-left" role="alert" id="alert2" style="display: none">
                    <!--                        保存成功-->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Button 修改管理员密码模态框 -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">

                    <div class="form-group">
                        <label for="ip3" class="col-sm-2 control-label" >密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="ps3" placeholder="请输入要修改的密码">
                        </div>
                    </div>

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

<script src="static/js/jquery-3.4.1.js"></script>
<script src="static/js/bootstrap.js"></script>

<script>
    //修改管理员密码代码


    var ps3 =document.getElementById('ps3');  //密码框
    var ip3 = document.getElementById('ip3');  //密码保存框按钮
    ip3.onclick=function () {
        console.log(ps3.value);
        var res = new XMLHttpRequest();
        res.onreadystatechange=function () {
            if(res.readyState===4){
                //console.log(res.responseText);
               // var obj = (this.responseText);
                 //console.log(obj);
            }

        };

        //post 发送还不熟练，先用GET发送
        // res.open('post','staff_manage.php?action=ps3',true);
        // res.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
        // // 将表单数据打包到一个js对象中
        // var obj = {
        //     ps3 : ps3.value,
        //
        // };
        // // 将js对象转为json发送
        // var data = JSON.stringify(obj);
        // res.send(data);
        res.open('POST', 'staff_manage.php?action=ps3&p=1&ps3='+ps3.value, true);
        res.send(null);

    };








    //查找数据的代码
    var fbtn = document.getElementById('fbtn');
    var sc = document.getElementById('search');

    fbtn.onclick=function find() {


            var request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if (request.readyState === 4) {
                    //console.log(request.responseText);
                    var text = request.responseText;
                    if(text){
                        location.assign('staff_manage.php?action=find&p=1&name='+sc.value);
                    }else if(text ===null ){
                        alert('什么都没有查到');
                    }else {
                        alert('查询错误');
                    }

                    }
            };
            request.open('GET', 'staff_manage.php?name='+sc.value, true);
            request.send(null);

    };




    // 添加数据函数: save()
    // ***************************insert事件*****************************
    function save(form) {

        // 表单数据的非空验证在服务器端由PHP完成

        // 非空验证完成后, 获取用户的基本信息
        var staffName = form.name.value;
        var staffAge = form.age.value;
        var staffSex = form.sex.value;
        var staffPosition = form.position.value;
        var staffMobile = form.mobile.value;

        //获取信息提示框
        var tips1 = document.getElementById('alert1');


        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (this.readyState === 4) {
                // console.log(this.responseText);
                var obj = JSON.parse(this.responseText);
                // console.log(obj);

                // 将提示框显示出来
                tips1.style.display = 'block';
                switch (obj.status) {
                    case 0:
                        // 设置警告信息提示框的样式: 黄色背景
                        tips1.classList.remove('alert-success');
                        tips1.classList.add('alert-warning');

                        tips1.innerText = obj.message;


                        // 模块点击事件, 2秒后自动点击关闭按钮
                        // javascript事件模拟:http://www.php.cn/js-tutorial-423451.html
                        setTimeout(function () {
                            // 选择要被自动点击的元素,如关闭按钮
                            var closeBtn = document.getElementsByClassName('close').item(0);
                            // 创建一个鼠标标准事件对象
                            var event = document.createEvent('MouseEvents');
                            // 初始化该事件对象,设置事件类型为单击, 可冒泡, 可取消
                            event.initMouseEvent('click',true, true);
                            // 将自定义鼠标单击事件分配给该按钮
                            closeBtn.dispatchEvent(event);
                        }, 2000);

                        break;
                    case 1:
                //         设置成功信息提示框的样式: 绿色背景
                        tips1.classList.remove('alert-warning');
                        tips1.classList.add('alert-success');

                        tips1.innerText = obj.message;

                        // 推荐使用一个函数来封装这个事件模拟程序,这里就直接复制了
                        // 模块点击事件, 2秒后自动点击关闭按钮
                        setTimeout(function () {
                            // 选择要被自动点击的元素,如关闭按钮
                            var closeBtn = document.getElementsByClassName('close').item(0);
                            // 创建一个鼠标标准事件对象
                            var event = document.createEvent('MouseEvents');
                            // 初始化该事件对象,设置事件类型为单击, 可冒泡, 可取消
                            event.initMouseEvent('click',true, true);
                            // 将自定义鼠标单击事件分配给该按钮
                            closeBtn.dispatchEvent(event);
                        }, 2000);

                        // 添加成功后, 自动刷新页面,显示出新增的记录
                        window.location.reload();

                        break;

                    case 2:
                        // 返回非空验证的提示信息
                        // 设置警告信息提示框的样式: 黄色背景
                        tips1.classList.remove('alert-success');
                        tips1.classList.add('alert-warning');

                        tips1.innerText = obj.message;
                        break;

                        // 如果返回了非上面的值,则提示用户
                    default:
                        tips1.innerHTML = '<span style="color:red">类型错误</span>';
                }
            }
        };
        request.open('POST', 'staff_manage.php?action=insert', true);
        // 将表单数据打包到一个js对象中
        var obj = {
            name: staffName,
            age: staffAge,
            sex: staffSex,
            position: staffPosition,
            mobile: staffMobile
        };
        // 将js对象转为json发送
        var data = JSON.stringify(obj);
        // console.log(data);
        // 设置请求头, 注意, 发送的JSON数据
        request.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
        request.send(data); // 注意,现在发送到服务器端的是JSON字符串
    }





    // *****************update更新事件,先查找用户需要更新的对象****************************************
    // 编辑员工信息的点击事件函数
    // 编辑操作,需要一表用来编辑数据表单, 以及需要编辑的记录
    // 所以,需要传入二个参数, 一个是编辑表单, 二是根据主键获取的要编辑的记录
    function edit(form, id) {
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (this.readyState === 4) {
                // console.log(this.responseText);
                // 获取编辑模态框中的编辑表单
                // console.log(form);
                // 将服务器返回的要编辑的记录,JSON转为JS对象
                var obj = JSON.parse(this.responseText);

                // 将对应的数据,填充到指定的表单控件元素中
                form.name.value = obj.name;
                form.age.value = obj.age;
                form.sex.value = obj.sex;
                form.position.value = obj.position;
                form.mobile.value = obj.mobile;
                // 隐藏域的值
                form.staff_id.value = obj.staff_id;
            }
        };

        // GET请求, 更新操作, 需要将需要更新的员工主键ID做为参数传递到服务器端
        request.open('GET', 'staff_manage.php?action=update&id='+id, true);
        request.send(null);
    }



    //*********************doEdit将添加到数据库的新数据更新到页面******************************
    // 保存已更新的员工信息操作
    function doEdit(form) {
        var requset = new XMLHttpRequest();
        requset.onreadystatechange = function () {
            if (this.readyState === 4) {
                console.log(this.responseText);

                // 获取信息提示框
                var tips2 = document.getElementById('alert2');
                // 将提示框显示出来
                tips2.style.display = 'block';

                var jsObj = JSON.parse(this.responseText);

                switch (jsObj.status) {
                    case 0:
                        tips2.innerHTML = '<span style="color:red">'+jsObj.message+'</span>';
                        break;
                    case 1:
                        tips2.innerHTML = jsObj.message;
                        break;
                    case 2:
                        tips2.innerHTML = '<span style="color:red">'+jsObj.message+'</span>';
                        break;
                }

                // 模块点击事件, 2秒后自动点击关闭按钮
                setTimeout(function () {
                    var closeBtn = document.getElementsByClassName('close').item(1);
                    // 创建一个鼠标标准事件对象
                    var event = document.createEvent('MouseEvents');
                    // 初始化该事件对象,设置事件类型为单击, 可冒泡, 可取消
                    event.initMouseEvent('click',true, true);
                    // 将自定义鼠标单击事件分配给该按钮
                    closeBtn.dispatchEvent(event);
                }, 2000);

                // 更新成功后, 自动刷新页面,显示最新数据
                window.location.reload();

            }
        };

        // 准备需要更新的数据
        var $obj = {
            staff_id: form.staff_id.value,
            name: form.name.value,
            age: form.age.value,
            sex: form.sex.value,
            position: form.position.value,
            mobile: form.mobile.value
        };

        // 将JS对象转JSON字符串
        var data = JSON.stringify($obj);

        requset.open('POST', 'staff_manage.php?action=doEdit', true);
        requset.send(data);
    }



    // 是否删除与执行删除操作
    function isDel(ele,id) {
        ele.setAttribute('data-toggle','modal');
        ele.setAttribute('data-target','#delete');

        // 给模态框的删除按钮添加点击事件
        var delBtn = document.getElementById('del');

        delBtn.onclick = function () {
            var request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if (this.readyState === 4) {
                    // console.log(this.responseText);
                    var obj = JSON.parse(this.responseText);
                    if (obj.status === 1) {
                        // 为简化,这里直接用弹窗输出, 大家可以改为Bootstrap信息提示框
                        alert(obj.message);
                    }
                    else {
                        alert(obj.message);
                    }

                    // 模块点击事件, 2秒后自动点击关闭按钮
                    setTimeout(function () {
                        var closeBtn = document.getElementsByClassName('close').item(2);
                        // 创建一个鼠标标准事件对象
                        var event = document.createEvent('MouseEvents');
                        // 初始化该事件对象,设置事件类型为单击, 可冒泡, 可取消
                        event.initMouseEvent('click',true, true);
                        // 将自定义鼠标单击事件分配给该按钮
                        closeBtn.dispatchEvent(event);
                    }, 2000);

                    // 删除成功后, 自动刷新页面
                    window.location.reload();

                }
            };
            request.open('GET', 'staff_manage.php?action=delete&id='+id, true);
            request.send(null);
        }
    }


    // 退出登录
    function logout() {
        if (confirm('是否真的退出?')) {
            var request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if (this.readyState === 4) {
                    console.log(this.responseText);
                    var obj = JSON.parse(this.responseText);
                    if (obj.status === 1) {
                        alert(obj.message);
                        location.href = 'login.php';
                    }
                }
            };
            request.open('GET', 'staff_manage.php?action=logout', true);
            request.send(null);
        }
    }



</script>
</body>
</html>


<!--该项目,还有二个功能未实现:-->
<!--1. 管理员的信息修改,如邮箱,密码-->
<!--2. 员工搜索功能,默认根据员工姓名搜索-->
<!--这是二个小作业 ,供大家周未完成-->