PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能

这个自己的小项目要先告一段落了。可能还有许多bug。请见谅 

删除学生功能

PHP:

// 这里是通过前端代码HTML中的 url 传过来的,用 $_GET 来获取(相关HTML代码可以看一下到主页看一下前几条博客)
if (empty($_GET[\'num\'])) exit(\'<h1>找不到您要删除的学生的学号</h1>\');
$num = $_GET[\'num\'];
$connection = mysqli_connect(\'localhost\', \'root\', \'密码\', \'students_info_system\');
if (!$connection) exit(\'<h1>连接数据库失败</h1>\');
$query = mysqli_query($connection, \"delete from students where num = {$num}\");
if (!$query) exit(\'<h1>该学生信息查询失败</h1>\');
// 注意:这里传入的是连接对象
$affected_rows = mysqli_affected_rows($connection);
if ($affected_rows !== 1) exit(\'<h1>删除失败</h1>\');
header(\'Location: student_info.php\');

编辑学生功能(整体上和添加学生功能差不到,稍微有些许变化)

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset=\"utf-8\">
  <title>编辑学生</title>
  <link rel=\"stylesheet\" type=\"text/css\" href=\"css/Bootstrap.css\" rel=\"external nofollow\" >
</head>
<body>
  <div class=\"container mt-3\">
    <h1 class=\"display-5 text-center\">编辑学生</h1>
    <?php if (isset($error_msg)): ?>
    <div class=\"alert alert-danger\"><?php echo $error_msg; ?></div>
    <?php endif ?>
    <div class=\"row mt-3\">
      <img src=\"<?php echo $current_student[\'photo\']; ?>\" alt=\"<?php echo $current_student[\'name\']; ?>\" width=\"100\" height=\"488\" class=\"col-sm-6\">
      <form action=\"<?php echo $_SERVER[\'PHP_SELF\']; ?>?id=<?php echo $current_num; ?>\" method=\"post\" enctype=\"multipart/form-data\" autocomplete=\"off\" class=\"col-sm-6\">
        <div class=\"form-group\">
          <input type=\"number\" name=\"num\" class=\"form-control\" placeholder=\"学号\" value=\"<?php echo isset($_POST[\'num\']) ? $_POST[\'num\'] : $current_student[\'num\']; ?>\">
        </div>
        <div class=\"form-group\">
          <select class=\"form-control\" name=\"system\">
            <option>请选择学院/系</option>
            <option <?php echo $current_student[\'system\'] === \'电气工程学院\' ? \'selected\' : \'\'; ?>>电气工程学院</option>
            <option <?php echo $current_student[\'system\'] === \'信息工程与艺术学院\' ? \'selected\' : \'\'; ?>>信息工程与艺术学院</option>
            <option <?php echo $current_student[\'system\'] === \'国际教育学院\' ? \'selected\' : \'\'; ?>>国际教育学院</option>
            <option <?php echo $current_student[\'system\'] === \'水利水电工程学院\' ? \'selected\' : \'\'; ?>>水利水电工程学院</option>
            <option <?php echo $current_student[\'system\'] === \'测绘与市政工程学院\' ? \'selected\' : \'\'; ?>>测绘与市政工程学院</option>
            <option <?php echo $current_student[\'system\'] === \'马克思主义学院\' ? \'selected\' : \'\'; ?>>马克思主义学院</option>
            <option <?php echo $current_student[\'system\'] === \'建筑工程学院\' ? \'selected\' : \'\'; ?>>建筑工程学院</option>
            <option <?php echo $current_student[\'system\'] === \'经济与管理学院\' ? \'selected\' : \'\'; ?>>经济与管理学院</option>
          </select>
        </div>
        <div class=\"form-group\">
          <input type=\"text\" name=\"class\" class=\"form-control\" placeholder=\"班级\" value=\"<?php echo isset($_POST[\'class\']) ? $_POST[\'class\'] : $current_student[\'class\']; ?>\">
        </div>
        <div class=\"form-group\">
          <input type=\"text\" name=\"name\" class=\"form-control\" placeholder=\"姓名\" value=\"<?php echo isset($_POST[\'name\']) ? $_POST[\'name\'] : $current_student[\'name\']; ?>\">
        </div>
        <div class=\"form-group\">
          <select class=\"form-control\" name=\"gender\">
            <option value=\"-1\">请选择性别</option>
            <option <?php echo $current_student[\'gender\'] === \'1\' ? \'selected\' : \'\'; ?> value=\"1\">男</option>
            <option <?php echo $current_student[\'gender\'] === \'0\' ? \'selected\' : \'\'; ?> value=\"0\">女</option>
          </select>
        </div>
        <div class=\"form-group\">
          <label for=\"birthday\">出生日期</label>
          <input type=\"date\" name=\"birthday\" class=\"form-control\" id=\"birthday\" value=\"<?php echo isset($_POST[\'birthday\']) ? $_POST[\'birthday\'] : $current_student[\'birthday\']; ?>\">
        </div>
        <div class=\"form-group\">
          <label for=\"photo\">照片</label>
          <input type=\"file\" name=\"photo\" class=\"form-control\">
        </div>
        <button type=\"submit\" class=\"btn btn-info btn-block\">确认修改</button>
      </form>
    </div>
  </div>
</body>
</html>

PHP:

if (empty($_GET[\'id\'])) exit(\'<h1>必须指定相应的学号</h1>\');
$current_num = $_GET[\'id\'];
$connection = mysqli_connect(\'localhost\', \'root\', \'密码\', \'students_info_system\');
if (!$connection) exit(\'<h1>连接数据库失败</h1>\');
$query = mysqli_query($connection, \"select * from students where num = {$current_num} limit 1\");
if (!$query) exit(\'<h1>找不到您要编辑的学生信息</h1>\');
$current_student = mysqli_fetch_assoc($query);
// var_dump($current_student);
function edit_student() {
  // var_dump(\'进来了\');
  global $connection;
  global $current_num;  // 当前学生学号
  global $current_student;
  $extra_students_query = mysqli_query($connection, \"select * from students where num != {$current_num}\");
  if (!$extra_students_query) {
    exit(\'<h1>其余学生数据查询失败</h1>\');
    // return;
  }
  // 查询除该学生以外的其他学生
  while ($student = mysqli_fetch_assoc($extra_students_query)) {
    // var_dump($student);
    $students_num[] = $student[\'num\'];
  }
  // var_dump($students_num);
  // var_dump($_FILES[\'photo\']);
  // var_dump($_POST[\'gender\']);
  if (empty($_POST[\'num\'])) {
    $GLOBALS[\'error_msg\'] = \'请输入学号\';
    return;
  }
  // 判断该学号是否已经被添加(即列表中已存在该学生)=========
  if (in_array($_POST[\'num\'], $students_num)) {
    $GLOBALS[\'error_msg\'] = \'该学生已存在\';
    return;
  }
  if (empty($_POST[\'system\']) || $_POST[\'system\'] === \'请选择学院/系\') {
    $GLOBALS[\'error_msg\'] = \'请选择学院/系\';
    return;
  }
  if (empty($_POST[\'class\'])) {
    $GLOBALS[\'error_msg\'] = \'请输入班级\';
    return;
  }
  if (empty($_POST[\'name\'])) {
    $GLOBALS[\'error_msg\'] = \'请输入姓名\';
    return;
  }
  if (!(isset($_POST[\'gender\']) && $_POST[\'gender\'] !== \'-1\')) {
    $GLOBALS[\'error_msg\'] = \'请选择性别\';
    return;
  }
  if (empty($_POST[\'birthday\'])) {
    $GLOBALS[\'error_msg\'] = \'请输入出生日期\';
    return;
  }
  // 以下处理文件域=======================================================
  // 当有文件上传时才验证,没有上传则照片不变
  // $_FILES[\'photo\'] = $current_student[\'photo\'];
  // var_dump($_FILES[\'photo\']);
  if ($_FILES[\'photo\'][\'name\'] !== \'\') {
    // var_dump($_FILES[\'photo\']);
    // var_dump($_FILES[\'photo\']);
    if ($_FILES[\'photo\'][\'error\'] !== UPLOAD_ERR_OK) {
      $GLOBALS[\'error_msg\'] = \'上传照片失败\';
      return;
    }
    // 验证上传文件的类型(只允许图片)
    if (strpos($_FILES[\'photo\'][\'type\'], \'image/\') !== 0) {
      $GLOBALS[\'error_msg\'] = \'这不是支持的文件格式类型,请重新上传\';
      return;
    }
    // 文件上传到了服务端开辟的一个临时地址,需要转移到本地
    $image_target = \'images/\' . $_FILES[\'photo\'][\'name\'];
    if (!move_uploaded_file($_FILES[\'photo\'][\'tmp_name\'], $image_target)) {
      $GLOBALS[\'error_msg\'] = \'图片上传失败\';
      return;
    }
    // 接收更新过的学生照片
    $current_student[\'photo\'] = (string)$image_target;
  } else {
    // var_dump($_FILES[\'photo\']);
    // 如果照片没有上传则不进行验证文件域,直接更新数据且不改变原来的照片
    $current_student[\'num\'] = $_POST[\'num\'];
    $current_student[\'system\'] = $_POST[\'system\'];
    $current_student[\'class\'] = $_POST[\'class\'];
    $current_student[\'name\'] = $_POST[\'name\'];
    $current_student[\'gender\'] = $_POST[\'gender\'];
    $current_student[\'birthday\'] = $_POST[\'birthday\'];
  }
  // var_dump($current_num);
  // 将数据修改存放到数据库
  $update_query = mysqli_query($connection, \"update students set `num` = \'{$current_student[\'num\']}\', `system` = \'{$current_student[\'system\']}\', `class` = \'{$current_student[\'class\']}\', `name` = \'{$current_student[\'name\']}\', `gender` = \'{$current_student[\'gender\']}\', `birthday` = \'{$current_student[\'birthday\']}\', `photo` = \'{$current_student[\'photo\']}\' where `num` = {$current_num}\");
  if (!$update_query) {
    $GLOBALS[\'error_msg\'] = \'更新数据查询失败\';
    return;
  }
  $affected_rows = mysqli_affected_rows($connection);
  if ($affected_rows !== 1) {
    $GLOBALS[\'error_msg\'] = \'修改失败\';
    return;
  }
  // 延迟2秒
  time_sleep_until(time() + 2);
  header(\'Location: student_info.php\');
}
if ($_SERVER[\'REQUEST_METHOD\'] === \'POST\') {
  edit_student();
}

搜索功能(用js)

// 关键词搜索功能----立即函数
(function (element, search_key) {
  let table = document.getElementById(\'table-content\'); // 获取表格
  function in_array_item (item, array) {
    for (var i = 0; i < array.length; i++) {
      if (array[i].indexOf(item) != -1) {
        return true;
      }
    }
    return false;
  }
  function response () {
    let hiddenStudentsNumber = 0;             // 获取隐藏的学生个数(即表格隐藏行数)
    // 获取要搜索的关键词
    const search_content = document.getElementById(search_key).value;
    // console.log(search_content);
    // console.log(typeof(search_content));
    let data = [];
    // 遍历列表将数据存储到一个数组中
    // 1.获取表格行数
    for (let i = 0; i < table.children.length; i++) {
      // 2.获取表格列数
      for (let j = 0; j < table.children[i].children.length; j++) {
        if (!data[i]) {
          // 在数组中创键每一行内容存放的数组,用于存放一行数据
          data[i] = new Array();
        }
        data[i][j] = table.children[i].children[j].innerHTML.toString();
        // 3.存放数据
        if (data[i][j] === \'♂\') {
          data[i][j] = \'男\';
        }
        if (data[i][j] === \'♀\') {
          data[i][j] = \'女\';
        }
      }
      // console.log(data[i]);
      if (search_content == \'\') {
        table.children[i].style.display = \'\';
      } else {
        if (in_array_item(search_content, data[i])) {
          table.children[i].style.display = \'\';
        } else {
          table.children[i].style.display = \'none\';
          hiddenStudentsNumber += 1;
        }
      }
    }
    console.log(hiddenStudentsNumber);
    let str = \"共有\" + (table.children.length - hiddenStudentsNumber) + \"名学生\";
    document.getElementById(\'students_number\').innerHTML = str;
  }
  const searchButton = document.getElementById(element);
  searchButton.addEventListener(\'click\', function () {
    response();
  });
  document.addEventListener(\'keydown\', function (event) {
    if (event.keyCode === 13) {
      response();
    }
  });
  let str = \"共有\" + table.children.length + \"名学生\";
  document.getElementById(\'students_number\').innerHTML = str;
})(\'search\', \'search-key\');

同时在原有的学生信息页面HTML添加:

<div class=\"row mt-3\">
      <a class=\"btn btn-info col-sm-2\" style=\"margin-right: 28px; margin-left: 15px;\" href=\"add_student.php\" rel=\"external nofollow\" >添加学生</a>
        // 添加的
      <button class=\"btn btn-info align-middle\" id=\"students_number\"></button>
        

      <input type=\"text\" class=\"form-control col-sm-6 ml-2\" autocomplete=\"on\" placeholder=\"请输入关键词\" value=\"\" id=\"search-key\">
       <button type=\"submit\" class=\"btn btn-info col-sm-2 ml-2\" id=\"search\">点击搜索</button>
    </div>

总结

以上所述是小编给大家介绍的PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容