Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月10日- php动态实现数据页面
Blogger Information
Blog 16
fans 7
comment 1
visits 11501
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
12月10日- php动态实现数据页面
Eric
Original
1249 people have browsed it

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

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 !

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：完成的不错, 新的页面是否下载了, 可以试试看能否将内容照搬过去, 因为后面的实战用的是新页面...,当然所有动态页面的数据填充原理是一样的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post