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

頭號碼甲 2021-05-17

展開全文

1.時間戳

　　程序開發(fā)中所說的時間戳，通常是指從1970年1月1日0時到當(dāng)前時間的毫秒數(shù)。

　　time()方法，用于獲取當(dāng)前的時間戳，結(jié)果為毫秒數(shù)。

　　date()方法，用于將時間戳結(jié)果轉(zhuǎn)換為通常的時間格式。

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

　　時間格式：

　　　　年：Y　4位數(shù)年份　　　　y　2位數(shù)年份

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

　　　　日：d　2位數(shù)月第幾天　　j　無0補(bǔ)位月第幾天　S 月第幾天英序數(shù)后綴　　z　年第幾天

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

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

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

　　　　分：i　2位數(shù)分鐘

　　　　秒：s　2位數(shù)秒鐘

　　　　時區(qū)：e　時區(qū)標(biāo)識符　　T　時區(qū)簡寫

　　注意：年月日與時間之間通常使用“空格”隔開，

　　　　　年月日之間的連接符通常使用“-或/”，英文日期多用“空格與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>';
//    設(shè)置默認(rèn)時區(qū)
    date_default_timezone_set('Asia/Shanghai');
    echo date('Y-m-d H:i:s',time());
?>

2.fetch相關(guān)方法

　　⑴ fetchAll($result,resulttype)，從結(jié)果中獲取所有行數(shù)據(jù)作為關(guān)聯(lián)數(shù)組。

　　　　參數(shù)result為必需，是由mysqli_query()、mysqli_store_result() 或 mysqli_use_result() 返回的結(jié)果，

　　　　也可以通過result結(jié)果集標(biāo)識符通過指針調(diào)用 fetchAll() 方法。

　　　　參數(shù)resulttype為可選，用于規(guī)定輸出那種類型的數(shù)組。包括“_ASSOC、_NUM\_BOTH”三種。

　　⑵ fetch_assoc($result)，從結(jié)果集中獲取一行數(shù)據(jù)作為關(guān)聯(lián)數(shù)組。

　?、?nbsp;fetch_row($result)，從結(jié)果集中獲取一行數(shù)據(jù)作為枚舉數(shù)組。

　?、?nbsp;fetch_column($result)，從結(jié)果集中獲取一列數(shù)據(jù)作為枚舉數(shù)組。

　　注意：在PHP PDO中有很多關(guān)于 fetch 的預(yù)定義常量，可以通過 PDO調(diào)用。

3.前后臺交互案例

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

　　數(shù)據(jù)庫表結(jié)構(gòu)：

　　⑴ index.php頁面

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

　　　　首頁界面設(shè)計包括頁面布局和數(shù)據(jù)庫取數(shù)邏輯，HTML代碼和PHP代碼穿插結(jié)合使用；

　　　　在HTML中引用PHP代碼時，需要使用<?php ?>標(biāo)識包裹；

　　　　在PHP中引用HTML代碼時，需要使用<script></script>標(biāo)簽包裹；

　　　　使用 table 列表展示文章列表，PHP獲取數(shù)據(jù)庫數(shù)據(jù)時，通過字符串拼接的方式生成<tr><td>行。

<?php
    try{
        $con = new PDO("mysql:host=localhost;dbname=dbTest","root","");
        $con->exec('set names utf8');       //也可以在上述PDO()方法的第一個參數(shù)中添加“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++){
//            通過字符串“.”點(diǎn)號拼接的方式獲取“$resInfo”數(shù)組中的信息，獲取字段數(shù)據(jù)使用“{}”包裹變量。
                $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("數(shù)據(jù)為空")</script>';
        }                             
    }catch(PDOException $e){
        echo '數(shù)據(jù)庫連接失??！錯誤信息：'.$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./npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn./npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn./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”強(qiáng)制優(yōu)先，樣式才會生效！
        }

        .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">標(biāo)題</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 表單形式創(chuàng)建界面，表單提交的字段 name 須與后臺接收字段名一致！

　　　　BootStrap 組件中，label標(biāo)簽的 for 屬性值與input標(biāo)簽的 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./npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn./npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn./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='#'>創(chuàng)建文章</a>
        </div>
        <div class="col-10 rightCon">
<!--        form表單提交目標(biāo)地址使用 action 屬性定義    -->
            <form action="submit.php" method="post">
                <div class="form-group row">
                    <label for="inputTitle" class="col-sm-1 col-form-label-lg">標(biāo)題</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">內(nèi)容</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提交數(shù)據(jù)頁面

　　　　可使用“$_GET”或“$_POST”方法接收前臺頁面發(fā)送的數(shù)據(jù)，方法在 form method屬性中定義；

　　　　接收數(shù)據(jù)時可以使用三目運(yùn)算判斷字段值是否為空的情況；

　　　　操作時間直接使用 time() 方法生成系統(tǒng)時間，不需要接收；

　　　　注意設(shè)置默認(rèn)時區(qū)，方法：date_default_timezone_set('Asia/Shanghai');

　　　　調(diào)用字段值時，使用“{}”包裹變量；

　　　　使用“echo()”方法向前臺返回數(shù)據(jù)，返回內(nèi)容可以是 <script>代碼。

<?php
    //接收前臺頁面提交的信息，可通過三目運(yùn)算判斷值是否為空。
    $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);
//        接收信息寫入數(shù)據(jù)庫，SQL接收數(shù)據(jù)字段時使用 {} 提取!!!
        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("創(chuàng)建成功！");window.location.href="index.php"</script>';
            }else{
                echo "創(chuàng)建失??！";
            }
        }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 "數(shù)據(jù)庫連接失??！錯誤信息：".$e->getMessage();
    }
?>

　?、?delnews.php 刪除數(shù)據(jù)

　　　　刪除、修改、詳情操作均通過在前臺定義<a>標(biāo)簽的方式，發(fā)送操作指令；

　　　　在<a>標(biāo)簽中設(shè)置href鏈接地址，url后接“?”將當(dāng)前操作id發(fā)送至后臺；

　　　　后臺使用“$_GET”方法接收id值，判斷刪除對應(yīng)的數(shù)據(jù)行。

<?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);
    //        接收信息寫入數(shù)據(jù)庫，SQL接收數(shù)據(jù)字段時使用 {} 提取
            $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 "數(shù)據(jù)庫連接失??！錯誤信息：".$e->getMessage();
        }
    }else{
        echo "刪除數(shù)據(jù)ID不存在！";
    }
?>

　?、?updnews.php 修改數(shù)據(jù)

　　　　獲取操作數(shù)據(jù)行id后查詢數(shù)據(jù)庫，同新增數(shù)據(jù)頁面樣式展示目標(biāo)數(shù)據(jù)；

　　　　在 input value屬性中設(shè)置 PHP 輸出代碼，將查詢數(shù)據(jù)展示到界面；

　　　　提交數(shù)據(jù)可以與新增提交共用后臺邏輯，使用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查詢該條數(shù)據(jù)，使用 {} 獲取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 "數(shù)據(jù)庫連接失敗！錯誤信息：".$e->getMessage();
        }
    }else{
        echo "數(shù)據(jù)查詢失??！";
    }
?>
<!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./npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn./npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn./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表單提交目標(biāo)地址使用 action 屬性定義    -->
            <form action="update.php" method="post">
<!--            添加 id 字段用于提交后臺時根據(jù) id條件判斷修改哪一條數(shù)據(jù)，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">標(biāo)題</label>
                    <div class="col-sm-11">
<!--                    注意：通過<input>標(biāo)簽的 value 屬性進(jìn)行賦值，賦值時必須使用 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">內(nèi)容</label>
                    <div class="col-sm-11">
<!--                    注意：<textarea>未塊級元素，直接在標(biāo)簽內(nèi)部賦值?。? -->
                        <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>

　?、?nbsp;update.php 提交修改數(shù)據(jù)

<?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 "當(dāng)前數(shù)據(jù)id不存在！".$err->getMessage();
        }
    }
?>

　?、?nbsp;detailnews.php 查詢詳情

　　　　在PHP中通過id查詢操作數(shù)據(jù)，然后在HTML中展示結(jié)果；

　　　　HTML中展示查詢結(jié)果時，使用PHP代碼獲取數(shù)據(jù)。

<?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()方法的第一個參數(shù)中添加“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 '數(shù)據(jù)庫連接失??！錯誤信息：'.$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./npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn./npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn./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>

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：頭號碼甲 > 《待分類》

舉報/認(rèn)領(lǐng)