![[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
今天，课上学习了员工管理系统的添加 删除 修改，作业时作出软删除。废话不多说上代码，谈逻辑。
一、实现添加功能
在staff_list上的添加按钮设置导航到，staff_add.php，然后新建staff_add.php,然后构建前端页面，在新增按钮设置add方法传入this.form,重点在js的add方法，add方法中要做ajax数据提交将form下的name age position sex mobile的值传递到staff_manage.php,这里需要注意的是，提交按钮里面需要连接到staff_manage,将action=add通过get方法传过来；然后在staff_manage连接数据库，将cation复制给$action，switch判断，当action为add时，那么就执行添加数据到数据库的操作，然后判断，当数据库添加操作被执行时——》（然后再进行判断，影响行数为1时，status为1，message为添加数据成功；影响行数为0时，status为0，message为没有添加数据）；数据库没有执行操作时——》（status为-1，message为操作错误），判断完成后，把status和message专程json格式传回前端staff_add，staff_add页面在ajax返回响应数据阶段，判断如果status时1添加正确css样式，否则为错误样式，然后把message赋给tips的内容，再添加定时器要2秒钟后返回index，至此添加功能完成。
<?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:?>
<!doctype html>
<html lang="zh-cn">
<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">
<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 {
background-color: transparent;
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="user">
<p>
<label for="name">姓名：</label>
<input type="text" name="name" id="name" value="">
</p>
<p>
<label for="age">年龄：</label>
<input type="number" name="age" id="age" value="">
</p>
<p>
<label for="position">职位：</label>
<input type="text" name="position" id="position" value="">
</p>
<p>
<label for="mobile">手机：</label>
<input type="text" name="mobile" id="mobile" value="">
</p>
<p style="margin-left: -55px;">性别：
<input type="radio" id="male" name="sex" value="1" checked><label for="male">男</label>
<input type="radio" id="female" name="sex" value="0"><label for="female">女</label>
</p>
<p>
<button type="button" onclick="add(this.form)">新增</button>
<button type="button" onclick="history.back()">取消</button>
</p>
<!-- 提示占位符-->
<p></p>
</form>
</div>
<script>
function add(form) {
// ajax方式交互数据
var request = new XMLHttpRequest();
// 请求完成获得相应数据
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
// 将返回的json字符串解析成对象
var data = JSON.parse(request.responseText);
// 获取tips元素
var tips = form.lastElementChild;
tips.innerText = data.message;
// 判断返回来的status值 1 成功 反之错误
if (data.status === 1) {
tips.classList.add('success');
} else {
tips.classList.add('error');
}
// 两秒后 返回上一层也就是staff_list
setTimeout(function(){
history.back();
top.location.reload();
},2000);
}
};
//配置请求信息
request.open('POST', 'staff_manage.php?action=add');
// ajax请求头
request.setRequestHeader('content-type','application/x-www-form-urlencoded');
// 发送的数据集合成json数据
var data = {
name:form.name.value,
age:form.age.value,
position:form.position.value,
mobile:form.mobile.value,
sex:form.sex.value
};
var staff = 'name=' + data.name +
'&age=' + data.age +
'&position=' + data.position +
'&sex=' + data.sex +
'&mobile=' + data.mobile;
// 发送请求数据
request.send(staff);
}
</script>
</body>
</html>
<?php endif?>点击 "运行实例" 按钮查看在线实例
二、更新操作
更新操作总体思路和添加一样，也是通过get传给staff_manage一个action=save值 ，通过判断save后然后在执行更新操作，根据执行结果返回响应的status值和message值给前台，前台在进行相应的样式添加。这里的细节主要有，在staff_list的编辑按钮通过隐藏域，把数据库中的id用get方式传递到新建页面staff_edit页面，这也页面的样式同添加页面一直，只不过表单的值时通过id然后数据库查询添加上去的，这里的修改提交按钮还是通过ajax异步post传给staff_manage，然后在进行数据库操作。
<?php
//echo $_GET['id'];
//连接数据库
$pdo = new PDO('mysql:dbname=php', 'root', 'root');
//获取准备对象
$stmt = $pdo->prepare("SELECT * FROM `staff` WHERE `id`=:id");
//$stmt->debugDumpParams();
//执行操作
$stmt->execute(['id'=>$_GET['id']]);
//获取记录
$staff = $stmt->fetch(PDO::FETCH_ASSOC);
//print_r($staff);
?>
<!doctype html>
<html lang="zh-cn">
<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">
<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 {
background-color: transparent;
border: none;
border-bottom: 1px solid #333;
color: #777;
text-align: center;
font-size: inherit;
}
button:hover {
cursor: pointer;
background-color: lightblue;
}
.success {
color: green;
}
.error {
color: red;
}
</style>
</head>
<body>
<h3>编辑员工</h3>
<div>
<form name="user">
<p>
<label for="name">姓名：</label>
<input type="text" name="name" id="name" value="<?=$staff['name']?>">
</p>
<p>
<label for="age">年龄：</label>
<input type="number" name="age" id="age" value="<?=$staff['age']?>">
</p>
<p>
<label for="position">职位：</label>
<input type="text" name="position" id="position" value="<?=$staff['position']?>">
</p>
<p>
<label for="mobile">手机：</label>
<input type="text" name="mobile" id="mobile" value="<?=$staff['mobile']?>">
</p>
<p style="margin-left: -55px;">性别：
<input type="radio" id="male" name="sex" value="1"><label for="male">男</label>
<input type="radio" id="female" name="sex" value="0"><label for="female">女</label>
</p>
<script>
var male = document.getElementById('male');
var female = document.getElementById('female');
// 将male female的值变成整数 然后判断是否checked
if (parseInt(male.value) === <?= $staff['sex']?>) {
male.checked = true;
}
if (parseInt(female.value) === <?= $staff['sex']?>) {
female.checked = true;
}
</script>
<p><input type="hidden" name="id" value="<?= $staff['id']?>"></p>
<p>
<button type="button" onclick="save(this.form)">修改</button>
<button type="button" onclick="history.back()">取消</button>
</p>
<!-- 提示占位符-->
<p></p>
</form>
</div>
</body>
<script>
function save(form) {
// 用ajax方式将数据异步提交
var request = new XMLHttpRequest();
// 请求完成获得响应数据
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
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', "staff_manage.php?action=save");
// post方式请求头
request.setRequestHeader('content-type','application/x-www-form-urlencoded');
// 设置数据
var data = {
name:form.name.value,
age:form.age.value,
position:form.position.value,
sex:form.sex.value,
mobile:form.mobile.value,
id:form.id.value
};
var staff = 'name=' + data.name +
'&age=' + data.age +
'&position=' + data.position +
'&sex=' + data.sex +
'&mobile=' + data.mobile +
'&id=' + data.id;
// 发送请求数据
request.send(staff);
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
三、删除操作
在staff_list里的按钮设置超链接 confirm（‘是否删除’）？location.assign('staff_manage.php?action=del&id=<?=$staff['id']?>') : false" 然后在staff_manage del方法，如果执行成功就弹窗删除成功。
<?php
//连接数据库
$pdo = new PDO('mysql:dbname=php','root','root');
//获取action的get传值
$action = strtolower(trim($_GET['action']));
//根据action值判断应该采用的处理方法
switch ($action) {
// 新增方法
case 'add':
// 新增sql语句
$sql = 'INSERT INTO `staff`
(`name`, `age`, `sex`, `position`, `mobile`, `hiredate`) VALUES
(:name, :age, :sex, :position, :mobile, :hiredate);';
// 准备对象
$stmt = $pdo->prepare($sql);
// 将post传过来的值赋给相应的变量
$name = trim($_POST['name']);
$age = trim($_POST['age']);
$sex = trim($_POST['sex']);
$position = trim($_POST['position']);
$mobile = trim($_POST['mobile']);
$hiredate = time();
// 数据绑定
$stmt->bindValue('name', $name, PDO::PARAM_STR);
$stmt->bindValue('age', $age, PDO::PARAM_INT);
$stmt->bindValue('sex', $sex, PDO::PARAM_INT);
$stmt->bindValue('position', $position, PDO::PARAM_STR);
$stmt->bindValue('mobile', $mobile, PDO::PARAM_STR);
$stmt->bindValue('hiredate', $hiredate, PDO::PARAM_INT);
// 如果执行成功，切影响行数等于1那么就是新增成功了
if($stmt->execute()){
if ($stmt->rowCount() == 1) {
$status = 1;
$message = '新增成功';
} elseif ($stmt->rowCount() == 0) {
$status = 0;
$message = '没有新增';
}
} else {
$status = -1;
$message = '发生错误';
}
// 输出json格式的status message值
echo json_encode(['status'=>$status, 'message'=>$message]);
break;
case 'save':
$sql = "UPDATE `staff`
SET `name`=:name, `age`=:age, `position`=:position, `sex`=:sex, `mobile`=:mobile
WHERE `id`=:id";
$stmt = $pdo->prepare($sql);
$name = trim($_POST['name']);
$age = trim($_POST['age']);
$position = trim($_POST['position']);
$sex = trim($_POST['sex']);
$mobile = trim($_POST['mobile']);
$id = trim($_POST['id']);
$stmt->bindValue('name', $name, PDO::PARAM_STR);
$stmt->bindValue('age', $age, PDO::PARAM_INT);
$stmt->bindValue('position', $position, PDO::PARAM_STR);
$stmt->bindValue('sex', $sex, PDO::PARAM_INT);
$stmt->bindValue('mobile', $mobile, PDO::PARAM_STR);
$stmt->bindValue('id', $id, PDO::PARAM_INT);
if ($stmt->execute()) {
if ($stmt->rowCount() == 1) {
$status = 1;
$message = '更新成功';
} else if ($stmt->rowCount() == 0) {
$status = 0;
$message = '没有更新数据';
}
} else {
$status = -1;
$message = '更新发送错误';
}
echo json_encode(['status'=>$status, 'message'=>$message]);
break;
case 'del':
/*
* 这是正常删除
* $sql = 'DELETE FROM `staff` WHERE `id`=:id';
$stmt = $pdo->prepare($sql);
if ($stmt->execute(['id'=>$_GET['id']])) {
echo "<script>alert('删除成功');location.assign('index.php')</script>";
}*/
/*软删除*/
$sql = "UPDATE `staff` SET `is_show`=0 WHERE `id`=:id";
$stmt = $pdo->prepare($sql);
if ($stmt->execute(['id'=>$_GET['id']])) {
echo "<script>alert('删除成功');location.assign('index.php')</script>";
}
}点击 "运行实例" 按钮查看在线实例
四、作业：软删除
通过在数据库添加is_show字段，默认值为1显示，0为不显示，然后在staff_manage中的del中设置为id对应的数据的is_show值为0，在staff_list设置is_show的为1的才显示 就成了
五、总结
添加删除修改 这三个操作相同的都是通过前端相应的数据传输到后段 然后后段判断 进行相应的操做，不同的是添加和修改都需要页面展示。
我需要注意的还是对js的操作，主要对ajax的操作，对超链接的定向location 还有便捷的找到相应的元素不熟悉
