search

博客列表 >12月10日- php动态实现数据页面

12月10日- php动态实现数据页面

Eric
Eric原创
2019年12月12日 16:56:541248浏览

一、页面布局思路：把头部和尾部或其他相同的模块抽象为公共模板

header.php 头部代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>php中文网后台管理系统</title>
  6.     <meta name="renderer" content="webkit">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10.     <meta name="apple-mobile-web-app-capable" content="yes">
  11.     <meta name="format-detection" content="telephone=no">
  12.     <link rel="stylesheet" href="static/css/style.css?ddd"  media="all">
  13.     <link rel="stylesheet" href="static/css/home.css?ddd"  media="all">
  14.     <script src="static/js/jquery3.4.1.js"></script>
  15. </head>
  16. <body>
  17. <!--网站头部开始-->
  18. <div class="home-top phpcn-clear">
  19.     <ul class='phpcn-col-md10'>
  20.         <li >
  21.             <a href="index.php">网站首页</a>
  22.         </li>
  23.         <li>
  24.             <a href="articles.php">新闻资讯</a>
  25.         </li>
  26.         <li>
  27.             <a href="pictures.php">图片专区</a>
  28.         </li>
  29.         <li>
  30.             <a href="shop.php">商品专区</a>
  31.         </li>
  32.     </ul>
  33.     <dl class='phpcn-col-md2'>
  34.         <dd>
  35.             <a href="">免费注册</a>
  36.         </dd>
  37.         <dd>
  38.             <a href=""><i class="phpcn-icon phpcn-icon-huiyuan2"></i>登陆</a>
  39.         </dd>
  40.     </dl>
  41. </div>
  42. <!--网站头部结束-->

 
footer.php 尾部代码：

  1. <!--网站底部开始-->
  2. <div class="phpcn-clear phpcn-mt-30 footer">
  3.     <div class="phpcn-main">
  4.         <div class="phpcn-col-md8">
  5.             <div class="link phpcn-mb-30">
  6.                 <a href="" target="_blank">简介</a>
  7.                 <a href="" target="_blank">联系我们</a>
  8.                 <a href="" target="_blank">友情链接</a>
  9.                 <a href="" target="_blank">招聘信息</a>
  10.                 <a href="" target="_blank">用户服务协议</a>
  11.                 <a href="" target="_blank">隐私权声明</a>
  12.                 <a href="" target="_blank">法律投诉声明</a>
  13.             </div>
  14.             <div class="phpcn-col-md2 f-logo">
  15.                 <img src="static/images/logo2.png" style="width: 120px;height: auto;margin-left: 0px">
  16.             </div>
  17.             <div class="phpcn-col-md10">
  18.                 <P>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</P>
  19.                 <P><span>皖ICP证150110号 京ICP备14323013号-2</span> <span>皖公网安备110108024357788号</span></P>
  20.                 <P><span>违法和不良信息举报电话: 0551-1234567</span> <span>举报邮箱: admin@baidu.com</span></P>
  21.             </div>
  23.         </div>
  24.         <div class="phpcn-col-md4">
  25.             <h4>关注公众号</h4>
  26.             <img src="static/images/erwei-code.png">
  27.         </div>
  28.     </div>
  29. </div>
  30. <!--网站底部结束-->
  32. <!-- js文件开始 -->
  33. <script src="static/js/pin.js"></script>
  34. <script...> 其他各种js文件
  35. <!-- js文件结束 -->
  36. </body>
  37. </html>

 

二、页面布局格式：引入公共模板

  1. <!-- 头部 -->
  2. <?php include 'common/header.php' ?>
  4. <!-- 主体内容 -->
  5. <main>
  6.     内容...
  7. </main>
  9. <!-- 尾部 -->
  10. <?php include 'common/header.php' ?>

 

三、获取数据

例：Article.php代码 与 Shop.php、Picture.php 方法相同

  1. class Article
  2. {
  3.     private $pdo; // pdo实例
  4.     /**
  5.      * Picture constructor.
  6.      * @param $pdo 对象
  7.      */
  8.     public function __construct($pdo)
  9.     {
  10.         $this->pdo = $pdo;
  11.     }
  13.     // 获取单条数据
  14.     public function view($id)
  15.     {
  16.         $sql = 'select * from `articles` where id=:id';
  17.         $stmt = $this->pdo->prepare($sql);
  18.         $stmt->bindParam('id', $id, PDO::PARAM_INT);
  19.         $stmt->setFetchMode(PDO::FETCH_CLASS, Article::class);
  20.         $stmt->execute();
  21.         $data = $stmt->fetch(PDO::FETCH_ASSOC);
  22.         return $data;
  23.     }
  25.     // 获取多条数据
  26.     public function getLimit($count)
  27.     {
  28.         $sql = 'select * from `articles` limit :offset';
  29.         $stmt = $this->pdo->prepare($sql);
  30.         $stmt->bindParam('offset', $count, PDO::PARAM_INT);
  31.         $stmt->execute();
  32.         $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
  33.         return $data;
  34.     }
  36.     // 获取所有数据
  37.     public function getData()
  38.     {
  39.         $sql = 'select * from `articles`';
  40.         $stmt = $this->pdo->prepare($sql);
  41.         $stmt->execute();
  42.         $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
  43.         return $data;
  44.     }
  45. }

数据库 articles 表：

 

四、页面数据导入并渲染

例：articles.php新闻页面，shop.php pictures.php方式相同，代码略…

  1. <?php
  2. require 'db/db.php';
  3. require 'model/Article.php';
  4. // 获取数据
  5. $article = new Article($pdo);
  6. $list = $article->getData();
  7. $limit6 = $article->getLimit(6);
  8. ?>
  10. <!--网站头部-->
  11. <?php include 'common/header.php'; ?>
  13. <!--网站主体-->
  14. <div class="ar-head phpcn-main">
  15.     <div class='phpcn-col-md10 path'>
  16.         <a href=""><img src="static/images/ar-logo.png"></a>
  17.         <a href="">财经</a>
  18.         <span>></span>
  19.         <span>列表</span>
  20.     </div>
  21.     <div class='phpcn-col-md2'>
  22.         <input type="" name=""> <i class="phpcn-icon phpcn-icon-sousuo2" placeholder='关键字搜索'></i>
  23.     </div>
  24.     <div class="phpcn-clear">
  25.         <div class="phpcn-col-md9">
  26.             <div class="article-content">
  27.                 <!--列表开始-->
  28.                 <div class="alist">
  29.                     <div class="aritcle-list">
  30.                         <?php
  31.                         foreach ($list as $item) {
  32.                             $id = $item['id'];
  33.                             $article = '';
  34.                             $article .= '<div class="phpcn-clear phpcn-mt-30">';
  35.                             $article .= '<div class="phpcn-col-md4"><img src="' . $item['img_url'] . '"></div>';
  36.                             $article .= '<div class="phpcn-col-md8">';
  37.                             $article .= '<h2><a href="article-info.php?id='.$id.'">' . $item['title'] . '</a></h2>';
  38.                             $article .= '<div class="info phpcn-mt-10">' . $item['title'] . '</div>';
  39.                             $article .= '<div>';
  40.                             $article .= '<a href="">环球时事： ' . $item['create_dt'] . '</a>';
  41.                             $article .= '<span><i class="phpcn-icon phpcn-icon-icon_yulan phpcn-r phpcn-mr-20">' . $item['view'] . '</i></span>';
  42.                             $article .= '</div>';
  43.                             $article .= '</div>';
  44.                             $article .= '</div>';
  45.                             echo $article;
  46.                         }
  47.                         ?>
  48.                     </div>
  49.                 </div>
  50.                 <!--列表开始结束-->
  51.                 <!--推荐阅读 --->
  52.                 <div class="about-read phpcn-mt-30 phpcn-clear">
  53.                     <div class="title"><span>推荐阅读</span></div>
  54.                     <?php include 'common/recommond.php'; ?>
  55.                 </div>
  56.                 <!--推荐阅读 结束--->
  57.             </div>
  58.         </div>
  60.         <div class="phpcn-col-md3">
  61.             <div class="hot-article">
  62.                 <div class="title"><span>环球时事</span></div>
  63.                 <ul>
  64.                     <?php
  65.                     foreach ($limit6 as $item) {
  66.                         $id = $item['id'];
  67.                         $card = '';
  68.                         $card .= '<li style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden">';
  69.                         if ($id <= 3) {
  70.                             $card .= '<span class="hot">' . $id . '</span>';
  71.                         } else {
  72.                             $card .= '<span>' . $id . '</span>';
  73.                         }
  74.                         $card .= '<a href="article-info.php?id=' . $id . '">' . $item['title'] . '</a>';
  75.                         $card .= '</li>';
  76.                         echo $card;
  77.                     }
  78.                     ?>
  79.                 </ul>
  80.             </div>
  81.             <div class="hot-article phpcn-mt-30">
  82.                 <div class="title"><span>环球业界</span></div>
  83.                 <ul>
  84.                     <?php
  85.                     foreach ($limit6 as $item) {
  86.                         $id = $item['id'];
  87.                         $card = '';
  88.                         $card .= '<li style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden">';
  89.                         if ($id <= 3) {
  90.                             $card .= '<span class="hot">' . $id . '</span>';
  91.                         } else {
  92.                             $card .= '<span>' . $id . '</span>';
  93.                         }
  94.                         $card .= '<a href="article-info.php?id=' . $id . '">' . $item['title'] . '</a>';
  95.                         $card .= '</li>';
  96.                         echo $card;
  97.                     }
  98.                     ?>
  99.                 </ul>
  100.             </div>
  102.         </div>
  103.     </div>
  104. </div>
  106. <!--网站底部-->
  107. <?php include 'common/footer.php'; ?>

代码效果：

 
article-info.php文章详情页面：

  1. <?php
  2. require 'db/db.php';
  3. require 'model/Article.php';
  5. //接收新闻页面传过来的 id
  6. $id = intval($_GET['id'] ?? 1);
  8. $article = new Article($pdo);
  9. $info = $article->view($id);
  11. $list = $article->getData();
  12. $limit6 = $article->getLimit(6);
  13. ?>
  15. <!-- 头部 -->
  16. <?php include 'common/header.php'; ?>
  18. <!--新闻内容头部分类-->
  19. <div class="ar-head phpcn-main">
  20.     <div class='phpcn-col-md10 path'>
  21.         <a href=""><img src="static/images/ar-logo.png"></a>
  22.         <a href="">财经</a>
  23.         <span>></span>
  24.         <span>正文</span>
  25.     </div>
  26.     <div class='phpcn-col-md2'>
  27.         <input type="" name=""> <i class="phpcn-icon phpcn-icon-sousuo2" placeholder='关键字搜索'></i>
  28.     </div>
  29.     <div class="phpcn-clear">
  30.         <div class="phpcn-col-md9">
  31.             <div class="article-content">
  32.                 <h1><?php echo $info['title']; ?></h1>
  33.                 <div class="attribute">
  34.                     <span>发布时间：<?php echo $info['create_dt']; ?></span>
  35.                     <span>来源：<?php echo $info['author']; ?></span>
  36.                     <span>阅读量：<?php echo $info['view']; ?></span>
  37.                     <span>评论数：<?php echo $info['comment']; ?></span>
  38.                 </div>
  39.                 <article>
  40.                     <?php echo $info['content']; ?>
  41.                 </article>
  42.                 <div class="suggest">
  43.                     <button class="phpcn-button phpcn-bg-red phpcn-button-hover">赞</button>
  44.                     <button class="phpcn-button phpcn-color-grayphpcn-button-hover">踩</button>
  45.                 </div>
  46.                 <!--评论--->
  47.                 <div class="comment phpcn-mt-30">
  48.                     <div class="title phpcn-mb-30"><span>网页评论</span></div>
  49.                     <div class="phpcn-clear">
  50.                         <div class="phpcn-col-md1"><img class="user" src="static/images/user.png"></div>
  51.                         <div class="phpcn-col-md11">
  52.                     <textarea>
  53.                         我来评论两句
  54.                     </textarea>
  55.                             <button class="phpcn-button phpcn-bg-red phpcn-button-hover phpcn-mt-10 phpcn-mb-10 phpcn-r">
  56.                                 发表评论
  57.                             </button>
  58.                         </div>
  59.                     </div>
  60.                 </div>
  61.                 <!--评论结束--->
  62.                 <!--推荐阅读 --->
  63.                 <div class="about-read phpcn-mt-30">
  64.                     <div class="title"><span>推荐阅读</span></div>
  65.                     <?php include 'common/recommond.php'; ?>
  66.                 </div>
  67.                 <!--推荐阅读 结束--->
  68.             </div>
  69.         </div>
  71.         <div class="phpcn-col-md3">
  72.             <div class="hot-article">
  73.                 <div class="title"><span>环球时事</span></div>
  74.                 <ul>
  75.                     <?php
  76.                     foreach ($limit6 as $item) {
  77.                         $id = $item['id'];
  78.                         $card = '';
  79.                         $card .= '<li style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden">';
  80.                         if ($id <= 3) {
  81.                             $card .= '<span class="hot">' . $id . '</span>';
  82.                         } else {
  83.                             $card .= '<span>' . $id . '</span>';
  84.                         }
  85.                         $card .= '<a href="article-info.php?id=' . $id . '">' . $item['title'] . '</a>';
  86.                         $card .= '</li>';
  87.                         echo $card;
  88.                     }
  89.                     ?>
  90.                 </ul>
  91.             </div>
  92.             <div class="hot-article phpcn-mt-30">
  93.                 <div class="title"><span>环球业界</span></div>
  94.                 <ul>
  95.                     <?php
  96.                     foreach ($limit6 as $item) {
  97.                         $id = $item['id'];
  98.                         $card = '';
  99.                         $card .= '<li style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden">';
  100.                         if ($id <= 3) {
  101.                             $card .= '<span class="hot">' . $id . '</span>';
  102.                         } else {
  103.                             $card .= '<span>' . $id . '</span>';
  104.                         }
  105.                         $card .= '<a href="article-info.php?id=' . $id . '">' . $item['title'] . '</a>';
  106.                         $card .= '</li>';
  107.                         echo $card;
  108.                     }
  109.                     ?>
  110.                 </ul>
  111.             </div>
  113.         </div>
  114.     </div>
  115. </div>
  116. <!--新闻内容头部分类结束-->
  117. <!--网站底部-->
  118. <?php include 'common/footer.php'; ?>

新闻详情：http://demo.com/fniao/article-info.php?id=1

 
新闻详情：http://demo.com/fniao/article-info.php?id=2

其他页面代码略，案例代码目录：

首页：

图片页：

商品页：

课堂总结:

1、界面传值：<a href='target.php?id=10'>点击传值</a>，接收值：$id = intval($_GET['id'] ?? 1);，intval(): 将值转化为int类型；

2、开发中布局相同的页面，即可抽象出来，在需要的页面直接引入，降低耦合，提高代码复用。

THE END !

上一条：12月09日_PHP文件上传下一条：MVC基础框架执行数据库CURD操作，PHP文件上传案例 - 第九期线上班 20191212
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多