经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » PHP » 查看文章
WEB前端第五十九课——时间戳、数据交互小案例
来源:cnblogs  作者:后来喵  时间:2021/1/25 11:23:04  对本文有异议

1.时间戳

  程序开发中所说的时间戳,通常是指从1970年1月1日0时到当前事件的毫秒数。

  time()方法,用于获取当前的时间戳,结果为毫秒数。

  date()方法,用于将时间戳结果转换为通常的时间格式。

  语法:date(format,timeStamp);  //format参数用于定义日期时间格式

  时间格式:

    年:Y 4位数年份    y 2位数年份

    月:M 3位英文简写     F 完整英文月份    m 2位数月份  n 无0数字月份

    日:d 2位数月第几天  j 无0补位月第几天 S  月第几天英序数后缀  z 年第几天

    星期: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”拼接,时间之间的连接符通常使用“:”。

  代码示例:

  1. <?php
  2. echo time();
  3. echo '<br>';
  4. echo date('Y-m-d H:i:s',time());
  5. echo '<br>';
  6. echo date('D jS \of F Y h:i:s a'); //可不写 time()方法。
  7. echo '<br>';
  8. // 设置默认时区
  9. date_default_timezone_set('Asia/Shanghai');
  10. echo date('Y-m-d H:i:s',time());
  11. ?>

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>行。

  1. <?php
  2. try{
  3. $con = new PDO("mysql:host=localhost;dbname=dbTest","root","");
  4. $con->exec('set names utf8'); //也可以在上述PDO()方法的第一个参数中添加“charset=utf8”
  5. $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
  6. $sql = "select * from news where 1";
  7. $res = $con->query($sql);
  8. $resInfo = $res->fetchAll(PDO::FETCH_ASSOC);
  9. // print_r($resInfo);
  10. $newsInfo = "";
  11. if($res){
  12. for($i=0;$i<count($resInfo);$i++){
  13. // 通过字符串“.”点号拼接的方式获取“$resInfo”数组中的信息,获取字段数据使用“{}”包裹变量。
  14. $newsInfo.="<tr>
  15. <td>{$resInfo[$i]['id']}</td><td>{$resInfo[$i]['title']}</td>
  16. <td>{$resInfo[$i]['author']}</td><td>{$resInfo[$i]['summary']}</td>
  17. <td>{$resInfo[$i]['time']}</td>
  18. <td>
  19. <a href='updNews.php?id={$resInfo[$i]['id']}'>修改</a>
  20. <a href='delNews.php?id={$resInfo[$i]['id']}'>删除</a>
  21. <a href='detailNews.php?id={$resInfo[$i]['id']}'>详情</a>
  22. </td>
  23. </tr>";
  24. }
  25. }else{
  26. echo '<script>alert("数据为空")</script>';
  27. }
  28. }catch(PDOException $e){
  29. echo '数据库连接失败!错误信息:'.$e->getMessage();
  30. }
  31. ?>
  32.  
  33. <!DOCTYPE html>
  34. <html lang="en">
  35. <head>
  36. <meta charset="UTF-8">
  37. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  38. <meta name="viewport" content="width=device-width, initial-scale=1">
  39. <title>秋香news</title>
  40. <link rel="stylesheet" href="./JSFiles/bootstrap.min.css">
  41. <script src="./JSFiles/jquery-1.12.4.min.js"></script>
  42. <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  43. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  44. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
  45.  
  46. <style>
  47. .container{
  48. margin:20px auto;
  49. }
  50. th{
  51. text-align: center;
  52. vertical-align: middle!important; //此处样式需要使用“!important”强制优先,样式才会生效!
  53. }
  54.  
  55. .leftCon{
  56. border-left: 1px solid hotpink;
  57. }
  58. .leftCon a{
  59. display: block;
  60. margin: 10px 0;
  61. padding: 2px 0;
  62. color: darkorange;
  63. border-bottom: 1px solid pink;
  64. text-decoration: none;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <div class="container" >
  70. <div class="row" >
  71. <div class="col-2 leftCon">
  72. <a href='#'>文档列表</a>
  73. <a href='create.html'>添加文章</a>
  74. </div>
  75. <div class="col-10">
  76. <table class="table table-sm table-hover table-bordered">
  77. <thead class="thead-dark">
  78. <tr>
  79. <th scope="col">ID</th>
  80. <th scope="col">标题</th>
  81. <th scope="col">作者</th>
  82. <th scope="col">文章概要</th>
  83. <th scope="col">时间</th>
  84. <th scope="col">操作</th>
  85. </tr>
  86. </thead>
  87. <tbody class="thead-light">
  88. <?php
  89. echo $newsInfo;
  90. ?>
  91. </tbody>
  92. </table>
  93. </div>
  94. </div>
  95. </div>
  96. </body>
  97. </html>

  ⑵ create.html 新增文章页面

    使用 form 表单形式创建界面,表单提交的字段 name 须与后台接收字段名一致!

    BootStrap 组件中,label标签的 for 属性值与input标签的 id 属性值必须保持一致!

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>新增文章</title>
  8. <link rel="stylesheet" href="./JSFiles/bootstrap.min.css">
  9. <script src="./JSFiles/jquery-1.12.4.min.js"></script>
  10. <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  11. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  12. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
  13.  
  14. <style>
  15. .container{
  16. margin:20px auto;
  17. }
  18. .btn{
  19. display: block;
  20. margin: 0 auto;
  21. }
  22.  
  23. .leftCon{
  24. border-left: 1px solid hotpink;
  25. }
  26. .leftCon a{
  27. display: block;
  28. margin: 5px 0;
  29. padding: 2px 0;
  30. color: darkorange;
  31. border-bottom: 1px solid pink;
  32. text-decoration: none;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class="container" >
  38. <div class="row" >
  39. <div class="col-2 leftCon">
  40. <a href='#'>创建文章</a>
  41. </div>
  42. <div class="col-10 rightCon">
  43. <!-- form表单提交目标地址使用 action 属性定义 -->
  44. <form action="submit.php" method="post">
  45. <div class="form-group row">
  46. <label for="inputTitle" class="col-sm-1 col-form-label-lg">标题</label>
  47. <div class="col-sm-11">
  48. <input type="text" class="form-control" id="inputTitle" name="inputTitle">
  49. </div>
  50. </div>
  51. <div class="form-group row">
  52. <label for="inputAuthor" class="col-sm-1 col-form-label-lg">作者</label>
  53. <div class="col-sm-11">
  54. <input type="text" class="form-control" id="inputAuthor" name="inputAuthor">
  55. </div>
  56. </div>
  57. <div class="form-group row">
  58. <label for="inputSummary" class="col-sm-1 col-form-label-lg">概要</label>
  59. <div class="col-sm-11">
  60. <input type="text" class="form-control" id="inputSummary" name="inputSummary">
  61. </div>
  62. </div>
  63. <div class="form-group row">
  64. <label for="inputContent" class="col-sm-1 col-form-label-lg">内容</label>
  65. <div class="col-sm-11">
  66. <textarea type="text" class="form-control" id="inputContent" rows="15" name="inputContent"></textarea>
  67. </div>
  68. </div>
  69. <button type="submit" class="btn btn-success">Submit</button>
  70. </form>
  71. </div>
  72. </div>
  73. </div>
  74. </body>
  75. </html>

  ⑶ submit.php提交数据页面

    可使用“$_GET”或“$_POST”方法接收前台页面发送的数据,方法在 form method属性中定义;

    接收数据时可以使用 三目运算 判断字段值是否为空的情况;

    操作时间直接使用 time() 方法生成系统时间,不需要接收;

    注意设置默认时区,方法:date_default_timezone_set('Asia/Shanghai');

    调用字段值时,使用“{}”包裹变量;

    使用“echo()”方法向前台返回数据,返回内容可以是 <script>代码。

  1. <?php
  2. //接收前台页面提交的信息,可通过三目运算判断值是否为空。
  3. $id=isset($_POST['inputId'])?$_POST['inputId']:'';
  4. $title=isset($_POST['inputTitle'])?$_POST['inputTitle']:'';
  5. $author=isset($_POST['inputAuthor'])?$_POST['inputAuthor']:'';
  6. $summary=isset($_POST['inputSummary'])?$_POST['inputSummary']:'';
  7. $content=isset($_POST['inputContent'])?$_POST['inputContent']:'';
  8. date_default_timezone_set('Asia/Shanghai');
  9. $time=date('Y-m-d H:i:s',time());
  10. try{
  11. $con=new PDO('mysql:host=localhost;dbname=dbTest;charset=utf8','root','');
  12. $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
  13. // 接收信息写入数据库,SQL接收数据字段时使用 {} 提取!!!
  14. if($id==''){
  15. $sql="insert into news(title,author,summary,content,time) values('{$title}','{$author}','{$summary}','{$content}','{$time}')";
  16. $res=$con->query($sql);
  17. if($res){
  18. // 返回操作信息,可以直接在PHP中返回js语句给前台
  19. echo '<script>alert("创建成功!");window.location.href="index.php"</script>';
  20. }else{
  21. echo "创建失败!";
  22. }
  23. }else{
  24. $sql="update news set title='{$title}',author='{$author}',summary='{$summary}',content='{$content}',time='{$time}' where id='{$id}'";
  25. $res=$con->query($sql);
  26. if($res){
  27. // 返回操作信息,可以直接在PHP中返回js语句给前台
  28. echo '<script>alert("修改成功!");window.location.href="index.php"</script>';
  29. }else{
  30. echo "修改失败!";
  31. }
  32. }
  33. }catch(PDOException $e){
  34. echo "数据库连接失败!错误信息:".$e->getMessage();
  35. }
  36. ?>

  ⑷ delnews.php 删除数据

    删除、修改、详情操作均通过在前台定义<a>标签的方式,发送操作指令;

    在<a>标签中设置href链接地址,url后接“?”将当前操作id发送至后台;

    后台使用“$_GET”方法接收id值,判断删除对应的数据行。

  1. <?php
  2. $id=isset($_GET['id'])?$_GET['id']:'';
  3. if($id){
  4. try{
  5. $con=new PDO('mysql:host=localhost;dbname=dbTest;charset=utf8','root','');
  6. $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
  7. // 接收信息写入数据库,SQL接收数据字段时使用 {} 提取
  8. $sql="delete from news where id={$id}";
  9. $res=$con->query($sql);
  10. if($res){
  11. // 返回操作信息,可以直接在PHP中返回js语句给前台
  12. echo '<script>alert("删除成功!");window.location.href="index.php"</script>';
  13. }else{
  14. echo "删除失败!";
  15. }
  16. }catch(PDOException $e){
  17. echo "数据库连接失败!错误信息:".$e->getMessage();
  18. }
  19. }else{
  20. echo "删除数据ID不存在!";
  21. }
  22. ?>

  ⑸ updnews.php 修改数据

    获取操作数据行id后查询数据库,同新增数据页面样式展示目标数据;

    在 input value属性中设置 PHP 输出代码,将查询数据展示到界面;

    提交数据可以与新增提交共用后台逻辑,使用if判断新增还是修改。

  1. <?php
  2. $id=isset($_GET['id'])?$_GET['id']:'';
  3. if($id){
  4. try{
  5. $con=new PDO('mysql:host=localhost;dbname=dbTest;charset=utf8','root','');
  6. $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
  7. // 接收ID值,通过id查询该条数据,使用 {} 获取id。
  8. $sql = "select * from news where id={$id}";
  9. $res = $con->query($sql);
  10. $resInfo = $res->fetchAll(PDO::FETCH_ASSOC);
  11. // print_r($resInfo);
  12. }catch(PDOException $e){
  13. echo "数据库连接失败!错误信息:".$e->getMessage();
  14. }
  15. }else{
  16. echo "数据查询失败!";
  17. }
  18. ?>
  19. <!DOCTYPE html>
  20. <html lang="en">
  21. <head>
  22. <meta charset="UTF-8">
  23. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  24. <meta name="viewport" content="width=device-width, initial-scale=1">
  25. <title>新增文章</title>
  26. <link rel="stylesheet" href="./JSFiles/bootstrap.min.css">
  27. <script src="./JSFiles/jquery-1.12.4.min.js"></script>
  28. <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  29. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  30. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
  31.  
  32. <style>
  33. .container{
  34. margin:20px auto;
  35. }
  36. .btn{
  37. display: block;
  38. margin: 0 auto;
  39. }
  40.  
  41. .leftCon{
  42. border-left: 1px solid hotpink;
  43. }
  44. .leftCon a{
  45. display: block;
  46. margin: 5px 0;
  47. padding: 2px 0;
  48. color: darkorange;
  49. border-bottom: 1px solid pink;
  50. text-decoration: none;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div class="container" >
  56. <div class="row" >
  57. <div class="col-2 leftCon">
  58. <a href='#'>修改文章</a>
  59. </div>
  60. <div class="col-10 rightCon">
  61. <!-- form表单提交目标地址使用 action 属性定义 -->
  62. <form action="update.php" method="post">
  63. <!-- 添加 id 字段用于提交后台时根据 id条件判断修改哪一条数据,display隐藏显示。 -->
  64. <input type="number" style="display:none" name="inputId" value="<?php echo $resInfo[0]['id'] ?>">
  65. <div class="form-group row">
  66. <label for="inputTitle" class="col-sm-1 col-form-label-lg">标题</label>
  67. <div class="col-sm-11">
  68. <!-- 注意:通过<input>标签的 value 属性进行赋值,赋值时必须使用 PHP echo 格式输出!! -->
  69. <input type="text" class="form-control" id="inputTitle" name="inputTitle" value="<?php echo $resInfo[0]['title'] ?>">
  70. </div>
  71. </div>
  72. <div class="form-group row">
  73. <label for="inputAuthor" class="col-sm-1 col-form-label-lg">作者</label>
  74. <div class="col-sm-11">
  75. <input type="text" class="form-control" id="inputAuthor" name="inputAuthor" value="<?php echo $resInfo[0]['author'] ?>">
  76. </div>
  77. </div>
  78. <div class="form-group row">
  79. <label for="inputSummary" class="col-sm-1 col-form-label-lg">概要</label>
  80. <div class="col-sm-11">
  81. <input type="text" class="form-control" id="inputSummary" name="inputSummary" value="<?php echo $resInfo[0]['summary'] ?>">
  82. </div>
  83. </div>
  84. <div class="form-group row">
  85. <label for="inputContent" class="col-sm-1 col-form-label-lg">内容</label>
  86. <div class="col-sm-11">
  87. <!-- 注意:<textarea>未块级元素,直接在标签内部赋值!! -->
  88. <textarea type="text" class="form-control" id="inputContent" rows="15" name="inputContent"><?php echo $resInfo[0]['content'] ?></textarea>
  89. </div>
  90. </div>
  91. <button type="submit" class="btn btn-success">Submit</button>
  92. </form>
  93. </div>
  94. </div>
  95. </div>
  96. </body>
  97. </html>

  ⑹ update.php 提交修改数据

  1. <?php
  2. $id=isset($_POST['inputId'])?$_POST['inputId']:'';
  3. if($id){
  4. $title=isset($_POST['inputTitle'])?$_POST['inputTitle']:'';
  5. $author=isset($_POST['inputAuthor'])?$_POST['inputAuthor']:'';
  6. $summary=isset($_POST['inputSummary'])?$_POST['inputSummary']:'';
  7. $content=isset($_POST['inputContent'])?$_POST['inputContent']:'';
  8. date_default_timezone_set('Asia/Shanghai');
  9. $time=date('Y-m-d H:i:s',time());
  10. try{
  11. $con=new PDO("mysql:host=localhost;dbname=dbTest;charset=utf8","root","");
  12. $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
  13. $sql="update news set title='{$title}',author='{$author}',summary='{$summary}',content='{$content}',time='{$time}' where id='{$id}'";
  14. $res=$con->query($sql);
  15. if($res){
  16. echo '<script>alert("修改成功!");window.location.href="index.php"</script>';
  17. }else{
  18. echo "<script>alert('修改失败!');window.location.href='index.php'</script>";
  19. }
  20. }catch(PDOException $err){
  21. echo "当前数据id不存在!".$err->getMessage();
  22. }
  23. }
  24. ?>

  ⑺ detailnews.php 查询详情

    在PHP中通过id查询操作数据,然后在HTML中展示结果;

    HTML中展示查询结果时,使用PHP代码获取数据。

  1. <?php
  2. $id=isset($_GET['id'])?$_GET['id']:'';
  3. if($id){
  4. try{
  5. $con = new PDO("mysql:host=localhost;dbname=dbTest","root","");
  6. $con->exec('set names utf8'); //也可以在上述PDO()方法的第一个参数中添加“charset=utf8”
  7. $con->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
  8. $sql = "select * from news where id='{$id}'";
  9. $res = $con->query($sql);
  10. $resInfo = $res->fetchAll(PDO::FETCH_ASSOC);
  11. // print_r($resInfo);
  12. }catch(PDOException $e){
  13. echo '数据库连接失败!错误信息:'.$e->getMessage();
  14. }
  15. }
  16. ?>
  17.  
  18. <!DOCTYPE html>
  19. <html lang="en">
  20. <head>
  21. <meta charset="UTF-8">
  22. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  23. <meta name="viewport" content="width=device-width, initial-scale=1">
  24. <title>news正文</title>
  25. <link rel="stylesheet" href="./JSFiles/bootstrap.min.css">
  26. <script src="./JSFiles/jquery-1.12.4.min.js"></script>
  27. <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  28. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  29. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
  30.  
  31. <style>
  32. .container{
  33. margin:20px auto;
  34. }
  35. h3{
  36. height: 50px;
  37. }
  38. small{
  39. height: 20px;
  40. }
  41. .leftSpan{
  42. left:0;
  43. }
  44. .rightSpan{
  45. display:block;
  46. right:0;
  47. float:right;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <div class="container" >
  53. <div class="row" >
  54. <div class="col">
  55. <h3><?php echo $resInfo[0]['title'] ?></h3>
  56. <small>
  57. <span class="leftSpan"><?php echo $resInfo[0]['author']?></span>
  58. <span class="rightSpan"><?php echo $resInfo[0]['time'] ?></span>
  59. </small>
  60. <p style="margin:10px auto;padding:20px 0 10px;border-top:1px solid pink">
  61. <?php echo $resInfo[0]['summary'] ?>
  62. </p>
  63. <p><?php echo $resInfo[0]['content'] ?></p>
  64. <div>
  65.  
  66. </div>
  67. <!-- -->
  68. </div>
  69. </body>
  70. </html>

  

原文链接:http://www.cnblogs.com/husa/p/14273070.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号