![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
今天学习了员工管理系统中的系统设置功能 关闭站点功能 分页功能 作业：分页首页尾页中间...隐藏前进一大页后退一大页功能实现。（作业目前暂未作）
一、系统设置功能
这里同修改员工功能一样，只不过这里数据交互在当前页面，通过在ajax中提交目标设置为<?= $_SERVER['PHP_SELF']?>?action=save'实现。
<?php session_start();?>
<?php if (!isset($_SESSION['username'])): ?>
<style>h2,p{text-align: center;margin-top: 50px;}</style>
<h2>您还没有登录呢~~</h2>
<p>正在跳转到登录页面...</p>
<script>
setTimeout("location.assign('login.php')", 2000);
</script>
<?php else:?>
<?php
// 连接数据库
$pdo = new PDO('mysql:dbname=php', 'root', 'root');
if (isset($_GET['action']) && $_GET['action'] === 'save') {
// sql语句
$sql = 'UPDATE `system`
SET `name`=:name, `address`=:address, `tel`=:tel, `closed`=:closed
WHERE `id`=:id';
// 设置准备对象
$stmt = $pdo->prepare($sql);
// 数据绑定
$stmt->bindValue('name', $_POST['name'], PDO::PARAM_STR);
$stmt->bindValue('address', $_POST['address'], PDO::PARAM_STR);
$stmt->bindValue('tel', $_POST['tel'], PDO::PARAM_STR);
$stmt->bindValue('closed', $_POST['closed'], PDO::PARAM_INT);
$stmt->bindValue('id', $_POST['id'], PDO::PARAM_INT);
// 如果执行的话
if ($stmt->execute()) {
if ($stmt->rowCount() == 1) {
echo json_encode(['status'=>1, 'message'=>'更新成功']);die();
} elseif ($stmt->rowCount() == 0) {
echo json_encode(['status'=>0, 'message'=>'没有数据更新']);die();
}
} else {
echo json_encode(['status'=>-1, 'message'=>'发生错误']); die();
}
} else {
// 查询代码
// 获取准备对象
$stmt = $pdo->prepare('SELECT * FROM `system` LIMIT 1');
// 执行操作
$stmt->execute();
//获取结果记录
$system = $stmt->fetch(PDO::FETCH_ASSOC);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>系统设置</title>
<style>
h3 {
text-align: center;
}
div {
width: 300px;
height: 260px;
/*background-color: lightblue;*/
margin: 0 auto;
text-align: center;
padding: 20px;
border: 1px dashed #888;
border-radius: 5%;
}
div input {
border: none;
border-bottom: 1px solid #333;
}
button:hover {
cursor: pointer;
background-color: lightblue;
}
.success {
color: green;
}
.error {
color: red;
}
</style>
</head>
<body>
<h3>系统设置</h3>
<div>
<form name="system">
<p>
<label for="name">公司名称：</label>
<input type="text" name="name" id="name" value="<?= $system['name']?>">
</p>
<p>
<label for="address">公司地址：</label>
<input type="text" name="address" id="address" value="<?= $system['address']?>">
</p>
<p>
<label for="tel">公司电话：</label>
<input type="text" name="tel" id="tel" value="<?= $system['tel']?>">
</p>
<p>关闭站点：
<input type="radio" id="close" name="closed" value="1"><label for="close">关闭</label>
<input type="radio" id="open" name="closed" value="0"><label for="open">开启</label>
</p>
<script>
var close = document.getElementById('close');
var open = document.getElementById('open');
// 将male female的值变成整数 然后判断是否checked
if (parseInt(close.value) === <?= $system['closed']?>) {
close.checked = true;
}
if (parseInt(open.value) === <?= $system['closed']?>) {
open.checked = true;
}
</script>
<p><input type="hidden" name="id" value="<?= $system['id']?>"></p>
<p>
<button type="button" onclick="save(this.form)">修改</button>
<button type="button" onclick="history.back()">取消</button>
</p>
<!-- 提示占位符-->
<p></p>
</form>
</div>
<script>
function save(form) {
//ajax异步提交数据
var request = new XMLHttpRequest();
// 准备状态获取响应返回数据
request.onreadystatechange = function () {
// console.log(request.responseText);
var data = JSON.parse(request.responseText);
var tips = form.lastElementChild;
tips.innerText = data.message;
if (data.status === 1) {
tips.classList.add('success');
} else {
tips.classList.add('error');
}
setTimeout(function () {
history.back();
top.location.reload();
}, 2000);
};
// 提交方式及提交目标
request.open('POST', '<?= $_SERVER['PHP_SELF']?>?action=save');
// 设置请求头
request.setRequestHeader('content-type','application/x-www-form-urlencoded');
// 数据变量
var data = {
name:form.name.value,
address:form.address.value,
tel:form.tel.value,
closed:form.closed.value,
id:form.id.value
};
var system = 'name='+data.name+
'&address='+data.address+
'&tel='+data.tel+
'&closed='+data.closed+
'&id='+data.id;
// 发送数据
request.send(system);
}
</script>
</body>
</html>
<?php endif;?>点击 "运行实例" 按钮查看在线实例
二、站点关闭功能
数据库新建system表，在config页面中设置closed值（1为关闭 0显示），然后在index中根据closed的值进行显示与否的判断，当然可以通过在index连接数据库获取closed值，但是这里引入了环境变量$_ENV，我认为这也可省去重复连接数据库，减轻数据库负担，index相对来说还是要频繁访问的，利用环境变量全局访问的特性，一处引用多处实现。
新建config.php
<?php
// 连接数据库
$pdo = new PDO('mysql:dbname=php', 'root', 'root');
// 准备对象
$stmt = $pdo->prepare('SELECT * FROM `system` LIMIT 1');
// 执行
$stmt->execute();
// 得到记录对象
$system = $stmt->fetch(PDO::FETCH_ASSOC);
// 将数据库中的字段值赋给 超级全局变量$_ENV中，可以供其他页面使用
$_ENV['closed'] = $system['closed'] ? 1 : 0;
$_ENV['name'] = $system['name'];
$_ENV['address'] = $system['address'];
$_ENV['tel'] = $system['tel'];点击 "运行实例" 按钮查看在线实例
index.php
<?php session_start()?>
<!--文件加载失败会终止程序-->
<?php require 'config.php'?>
<!--问价加载失败会报错 不会终止程序-->
<?php include 'config.php'?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>瑾瑜网络 员工管理系统</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php"><span>瑾瑜</span>网络</a>
<ul class="user-menu">
<li class="dropdown pull-right">
<?php if (isset($_SESSION['username'])):?>
<a href="#" class="dropdown-toggle" ><span class="glyphicon glyphicon-user"></span> <?=$_SESSION['username'] ?></a>
|
<a href="javascript:return false" class="dropdown-toggle" onclick="return confirm('是否推出？')?location.assign('logout.php'):false ;" > 退出 </a>
<?php else:?>
<script>location.assign('login.php');</script>
<?php endif; ?>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
<form role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索">
</div>
</form>
<ul class="nav menu">
<?php if ($_ENV['closed'] == 0):?>
<li class="active"><a href="staff_list.php" target="workspace"><span class="glyphicon glyphicon-dashboard"></span> 员工管理</a></li>
<?php endif;?>
<li><a href="system.php" target="workspace"><span class="glyphicon glyphicon-th"></span> 系统设置</a></li>
<li><a href="user_list.php" target="workspace"><span class="glyphicon glyphicon-stats"></span> 用户设置</a></li>
</ul>
<div class="attribution">版权所有 <a href="#" target="_blank" title=>@<?= $_ENV['name']?> </a>
<br>
<?= $_ENV['address']?> | <?= $_ENV['tel']?>
</div>
</div><!--/.sidebar-->
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<iframe src="staff_list.php" name="workspace" class="workspace"></iframe>
</div> <!--/.main-->
</body>
</html>点击 "运行实例" 按钮查看在线实例
三、分页功能
主要理解实现原理，LIMIT 偏移量,每页显示数；偏移量 = （当前页码 - 1）*每页显示数；
<?php
//连接数据库
$pdo = new PDO('mysql:dbname=php', 'root', 'root');
//每页显示数据数
$pageNum = 5;
//获取当前页的页码 通过url的p用get传递
$page = isset($_GET['p']) ? $_GET['p'] : 1;
//echo $page;
//获取总记录数
$stmt = $pdo->prepare('SELECT COUNT(*) FROM `staff` WHERE `is_show`=1');
//$stmt->errorInfo();
$stmt->execute();
$total = $stmt->fetchColumn(0);
//获取总页码
$pages = ceil($total/$pageNum);
//偏移量
$offset = ($page - 1) * $pageNum;
//sql语句
$sql = "SELECT * FROM `staff` WHERE `is_show`=1 ORDER BY `hiredate` DESC LIMIT {$offset},{$pageNum}";
//准备对象
$stmt = $pdo->prepare($sql);
//执行
$stmt->execute();
// 员工信息
$staffs = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 标题
$title = '员工信息表';
// 表格标题
$tableTitle = $title;
// 员工数量
//$total = count($staffs);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?php echo $title; ?></title>
<style>
table,th,td {
border: 1px solid #666;
padding: 8px;
}
table {
border-collapse: collapse;
width: 80%;
text-align: center;
margin: 30px auto;
}
thead tr:first-of-type {
background-color: lightblue;
}
tbody tr:hover {
background-color: #efefef;
}
table > caption {
font-size: 1.2rem;
margin-bottom: 15px;
}
table + p {
text-align: center;
}
button:hover {
cursor: pointer;
background-color: lightblue;
}
/*设置分页样式*/
table + p {
text-align: center;
}
table + p a {
display: inline-block;
width: 30px;
height: 24px;
color: #666;
border: 1px solid #333;
text-decoration-line: none;
}
/*鼠标悬停到分页码上的效果*/
table + p a:hover {
background-color: lightblue;
color: #000;
}
/*添加按钮给个特殊样式*/
#add {
height: 25px;
width: 90px;
position: absolute;
right: 10%;
top: 32px;
}
</style>
</head>
<body>
<button onclick="location.href='staff_add.php'" id="add">添加</button>
<table>
<caption>
<?php
echo '<span style="color:red">' . $tableTitle . '</span>';
?>
</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>手机</th>
<td>入职</td>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--foreach()替代语法-->
<?php foreach($staffs as $staff) : ?>
<tr>
<td><?php echo $staff['id']; ?></td>
<td><?php echo $staff['name']; ?></td>
<td><?php echo $staff['age']; ?></td>
<!--if()替代语法-->
<td>
<?php if($staff['sex'] == 1) : ?>
男
<?php else: ?>
女
<?php endif; ?>
</td>
<!--如果只是简单的输出变量可以使用php短标签语法-->
<td><?=$staff['mobile']?></td>
<td>
<?php
echo date('Y/m/d',$staff['hiredate']);
?>
</td>
<td>
<button onclick="location.href='staff_edit.php?id=<?=$staff['id']?>'">编辑</button>
<button onclick="return confirm('是否删除？') ? location.assign('staff_manage.php?action=del&id=<?=$staff['id']?>') : false"><span style="color:red">删除</span></button>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<!--<p>总计:
<?php /*echo $total; */?>
人</p>-->
<p>
<!--分页页码通过循环***-->
<?php for ($i=1;$i<=$pages;$i++):?>
<?php
if (isset($_GET['p']) && $_GET['p'] == $i):
$bgcolor = 'style="background-color:lightblue"';
else:
$bgcolor = '';
endif;?>
<a href="javascript: location.href='<?=$_SERVER['PHP_SELF']?>?p=<?=$i?>'"
<?=$bgcolor?>
>
<?=$i?>
</a>
<?php endfor;?>
</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
四、总结
1、跨页面调用需要重复连接数据库，可以考虑通过环境变量实现；
2、include加载失败会报错不会终止程序 require加载错误就会终止程序
3、分页作业思路，首页最后一页把p的值写死实现，前一页后一页实现通过p当前值+1实现，需要判断是否超出第一页和最后一页，超过了当前按钮就disabled；中间省略号功能还没考虑好，目前有点思路是首先设置有省略号时，中间显示几个页码（中间页码），两头显示几个页码（两头页码），设置好这辆值，然后就开始进行判断。如果当前页- ceil（中间页码/2）>两头页码 并且 当前页+ceil（中间页码/2）< 最大页码 就两头显示.... 如果如果当前页- ceil（中间页码/2）<两头页码 最后显示... 如果当前页+ceil（中间页码/2）> 最大页码 就前面显示...
