php+mysql+bootstrap 实现成绩管理系统

简介:

这是一个可以增删改查的成绩管理系统的ajax交互练习案例

主要技术:php mysql bootstrapUI库 ajax

效果如下:

布局:

布局使用bootstrapUI库搭建

需引入bootstrap.css外部样式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

整体分为三部分

头部: logo部分以及添加信息按钮
中部:表头与表格以及删除修改按钮
底部:分页

其中添加信息与修改按钮使用模态框

需引入三个外部文件

分别为:

jqery.js
popper.js
bootstrap.js

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js""></script>

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <style>
        thead tr th {
            text-align: center;
        }
        tbody tr td {
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="container">
        <!-- 头 -->
        <div class="row align-items-center my-5">
            <div class="col-2 h2">logo</div>
            <div class="col-4 h4">成绩管理系统</div>
            <button type="button" class="btn btn-primary col-1" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" id="insert">添加信息</button>
        </div>
        <!-- 表格 -->
        <div class="row my-5">
            <table class="table thead-inverse table-bordered table-sm">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>姓名</th>
                        <th>成绩</th>
                        <th>删除</th>
                        <th>修改</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>admin</td>
                        <td>80</td>
                        <td><span class="btn btn-primary">删除</span></td>
                        <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" ly="update">修改</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 底部分页 -->
        <div class="row">
                <nav aria-label="Page navigation example" class="w-100">
                    <ul class="pagination pagination-sm justify-content-center">
                        <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    </ul>
                </nav>
            </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLabel">请输入信息：</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">姓名:</label>
                            <input type="text" class="form-control" id="name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">机试:</label>
                            <input class="form-control" id="cpt" />
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">笔试:</label>
                            <input class="form-control" id="pen" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary mx-auto" data-dismiss="modal" id="send">提交</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./js/index.js"></script>
<!-- 模态框引入的js -->
<script src="./lib/jquery-2.2.4.js"></script>
<script src="./lib/popper.js"></script>
<script src="./lib/bootstrap.js"></script>
</html>

View Code

创建数据库

使用Mysql-Font创建一个新的数据库,用来存储数据

设置字段

名称:id 默认
名称:name 类型:char 长度:10
名称:cpt 类型:float 长度/小数点:5,2
名称:pen类型:float 长度/小数点:5,2

功能实现--查找数据

在页面开始加载时,就要向数据库请求数据

大致过程为：开启ajax，向php请求，php操作数据库拿到数据发回给前端；

this.selectUrl = "http://localhost/Management/data/select.php";    //接口就是自己写的php文件

开启ajax,请求数据

ajax({
　　rl:this.selectUrl,
　　success:function(res){
　　　　console.log(res);
　　　　}
　　})

php操作数据库

链接数据库
准备报错
准备mysql命令
发送mysql命令
判断mysql返回的结果

<?php
    // 连接mysql
    $link = @new mysqli("localhost:3306","root","root","test");
    // 准备报错
    if($link->connect_error){
        // 报错以json的形式呈现
        $err = array("code"=>1,"msg"=>$link->connect_error);
        die(json_encode($err));
    }

    // 准备mysql命令
    $str = "SELECT * FROM management";
    // 发送mysql命令
    $res = $link->query($str);

    // 判断mysql的返回结果
    if($res){
        // 准备解析并拼接数据
        $str = "";
        while($arr = $res->fetch_assoc()){
            $str = $str . json_encode($arr) . ",";
        }
        // 将处理好的数据，给前端返回
        echo "[".substr($str,0,-1)."]";
    }else{
        // 如果请求失败，准备以json形式给前端报错信息
        $err = array("code"=>2,"msg"=>"获取数据失败");
        echo json_encode($err);
    }
?>