WEB前端第五十九課——時間戳、數據交互小案例

時間 2021-01-23

標籤 php css html mysql jquery sql 數據庫 npm bootstrap 數組欄目 HTML 简体版

原文原文鏈接

1.時間戳php

　　程序開發中所說的時間戳，一般是指從1970年1月1日0時到當前事件的毫秒數。css

　　time()方法，用於獲取當前的時間戳，結果爲毫秒數。html

　　date()方法，用於將時間戳結果轉換爲一般的時間格式。mysql

　　語法：date(format,timeStamp);　　//format參數用於定義日期時間格式jquery

　　時間格式：sql

　　　　年：Y　4位數年份　　　　y　2位數年份數據庫

　　　　月：M　3位英文簡寫　　 F　完整英文月份　　m　2位數月份　　n　無0數字月份npm

　　　　日：d　2位數月第幾天　　j　無0補位月第幾天　S 月第幾天英序數後綴　　z　年第幾天bootstrap

　　　　星期：D　3爲英文簡寫　　l　完整英文星期幾(小寫L)數組

　　　　時：H　24小時制　　G　無0 24小時制　　h　12小時制　　g　無0 12小時制

　　　　　　A（AM/PM）　　a（am/pm）

　　　　分：i　2位數分鐘

　　　　秒：s　2位數秒鐘

　　　　時區：e　時區標識符　　T　時區簡寫

　　注意：年月日與時間之間一般使用「空格」隔開，

　　　　　年月日之間的鏈接符一般使用「-或/」，英文日期多用「空格與of」拼接，時間之間的鏈接符一般使用「:」。

　　代碼示例：

<?php
    echo time();
    echo '<br>';
    echo date('Y-m-d H:i:s',time());
    echo '<br>';
    echo date('D jS \of F Y h:i:s a');   //可不寫 time()方法。
    echo '<br>';
//    設置默認時區
    date_default_timezone_set('Asia/Shanghai');
    echo date('Y-m-d H:i:s',time());
?>

2.fetch相關方法

　　⑴ fetchAll($result,resulttype)，從結果中獲取全部行數據做爲關聯數組。

　　　　參數result爲必需，是由mysqli_query()、mysqli_store_result() 或 mysqli_use_result() 返回的結果，

　　　　也能夠經過result結果集標識符經過指針調用 fetchAll() 方法。

　　　　參數resulttype爲可選，用於規定輸出那種類型的數組。包括「_ASSOC、_NUM\_BOTH」三種。

　　⑵ fetch_assoc($result)，從結果集中獲取一行數據做爲關聯數組。

　　⑶ fetch_row($result)，從結果集中獲取一行數據做爲枚舉數組。

　　⑷ fetch_column($result)，從結果集中獲取一列數據做爲枚舉數組。

　　注意：在PHP PDO中有不少關於 fetch 的預約義常量，能夠經過 PDO調用。

3.先後臺交互案例

　　新增、刪除、修改、文章詳情小案例

　　數據庫表結構：

　　⑴ index.php頁面

　　　　注意連接數據庫時，使用 try{}catch(){} 固定格式，便於鏈接異常問題分析；

　　　　首頁界面設計包括頁面佈局和數據庫取數邏輯，HTML代碼和PHP代碼穿插結合使用；

　　　　在HTML中引用PHP代碼時，須要使用<?php ?>標識包裹；

　　　　在PHP中引用HTML代碼時，須要使用<script></script>標籤包裹；

　　　　使用 table 列表展現文章列表，PHP獲取數據庫數據時，經過字符串拼接的方式生成<tr><td>行。

<?php
    try{
        $con = new PDO("mysql:host=localhost;dbname=dbTest","root","");
        $con->exec('set names utf8');       //也能夠在上述PDO()方法的第一個參數中添加「charset=utf8」
        $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
        $sql = "select * from news where 1";
        $res = $con->query($sql);
        $resInfo = $res->fetchAll(PDO::FETCH_ASSOC);
//        print_r($resInfo);
        $newsInfo = "";
        if($res){
            for($i=0;$i<count($resInfo);$i++){
//            經過字符串「.」點號拼接的方式獲取「$resInfo」數組中的信息，獲取字段數據使用「{}」包裹變量。
                $newsInfo.="<tr>
                    <td>{$resInfo[$i]['id']}</td><td>{$resInfo[$i]['title']}</td>
                    <td>{$resInfo[$i]['author']}</td><td>{$resInfo[$i]['summary']}</td>
                    <td>{$resInfo[$i]['time']}</td>
                    <td>
                        <a href='updNews.php?id={$resInfo[$i]['id']}'>修改</a>
                        <a href='delNews.php?id={$resInfo[$i]['id']}'>刪除</a>
                        <a href='detailNews.php?id={$resInfo[$i]['id']}'>詳情</a>
                    </td>
                </tr>";
            }
        }else{
            echo '<script>alert("數據爲空")</script>';
        }                             
    }catch(PDOException $e){
        echo '數據庫鏈接失敗！錯誤信息：'.$e->getMessage();
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>秋香news</title>
    <link rel="stylesheet" href="./JSFiles/bootstrap.min.css">
    <script src="./JSFiles/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>

    <style>
        .container{
            margin:20px auto;
        }
        th{
            text-align: center;
            vertical-align: middle!important;   //此處樣式須要使用「!important」強制優先，樣式纔會生效！
        }

        .leftCon{
            border-left: 1px solid hotpink;
        }
        .leftCon a{
            display: block;
            margin: 10px 0;
            padding: 2px 0;
            color: darkorange;
            border-bottom: 1px solid pink;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="container" >
    <div class="row" >
        <div class="col-2 leftCon">
            <a href='#'>文檔列表</a>
            <a href='create.html'>添加文章</a>
        </div>
        <div class="col-10">
            <table class="table table-sm table-hover table-bordered">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">標題</th>
                    <th scope="col">做者</th>
                    <th scope="col">文章概要</th>
                    <th scope="col">時間</th>
                    <th scope="col">操做</th>
                </tr>
                </thead>
                <tbody class="thead-light">
                    <?php
                        echo $newsInfo;
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

　　⑵ create.html 新增文章頁面

　　　　使用 form 表單形式建立界面，表單提交的字段 name 須與後臺接收字段名一致！

　　　　BootStrap 組件中，label標籤的 for 屬性值與input標籤的 id 屬性值必須保持一致！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新增文章</title>
    <link rel="stylesheet" href="./JSFiles/bootstrap.min.css">
    <script src="./JSFiles/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>

    <style>
        .container{
            margin:20px auto;
        }
        .btn{
            display: block;
            margin: 0 auto;
        }

        .leftCon{
            border-left: 1px solid hotpink;
        }
        .leftCon a{
            display: block;
            margin: 5px 0;
            padding: 2px 0;
            color: darkorange;
            border-bottom: 1px solid pink;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="container" >
    <div class="row" >
        <div class="col-2 leftCon">
            <a href='#'>建立文章</a>
        </div>
        <div class="col-10 rightCon">
<!--        form表單提交目標地址使用 action 屬性定義    -->
            <form action="submit.php" method="post">
                <div class="form-group row">
                    <label for="inputTitle" class="col-sm-1 col-form-label-lg">標題</label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control" id="inputTitle" name="inputTitle">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputAuthor" class="col-sm-1 col-form-label-lg">做者</label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control" id="inputAuthor" name="inputAuthor">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputSummary" class="col-sm-1 col-form-label-lg">概要</label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control" id="inputSummary" name="inputSummary">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputContent" class="col-sm-1 col-form-label-lg">內容</label>
                    <div class="col-sm-11">
                        <textarea type="text" class="form-control" id="inputContent" rows="15" name="inputContent"></textarea>
                    </div>
                </div>
                <button type="submit" class="btn btn-success">Submit</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

　　⑶ submit.php提交數據頁面

　　　　可以使用「$_GET」或「$_POST」方法接收前臺頁面發送的數據，方法在 form method屬性中定義；

　　　　接收數據時可使用三目運算判斷字段值是否爲空的狀況；

　　　　操做時間直接使用 time() 方法生成系統時間，不須要接收；

　　　　注意設置默認時區，方法：date_default_timezone_set('Asia/Shanghai');

　　　　調用字段值時，使用「{}」包裹變量；

　　　　使用「echo()」方法向前臺返回數據，返回內容能夠是 <script>代碼。

<?php
    //接收前臺頁面提交的信息，可經過三目運算判斷值是否爲空。
    $id=isset($_POST['inputId'])?$_POST['inputId']:'';
    $title=isset($_POST['inputTitle'])?$_POST['inputTitle']:'';
    $author=isset($_POST['inputAuthor'])?$_POST['inputAuthor']:'';
    $summary=isset($_POST['inputSummary'])?$_POST['inputSummary']:'';
    $content=isset($_POST['inputContent'])?$_POST['inputContent']:'';
    date_default_timezone_set('Asia/Shanghai');
    $time=date('Y-m-d H:i:s',time());
    try{
        $con=new PDO('mysql:host=localhost;dbname=dbTest;charset=utf8','root','');
        $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
//        接收信息寫入數據庫，SQL接收數據字段時使用 {} 提取!!!
        if($id==''){
            $sql="insert into news(title,author,summary,content,time) values('{$title}','{$author}','{$summary}','{$content}','{$time}')";
            $res=$con->query($sql);
            if($res){
    //        返回操做信息，能夠直接在PHP中返回js語句給前臺
                echo '<script>alert("建立成功！");window.location.href="index.php"</script>';
            }else{
                echo "建立失敗！";
            }
        }else{
            $sql="update news set title='{$title}',author='{$author}',summary='{$summary}',content='{$content}',time='{$time}' where id='{$id}'";
            $res=$con->query($sql);
            if($res){
    //        返回操做信息，能夠直接在PHP中返回js語句給前臺
                echo '<script>alert("修改爲功！");window.location.href="index.php"</script>';
            }else{
                echo "修改失敗！";
            }
        }
    }catch(PDOException $e){
        echo "數據庫鏈接失敗！錯誤信息：".$e->getMessage();
    }
?>

　　⑷ delnews.php 刪除數據

　　　　刪除、修改、詳情操做均經過在前臺定義<a>標籤的方式，發送操做指令；

　　　　在<a>標籤中設置href連接地址，url後接「?」將當前操做id發送至後臺；

　　　　後臺使用「$_GET」方法接收id值，判斷刪除對應的數據行。

<?php
    $id=isset($_GET['id'])?$_GET['id']:'';
    if($id){
        try{
            $con=new PDO('mysql:host=localhost;dbname=dbTest;charset=utf8','root','');
            $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
    //        接收信息寫入數據庫，SQL接收數據字段時使用 {} 提取
            $sql="delete from news where id={$id}";
            $res=$con->query($sql);
            if($res){
    //        返回操做信息，能夠直接在PHP中返回js語句給前臺
                echo '<script>alert("刪除成功！");window.location.href="index.php"</script>';
            }else{
                echo "刪除失敗！";
            }
        }catch(PDOException $e){
            echo "數據庫鏈接失敗！錯誤信息：".$e->getMessage();
        }
    }else{
        echo "刪除數據ID不存在！";
    }
?>

　　⑸ updnews.php 修改數據

　　　　獲取操做數據行id後查詢數據庫，同新增數據頁面樣式展現目標數據；

　　　　在 input value屬性中設置 PHP 輸出代碼，將查詢數據展現到界面；

　　　　提交數據能夠與新增提交共用後臺邏輯，使用if判斷新增仍是修改。

<?php
    $id=isset($_GET['id'])?$_GET['id']:'';
    if($id){
        try{
            $con=new PDO('mysql:host=localhost;dbname=dbTest;charset=utf8','root','');
            $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
    //        接收ID值，經過id查詢該條數據，使用 {} 獲取id。
            $sql = "select * from news where id={$id}";
            $res = $con->query($sql);
            $resInfo = $res->fetchAll(PDO::FETCH_ASSOC);
//            print_r($resInfo);
        }catch(PDOException $e){
            echo "數據庫鏈接失敗！錯誤信息：".$e->getMessage();
        }
    }else{
        echo "數據查詢失敗！";
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新增文章</title>
    <link rel="stylesheet" href="./JSFiles/bootstrap.min.css">
    <script src="./JSFiles/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>

    <style>
        .container{
            margin:20px auto;
        }
        .btn{
            display: block;
            margin: 0 auto;
        }

        .leftCon{
            border-left: 1px solid hotpink;
        }
        .leftCon a{
            display: block;
            margin: 5px 0;
            padding: 2px 0;
            color: darkorange;
            border-bottom: 1px solid pink;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="container" >
    <div class="row" >
        <div class="col-2 leftCon">
            <a href='#'>修改文章</a>
        </div>
        <div class="col-10 rightCon">
<!--        form表單提交目標地址使用 action 屬性定義    -->
            <form action="update.php" method="post">
<!--            添加 id 字段用於提交後臺時根據 id條件判斷修改哪一條數據，display隱藏顯示。   -->
                <input type="number" style="display:none" name="inputId" value="<?php echo $resInfo[0]['id'] ?>">
                <div class="form-group row">
                    <label for="inputTitle" class="col-sm-1 col-form-label-lg">標題</label>
                    <div class="col-sm-11">
<!--                    注意：經過<input>標籤的 value 屬性進行賦值，賦值時必須使用 PHP echo 格式輸出！！    -->
                        <input type="text" class="form-control" id="inputTitle" name="inputTitle" value="<?php echo $resInfo[0]['title'] ?>">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputAuthor" class="col-sm-1 col-form-label-lg">做者</label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control" id="inputAuthor" name="inputAuthor" value="<?php echo $resInfo[0]['author'] ?>">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputSummary" class="col-sm-1 col-form-label-lg">概要</label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control" id="inputSummary" name="inputSummary" value="<?php echo $resInfo[0]['summary'] ?>">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputContent" class="col-sm-1 col-form-label-lg">內容</label>
                    <div class="col-sm-11">
<!--                    注意：<textarea>未塊級元素，直接在標籤內部賦值！！  -->
                        <textarea type="text" class="form-control" id="inputContent" rows="15" name="inputContent"><?php echo $resInfo[0]['content'] ?></textarea>
                    </div>
                </div>
                <button type="submit" class="btn btn-success">Submit</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

　　⑹ update.php 提交修改數據

<?php
    $id=isset($_POST['inputId'])?$_POST['inputId']:'';
    if($id){
        $title=isset($_POST['inputTitle'])?$_POST['inputTitle']:'';
        $author=isset($_POST['inputAuthor'])?$_POST['inputAuthor']:'';
        $summary=isset($_POST['inputSummary'])?$_POST['inputSummary']:'';
        $content=isset($_POST['inputContent'])?$_POST['inputContent']:'';
        date_default_timezone_set('Asia/Shanghai');
        $time=date('Y-m-d H:i:s',time());
        try{
            $con=new PDO("mysql:host=localhost;dbname=dbTest;charset=utf8","root","");
            $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
            $sql="update news set title='{$title}',author='{$author}',summary='{$summary}',content='{$content}',time='{$time}' where id='{$id}'";
            $res=$con->query($sql);
            if($res){
                echo '<script>alert("修改爲功！");window.location.href="index.php"</script>';
            }else{
                echo "<script>alert('修改失敗！');window.location.href='index.php'</script>";
            }
        }catch(PDOException $err){
            echo "當前數據id不存在！".$err->getMessage();
        }
    }
?>

　　⑺ detailnews.php 查詢詳情

　　　　在PHP中經過id查詢操做數據，而後在HTML中展現結果；

　　　　HTML中展現查詢結果時，使用PHP代碼獲取數據。

<?php
    $id=isset($_GET['id'])?$_GET['id']:'';
    if($id){
        try{
            $con = new PDO("mysql:host=localhost;dbname=dbTest","root","");
            $con->exec('set names utf8');       //也能夠在上述PDO()方法的第一個參數中添加「charset=utf8」
            $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
            $sql = "select * from news where id='{$id}'";
            $res = $con->query($sql);
            $resInfo = $res->fetchAll(PDO::FETCH_ASSOC);
//            print_r($resInfo);
        }catch(PDOException $e){
            echo '數據庫鏈接失敗！錯誤信息：'.$e->getMessage();
        }
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>news正文</title>
    <link rel="stylesheet" href="./JSFiles/bootstrap.min.css">
    <script src="./JSFiles/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>

    <style>
        .container{
            margin:20px auto;
        }
        h3{
            height: 50px;
        }
        small{
            height: 20px;
        }
        .leftSpan{
            left:0;
        }
        .rightSpan{
            display:block;
            right:0;
            float:right;
        }
    </style>
</head>
<body>
<div class="container" >
    <div class="row" >
        <div class="col">
            <h3><?php echo $resInfo[0]['title'] ?></h3>
            <small>
                <span class="leftSpan"><?php echo $resInfo[0]['author']?></span>
                <span class="rightSpan"><?php echo $resInfo[0]['time'] ?></span>
            </small>
            <p style="margin:10px auto;padding:20px 0 10px;border-top:1px solid pink">
                <?php echo $resInfo[0]['summary'] ?>
            </p>
            <p><?php echo $resInfo[0]['content'] ?></p>
        <div>

    </div>
<!--         -->
</div>
</body>
</html>