代码知识：
iframe的name属性配合a标签的target属性实现页面局部刷新：
a标签的target属性的值指向iframe的name值则会实现
<a href="user/pages/user.php" target="frame">
<iframe src="index.php" name="frame" frameborder="0"></iframe>
PDO连接数据库步骤：
$pdo = new PDO("mysql:host=127.0.0.1;dbname=php;",'root','root'); // 一步创建连接（实例化PDO类的实例对象）
$stmt = $pdo->prepare("select * from staff where id = :id"); // 二步创建预处理
$stmt->bindParam(['id'=>$id]); // 三步绑定参数
$stmt->execute(); // 四步执行预处理语句
$user = $stmt->fetch(PDO::FETCH_ASSOC); // 五步获取数据
$pdo = null; // 六步关闭数据库
************************************************************************************************************
SQL语句：
**查询：** select 字段列表 from 表名 where 查询条件 order by 排序 limit 数量
**更新：** update 表名 set 列明=新值,... where 更新条件
**新增：** insert into 表名 (字段列表) values (新值列表)
如果仅针对MySQL数据库，一下语法效率更高：
insert into 表名 set 列名=新值，列明=新值...
**删除：** delete from 表名 where 删除条件
参数绑定（三种方式）：
execute([':id'=>4]) execute(['id'=>4]) 命名占位符的冒号可写可不写
bindParam(命名占位符，变量，[格式])：绑定一个参数到指定的变量名（类似于占位符）
bindValue(命名占位符，值，[格式])：把一个值绑定到一个参数（与bindParam类似）
格式：
FETCH_ASSOC：把一条记录遍历到关联数组中
FETCH_NUM：把一条记录遍历到索引型数组中
FETCH_BOTH：把一条记录遍历到混合型数组中
FETCH_OBJ：把一条记录遍历到对象中
FETCH_BOUND (bindColumn)：把某个变量绑定到结果集中的某个列
获取数据：
fetch( [格式] ) 获取满足数据的第一条数据 与while结合使用 指针会自动下移 一维数组返回
fetchAll( [格式] ) 获取所有数据 与分页结合使用 二维数组返回
格式：
FETCH_ASSOC：返回一个索引为结果集列名的数组
FETCH_BOTH(默认)：返回一个索引为结果集列名和以0开始的列号的数组
FETCH_BOUND：返回 TRUE ，并分配结果集中的列值给 PDOStatement::bindColumn() 方法绑定的 PHP 变量。
FETCH_CLASS：返回一个请求类的新实例，映射结果集中的列名到类中对应的属性名。如果 fetch_style 包含
FETCH_CLASSTYPE（例如：PDO::FETCH_CLASS | PDO::FETCH_CLASSTYPE），则类名由第一列的值决定
FETCH_INTO：更新一个被请求类已存在的实例，映射结果集中的列到类中命名的属性
FETCH_LAZY：结合使用PDO::FETCH_BOTH和PDO::FETCH_OBJ，创建供用来访问的对象变量名
FETCH_NUM：返回一个索引为以0开始的结果集列号的数组
FETCH_OBJ：返回一个属性名对应结果集列名的匿名对象
************************************************************************************************************
代码：
首页代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="static/layui/css/layui.css" media="all">
<link rel="stylesheet" href="static/css/style.css" media="all">
</head>
<body>
<div class="container">
<div class="layui-row cont-head">
<div class="layui-col-md2">
<h2 class="center">员工管理系统</h2>
</div>
</div>
<div class="layui-row cont-main">
<div class="layui-col-md2 cont-left" id='cont-left'>
<ul>
<li><a href="user/pages/index.php" target="frame"><i class='layui-icon layui-icon-home'></i> 首页</a></li>
<li><a href="user/pages/user.php" target="frame"><i class='layui-icon layui-icon-username'></i> 员工信息</a></li>
<li><a href="user/pages/change.php" target="frame"><i class='layui-icon layui-icon-survey'></i> 人事变动</a></li>
<li><a href="user/pages/approval.php" target="frame"><i class='layui-icon layui-icon-form'></i> 审批事项 <span class="layui-badge">6</span></a></li>
<li><a href="user/pages/administration.php" target="frame"><i class='layui-icon layui-icon-set-fill'></i> 用户管理</a></li>
</ul>
</div>
<div class="layui-col-md10 cont-right">
<iframe src="user/pages/index.php" id='frame' name="frame" frameborder="0"></iframe>
</div>
</div>
<p class="center bq">版权所有 翻版必究</p>
</div>
</body>
</html>
员工信息代码：
<?php
$thead = '员工信息';
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php;','root','root');
$stmt = $pdo->prepare('select * from staff');
$res = $stmt->execute();
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);
$pdo = null;
$num = 1;
?>
<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../static/css/style.css" media="all">
<style>
h3{padding:10px 0;font-size:20px;}
</style>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/layui/layui.all.js"></script>
<h3 class="center"><?=$thead ?></h3>
<table class="layui-table" id='table' lay-even>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>邮箱</th>
<th>工资</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 使用 foreach 替代语法遍历数组 -->
<?php foreach($users as $user): ?>
<tr>
<td data-id="<?=$user['id'] ?>"><?=$num++ ?></td>
<td data-name="<?=$user['name'] ?>"><?=$user['name'] ?></td>
<!-- 使用 if 替代语法 -->
<td data-sex="<?=$user['sex'] ?>">
<?php if($user['sex']==1): ?>
男
<?php else: ?>
女
<?php endif; ?>
</td>
<td data-age="<?=$user['age'] ?>"><?=$user['age'] ?></td>
<td data-email="<?=$user['email'] ?>"><?=$user['email'] ?></td>
<td data-salary="<?=$user['salary'] ?>"><?=$user['salary'] ?></td>
<td>
<button class="layui-btn layui-btn-normal layui-btn-xs" onclick="location.href='user_edit.php?id=<?=$user['id'] ?>'"><i class='layui-icon layui-icon-edit'></i></button>
<button class="layui-btn layui-btn-danger layui-btn-xs delete"><i class="layui-icon layui-icon-delete"></i></button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
layui.use(['layer','form'], function(){
var layer = layui.layer;
var form = layui.form;
form.render();
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
$("#table").delegate(".delete","click",function(){
var tr = $(this).parents('tr').index();
layer.open({
title:'删除',
type: 0,
content: '确定删除此记录？',
yes: function(index, layero){
$("#table tbody tr").eq(tr).remove();
console.log($("#table tbody tr").eq(tr));
layer.close(index);
}
});
});
});
</script>
员工信息编辑页面代码：
<?php
$id = intval(trim($_GET['id']));
$pdo = new PDO("mysql:host=127.0.0.1;dbname=php;",'root','root');
$stmt = $pdo->prepare("select * from staff where id ={$id}");
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
$pdo = null;
?>
<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
<script src="../../static/js/jquery.js"></script>
<script src="../../static/layui/layui.all.js"></script>
<style>
.login{width:350px;margin:50px auto;}
.login h3{text-align:center;line-height:50px;font-size:24px;font-weight:bold;}
.success{color:#5FB878;}
.error{color:#FF5722;}
.notice{color:#FFB800;}
</style>
<div class='login'>
<h3>员工信息编辑</h3>
<form action="" class="layui-form" id='edit-form' name='user'>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="name" value="<?=$user['name']; ?>" readonly lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮 箱</label>
<div class="layui-input-inline">
<input type="email" name="email" value="<?=$user['email']; ?>" required lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密 码</label>
<div class="layui-input-inline">
<input type="password" name="password" value="<?=$user['password']; ?>" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<input type="hidden" name='id' value="<?=$id ?>" />
<div class="layui-form-item">
<label class="layui-form-label"> </label>
<div class="layui-input-inline">
<button class="layui-btn" onclick="save(this.form)">更新</button>
<button class="layui-btn layui-btn-primary" onclick='history.back();'>取消</button>
</div>
</div>
<h4 id='tips' class='success'></h4>
</form>
</div>
<script>
layui.use(['layer','form'], function(){
var layer = layui.layer;
var form = layui.form;
form.render();
function save(form){
// 以 ajax 异步方式与服务器进行数据交互
// 1、创建ajax对象
var request = new XMLHttpRequest();
// 2、监听成功回调
request.onreadystatechange = function(){
// 成功返回的信息
if(request.readyState===4 && request.status===200){
// console.log(request.responseText); // request.responseText === $_POST 响应返回的信息 是user_manager.php 文件内容
var data = JSON.parse(request.responseText); // JSON.parse 将服务器传输的信息转为json对象
var tips = form.lastElementChild;
tips.innerHTML = data.message;
console.log(tips);
if(data.status === 1){
tips.classList.add('success');
}else{
tips.classList.add('error');
}
setTimeout(function() {
history.back();
}, 2000);
}
}
// 3、初始化参数
request.open('POST','user_manager.php?action=save');
// post 请求 需要设置一个请求头
request.setRequestHeader('content-type','application/x-www-form-urlencoded');
// 发送请求到服务器
// 以键值对：
var data = 'email='+form.email.value+'&password='+form.password.value+'&id='+form.id.value;
request.send(data);
}
</script>
数据处理文件代码：
<?php
// 用户管理操作 不是界面
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php;','root','root');
$action = strtolower(trim($_GET['action']));
switch($action){
case 'save': // 更新操作
$stmt = $pdo->prepare("UPDATE `staff` SET `email` = :email,`password` = :password WHERE id = :id");
$email = strtolower(trim($_POST['email']));
$password = sha1(strtolower(trim($_POST['password'])));
$id = $id = intval(trim($_POST['id']));
$stmt->bindParam('email',$email,PDO::PARAM_STR,60);
$stmt->bindParam('password',$password,PDO::PARAM_STR,20);
$stmt->bindParam('id',$id,PDO::PARAM_INT);
if(true === $stmt->execute()){
// 更新成功
if($stmt->rowCount() === 1){
$status = 1;
$message = '更新成功';
}else if($stmt->rowCount() === 0){
$status = 0;
$message = '没有更新';
}
}else{
// 上线后 下面这句话 应删除
// die(print_r($stmt->errorInfo())); //开发时使用
$status = -1;
$message = '保存失败，请检查';
}
echo json_encode(['status'=>$status,'message'=>$message]); // 将信息返回给前台
exit;
breack;
}
$pdo = null;
?>代码效果图：
首页
员工信息
编辑页面
