Erlo

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

2019-05-21 14:03:23 发布   1117 浏览  
页面报错/反馈
收藏 点赞

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

 

 

删除学生功能

PHP:

// 这里是通过前端代码HTML中的 url 传过来的,用 $_GET 来获取(相关HTML代码可以看一下到主页看一下前几条博客)
if
(empty($_GET['num'])) exit('

找不到您要删除的学生的学号

'); $num = $_GET['num']; $connection = mysqli_connect('localhost', 'root', '密码', 'students_info_system'); if (!$connection) exit('

连接数据库失败

'); $query = mysqli_query($connection, "delete from students where num = {$num}"); if (!$query) exit('

该学生信息查询失败

'); // 注意:这里传入的是连接对象 $affected_rows = mysqli_affected_rows($connection); if ($affected_rows !== 1) exit('

删除失败

'); 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">
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="" alt="" width="100" height="488" class="col-sm-6">
            form action="?id=" 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="">
                div>
                div class="form-group">
                    select class="form-control" name="system">
                        option>请选择学院/系option>
                        option === '电气工程学院' ? 'selected' : ''; ?>>电气工程学院option>
                        option === '信息工程与艺术学院' ? 'selected' : ''; ?>>信息工程与艺术学院option>
                        option === '国际教育学院' ? 'selected' : ''; ?>>国际教育学院option>
                        option === '水利水电工程学院' ? 'selected' : ''; ?>>水利水电工程学院option>
                        option === '测绘与市政工程学院' ? 'selected' : ''; ?>>测绘与市政工程学院option>
                        option === '马克思主义学院' ? 'selected' : ''; ?>>马克思主义学院option>
                        option === '建筑工程学院' ? 'selected' : ''; ?>>建筑工程学院option>
                        option === '经济与管理学院' ? 'selected' : ''; ?>>经济与管理学院option>
                    select>
                div>
                div class="form-group">
                    input type="text" name="class" class="form-control" placeholder="班级" value="">
                div>
                div class="form-group">
                    input type="text" name="name" class="form-control" placeholder="姓名" value="">
                div>
                div class="form-group">
                    select class="form-control" name="gender">
                        option value="-1">请选择性别option>
                        option === '1' ? 'selected' : ''; ?> value="1">男option>
                        option === '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="">
                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('

必须指定相应的学号

'); $current_num = $_GET['id']; $connection = mysqli_connect('localhost', 'root', '密码', 'students_info_system'); if (!$connection) exit('

连接数据库失败

'); $query = mysqli_query($connection, "select * from students where num = {$current_num} limit 1"); if (!$query) exit('

找不到您要编辑的学生信息

'); $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('

其余学生数据查询失败

'); // 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 ) {
            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 ) {
            // 2.获取表格列数
            for (let j = 0; 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">添加学生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 JAVA JS 小程序 Python SEO MySql 确认