PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

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

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

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

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>
  22. </div>
  23. <div class="phpcn-col-md4">
  24. <h4>关注公众号</h4>
  25. <img src="static/images/erwei-code.png">
  26. </div>
  27. </div>
  28. </div>
  29. <!--网站底部结束-->
  30. <!-- js文件开始 -->
  31. <script src="static/js/pin.js"></script>
  32. <script...> 其他各种js文件
  33. <!-- js文件结束 -->
  34. </body>
  35. </html>

 

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

  1. <!-- 头部 -->
  2. <?php include 'common/header.php' ?>
  3. <!-- 主体内容 -->
  4. <main>
  5. 内容...
  6. </main>
  7. <!-- 尾部 -->
  8. <?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. }
  12. // 获取单条数据
  13. public function view($id)
  14. {
  15. $sql = 'select * from `articles` where id=:id';
  16. $stmt = $this->pdo->prepare($sql);
  17. $stmt->bindParam('id', $id, PDO::PARAM_INT);
  18. $stmt->setFetchMode(PDO::FETCH_CLASS, Article::class);
  19. $stmt->execute();
  20. $data = $stmt->fetch(PDO::FETCH_ASSOC);
  21. return $data;
  22. }
  23. // 获取多条数据
  24. public function getLimit($count)
  25. {
  26. $sql = 'select * from `articles` limit :offset';
  27. $stmt = $this->pdo->prepare($sql);
  28. $stmt->bindParam('offset', $count, PDO::PARAM_INT);
  29. $stmt->execute();
  30. $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
  31. return $data;
  32. }
  33. // 获取所有数据
  34. public function getData()
  35. {
  36. $sql = 'select * from `articles`';
  37. $stmt = $this->pdo->prepare($sql);
  38. $stmt->execute();
  39. $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
  40. return $data;
  41. }
  42. }

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

代码效果:

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

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议