php+mysql+bootstrap 實現成績管理系統

簡介:

這是一個能夠增刪改查的成績管理系統的ajax交互練習案例

主要技術:php mysql bootstrapUI庫 ajaxphp

效果以下:css

佈局:

佈局使用bootstrapUI庫搭建html

需引入bootstrap.css外部樣式前端

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

總體分爲三部分mysql

頭部: logo部分以及添加信息按鈕
中部:表頭與表格以及刪除修改按鈕
底部:分頁

其中添加信息與修改按鈕使用模態框jquery

需引入三個外部文件ajax

分別爲:sql

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建立一個新的數據庫,用來存儲數據npm

tip:將字符集設置爲utf-8,不然沒法顯示中文

設置字段

名稱:id 默認
名稱:name 類型:char 長度:10
名稱:cpt 類型:float 長度/小數點:5,2
名稱:pen類型:float 長度/小數點:5,2

並在數據庫提早存好兩條數據

功能實現--查找數據

在頁面開始加載時,就要向數據庫請求數據

大體過程爲：開啓ajax向php請求，php操做數據庫拿到數據發回給前端，請求成功後渲染頁面；

this.selectUrl = "http://localhost/Management/data/select.php";    //接口就是本身寫的php文件

1.開啓ajax,請求數據

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

2.php操做數據庫

連接數據庫
準備報錯
- 若是鏈接成功,不報錯
- 若是鏈接失敗,將錯誤信息以json格式返回,錯誤碼爲code=0;
準備mysql命令
發送mysql命令,並將數據保存在$res

獲取數據成功,將數據處理成json樣式數據返回
獲取數據失敗,將錯誤信息="獲取數據失敗"返回,錯誤碼爲code=1;

查詢的php文件代碼以下:

<?php

// 連接數據庫服務器:端口號用戶名密碼數據庫名稱

$link = @new mysqli("localhost:3306","root","root","test");

if($link->connect_error){

//將錯誤信息的關聯數組處理成json,返回給前端,請求失敗報錯碼code=0

$err = array("code"=>0,"msg"=>$link->connect_error);

die(json_encode($err)); //結束語句,並打印報錯(相似於return)

}

$str = "SELECT * FROM management";

$res = $link->query($str);

//判斷res是否爲空數據

if($res){

$str = "";

while($arr = $res->fetch_assoc()){ //將res資源型數據,解析成關聯數組,由於每次只能解析一條,因此while重複解析

$str = $str . json_encode($arr) . ","; //點爲字符串拼接

}

echo "[" . substr($str,0,-1) . "]"; //將對象拼接成json格式中間加逗號末尾去掉逗號兩邊加中括號

}else{

//若是獲取數據失敗將錯誤碼code=2 錯誤信息="獲取數據失敗"存入關聯數組

$err = array("code"=>2,"msg"=>"獲取數據失敗");

echo json_encode($err);

}

3.渲染頁面

在完成php接口和成功開啓ajax請求到數據後；

若是請求成功,能夠在控制檯看到拿到的數據

若是數據庫鏈接失敗，會提示錯誤碼code=0；

此時就能夠開始寫渲染頁面的功能。

(1)思路

將拿到的數據解析成對象 ===> JSON.parse(res)

判斷是否有錯誤碼

沒有錯誤碼說明,請求數據成功
錯誤碼爲0,說明連接數據庫失敗
錯誤碼爲2,說明請求數據失敗

若是成功請求到數據,渲染頁面;

(2).代碼實現:

// 查詢數據
selectLoad(){ var that = this; ajax({ url:this.selectUrl, success:function(res){ // console.log(res);
            that.res = JSON.parse(res); if(that.res.code == 0){ alert("鏈接數據庫失敗"); }else if(that.res == 1){ alert("請求數據失敗") }else{ that.display(); } } }) } display(){ // console.log(this.res);
    var str = ""; for(var i=0;i<this.res.length;i++){ str += `<tr>
                    <td>${this.res[i].Id}</td>
                    <td>${this.res[i].name}</td>
                    <td>${this.res[i].cpt}</td>
                    <td>${this.res[i].pen}</td>
                    <td><span class="btn btn-primary btn-d">刪除</span></td>
                    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" ly="update">修改</button></td>
                </tr>`;
 } this.tbody.innerHTML = str; }

View Code

功能實現 -- 添加和修改信息

思路:

1.頁面中有兩個模態框,添加信息和修改信息,首先要判斷點擊的是添加按鈕仍是修改按鈕

模態框引用了外部js,爲了防止事件覆蓋,使用事件監聽添加事件
第一個:添加信息按鈕(id = insert),能夠直接添加點擊事件監聽
第二個:修改按鈕, 利用事件委託,給修改按鈕添加點擊事件監聽
第三個:提交按鈕(id = sned),直接添加點擊事件監聽

(1) 給模態框聲明一個狀態量

this.type = 0        //爲0時表示添加信息

(2) 點擊添加按鈕是,將type = 0;

(3) 點擊修改按鈕時,將type = 1;

(4) 點擊提交按鈕時,判斷狀態,提交數據

實現的功能是:

點擊按鈕,提交後,控制檯打印"添加"
點擊修改按鈕,提交後.控制檯打印"提交"

代碼以下:

addEvent(){ var that = this; //給添加按鈕添加事件監聽
            this.insert.addEventListener("click",function(){ that.type = 0; }) //利用事件委託,給修改按鈕添加事件監聽
            this.tbody.addEventListener("click",function(eve){ var e = eve || window.event; var target = e.target || e.srcElement; // 若是選擇的元素,自定義屬性ly爲update,則選中了修改按鈕
                if(target.getAttribute("ly") === "update"){ that.type = 1; } }) //給提交按鈕添加事件監聽
            this.send.addEventListener("click",function(){ if(that.type == 0){ console.log("添加"); }else{ console.log("修改"); } }) }

View Code

效果以下:

添加信息時,須要將輸入框的內容清空

that.name.value = that.cpt.value = that.pen.value = "";

2.更改數據後將添加或者數據寫入到頁面

在寫入數據以前,須要先獲取輸入框中的value,
將獲取到的value,經過ajax發送到php,
php操做數據庫,將結果返回給前端.

(1) 獲取數據

// 獲取模態框數據 (姓名 機試成績 筆試成績)
　　this.name = document.getElementById("name"); 　　this.cpt = document.getElementById("cpt"); 　　this.pen = document.getElementById("pen");
 //點擊提交按鈕時,獲取數據,準備發給ajax
    that.n = that.name.value; that.c = that.cpt.value; that.p = that.pen.value;

(2) 將數據發給ajax,請求成功以後,解析數據,準備渲染

// 添加信息,開啓ajax 發送並請求新數據
 insertLoad(){ ajax({ url:this.insertUrl, data:{ n:this.n, c:this.c, p:this.p }, success:function(res){ console.log(res); } }) }

(3) 準備PHP文件數據接口

this.insertUrl = "http://localhost/Management/data/insert.php";

添加功能的php文件思路:

鏈接數據庫
- 　連接成功,不報錯
- 　鏈接失敗,將錯誤信息以json格式返回,錯誤碼爲code=0
準備查詢mysql命令
向數據庫發送添加mysql命令,會返回布爾值,並將返回結果保存在$q
判斷是否成功添加數據
- 　若是成功添加,執行封裝好的查詢數據函數,返回查詢到的函數
- 　若是添加失敗,將錯誤信息返回,錯誤碼爲code = 2;

<?php // 連接數據庫 服務器:端口號 用戶名 密碼 數據庫名稱
    $link = @new mysqli("localhost:3306","root","root","test"); if($link->connect_error){ //將錯誤信息的關聯數組處理成json,返回給前端,請求失敗報錯碼code=0
        $err = array("code"=>0,"msg"=>$link->connect_error); die(json_encode($err));  //結束語句,並打印報錯(相似於return)
 } $n = @$_REQUEST["n"]; $c = @$_REQUEST["c"]; $p = @$_REQUEST["p"]; //mysql添加命令
    $str = "INSERT management (name,cpt, pen) VALUES('".$n."',".$c.",".$p.")"; //發送mysql命令
    $q = $link->query($str); if($q){ echo select();   //若是添加成功,返回查詢數據的狀態
    }else{ $err = array("code"=>2,"msg"=>"添加數據失敗"); //若是添加失敗,返回錯誤信息,與錯誤碼
        die(json_encode($err)); } // 將查詢數據的代碼封裝成一個函數,返回報錯信息與成功請求到的數據
    function select(){ global $link; $str = "SELECT * FROM management"; $res = $link->query($str); if($res){ $str = ""; while($arr =  $res->fetch_assoc()){ $str = $str . json_encode($arr) . ","; } return "[" . substr($str,0,-1) . "]"; }else{ $err = array("code"=>2,"msg"=>"獲取數據失敗"); return json_encode($err); } } ?>

View Code

(4)渲染頁面

成功添加數據後,會返回一個json樣式的數據
添加數據失敗後,會返回包含有錯誤碼的數據

將拿到的數據解析成對象 ===> JSON.parse(res)

因此判斷是否有錯誤碼

沒有錯誤碼說明,請求數據成功
錯誤碼爲0,說明連接數據庫失敗
錯誤碼爲2,說明請求數據失敗

若是成功請求到數據,渲染頁面;

代碼以下

// 添加信息,開啓ajax 發送並請求新數據
 insertLoad(){ var that = this; ajax({ url:this.insertUrl, data:{ n:this.n, c:this.c, p:this.p }, success:function(res){ that.res = JSON.parse(res); if(that.res.code == 0){ alert("鏈接數據庫失敗"); }else if(that.res == 2){ alert("添加數據失敗") }else{ // console.log(that.res); 
 that.display(); // 刪除方法
                        that.delete(); } } }) }

View Code

效果以下: