玩命牛的成长记录
登陆
1972次阅读
服务端后台实现

其实后台也不是很难，就是从服务器中取出数据，然后放到前端展示就好啦。

首先我们需要一个操作数据库的类，想起了我之前封装的SQLHelper，直接拿来用就好了，改改数据库名，用户名，密码就能用了，这就是代码积累的好处呀！这个文件就不展示啦！

好了，有了SQLHelper之后，index页面就是将前四个pic_title取出，然后分别取出对应title的最新9个图片，然后展示出来，对于日记，就取最新两条日记就好。来看看代码：（因为这节是改后台，所以style就直接跳过好啦，下同）

<!DOCTYPE html>
<head>
  <meta charset=utf-8 />
  <title>pet show</title>
  <style>
    * {
      margin : 0px;
      padding : 0px;
    }
    body {
      background-color : #B1ECFE;
    }
    .totalDiv {
      width : 1000px;
      margin : 10px auto;
    }
    .titleDiv {
      width : 100%;
      height : 100px;
      background-color : #AEFFCF;
      margin-top : 10px;
    }
    .imgDiv {
      float : left;
    }
    .twoTitle {
      float : left;
    }
    .bigTitle {
      font-size : 45px;
      color : #FF5400;
      font-weight : bold;
      margin-top : 8px;
      margin-left : 28px;
    }
    .subTitle {
      font-size : 20px;
      color : #FF0000;
      margin-top : 5px;
      margin-left : 35px;
    }
    .menu {
      float : left;
      margin-left : 120px;
      margin-top : 15px;
    }
    .menu li {
      float : left;
      margin-left : 50px;
      list-style-type : none;
    }
    .menu a {
      font-size : 60px;
      text-decoration : none;
      color : #FFC600;
    }
    .menu a:hover {
      color : #6CDBFF;
    }
    .picDiv, .blogDiv {
      width : 100%;
      
      background-color : #6CDBFF;
      margin-top : 10px;
    }
    .picUl {
      width : 800px;
      margin : 0px auto;
    }
    .picLi {
      list-style-type : none;
      width : 350px;
      float : left;
      margin-left : 40px;
    }
    .picLi li {
      list-style-type : none;
      float : left;
      margin-top : 10px;
      margin-left : 10px;
    }
    .picTitle {
      color : #2B6BB2;
      font-size : 20px;
      font-weight : bold;
      text-align : center;
      margin-top : 10px;
    }
    .blogUl {
      width : 900px;
      margin : 0px auto;
      
    }
    .blogLi {
      list-style-type : none;
      padding-top : 15px;
      padding-bottom : 15px;
    }
    .blogTitle {
      color : #2B6BB2;
      font-size : 50px;
    }
  </style>
</head>
<body>
  <div class="totalDiv">
    <div class="titleDiv">
      <div class="imgDiv">
        <img src="../../images/logo.jpg" width="150px" height="100px" />
      </div>
      <div class="twoTitle">
        <div class="bigTitle">
          宠恋秀
        </div>
        <div class="subTitle">
          秀出你的宠物
        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="index.php">首页</a></li>
          <li><a href="pic.php">图片</a></li>
          <li><a href="blog.php">日记</a></li>
        </ul>
      </div>
    </div>
<?php 
  require_once dirname ( __FILE__ ) . '/../../common/SQLHelper.class.php';
  $sqlHelper = new SQLHelper();
  // 选出前四个pic_title
  $sql = "select * from pic_title limit 0,4";
  $picTitles = $sqlHelper->execute_dql_array($sql);
?>
    <div class="picDiv">
      <ul class="picUl">
        <?php 
          foreach ($picTitles as $picTitle) {
        ?>
        <li class="picLi">
          <div class="picTitle"><?php echo $picTitle['title'];?></div>
          <ul>
            <?php 
              $sql = "select * from picture where title_id=" . $picTitle['id'] . " order by id desc limit 0,9";
              $pictures = $sqlHelper->execute_dql_array($sql);
              foreach($pictures as $picture) {
            ?>
            <li><img src="<?php echo $picture['path'];?>" /></li>
            <?php 
              }
            ?>
          </ul>
        </li>
        <?php
          }
        ?>
      </ul>
      <div style="clear : both; height : 10px;"></div>
    </div>
    <div class="blogDiv">
      <ul class="blogUl">
      <?php 
        $sql = "select * from blog order by id desc limit 0,2";
        $blogs = $sqlHelper->execute_dql_array($sql);
        foreach ($blogs as $blog) {
      ?>
        <li class="blogLi">
          <div class="blogTitle"><?php echo $blog['title'];?></div>
          <div class="blogArticle">
          <?php echo $blog['short_content'];?>
          </div>
        </li>
      <?php 
        }
      ?>
      </ul>
    </div>
  </div>
</body>
check the result

代码中sql里面的limit 0,4就是从第0条开始取，取四条，order by id desc是指按id降序排列，这就是数据库的好处，可以帮我们方便地整理数据，而sql就是数据库的精华。一开始数据库中没有数据，我们可以先人为插入一些数据进去，方便调试。

对于图片页，数据同样是这样取出后展示，关键是点击图片要能够显示大图，还得可以左右切换，这就需要javascript来帮忙了。先看看效果：

<!DOCTYPE html>
<head>
  <meta charset=utf-8 />
  <title>pet show</title>
  <style>
    * {
      margin : 0px;
      padding : 0px;
    }
    body {
      background-color : #B1ECFE;
    }
    .totalDiv {
      width : 1000px;
      margin : 10px auto;
    }
    .titleDiv {
      width : 100%;
      height : 100px;
      background-color : #AEFFCF;
      margin-top : 10px;
    }
    .imgDiv {
      float : left;
    }
    .twoTitle {
      float : left;
    }
    .bigTitle {
      font-size : 45px;
      color : #FF5400;
      font-weight : bold;
      margin-top : 8px;
      margin-left : 28px;
    }
    .subTitle {
      font-size : 20px;
      color : #FF0000;
      margin-top : 5px;
      margin-left : 35px;
    }
    .menu {
      float : left;
      margin-left : 120px;
      margin-top : 15px;
    }
    .menu li {
      float : left;
      margin-left : 50px;
      list-style-type : none;
    }
    .menu a {
      font-size : 60px;
      text-decoration : none;
      color : #FFC600;
    }
    .menu a:hover {
      color : #6CDBFF;
    }
    .picDiv {
      width : 100%;
      background-color : #6DDBFF;
      margin-top : 30px;
    }
    .picLi {
      width : 950px;
      background-color : #29CAFF;
      list-style-type : none;
      margin : 0px auto;
      padding : 5px;
    }
    .picTitle {
      color : #2B6BB2;
      font-size : 40px;
    }
    .picLi ul {
      width : 900px;
      margin : 0px auto;
    }
    .picLi li {
      list-style-type : none;
      float : left;
      margin : 25px;
      cursor : pointer;
    }
    .grayDiv {
      position : absolute;
      width : 100%;
      height : 100%;
      background-color : gray;
      top : 0px;
      left : 0px;
      opacity : 0.5;
    }
    .wrapDiv {
      position : fixed;
      top : 100px;
      left : -250px;
      width ：100%;
      margin-left : 50%;
    }
    .leftButton, .rightButton {
      position : fixed;
      top : 300px;
      width ：100%;
      margin-left : 50%;
      cursor : pointer;
    }
    .leftButton {
      left : -320px;
    }
    .rightButton {
      left : 270px;
    }
  </style>
</head>
<body>
  <div class="totalDiv">
    <div class="titleDiv">
      <div class="imgDiv">
        <img src="../../images/logo.jpg" width="150px" height="100px" />
      </div>
      <div class="twoTitle">
        <div class="bigTitle">
          宠恋秀
        </div>
        <div class="subTitle">
          秀出你的宠物
        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="index.php">首页</a></li>
          <li><a href="pic.php">图片</a></li>
          <li><a href="blog.php">日记</a></li>
        </ul>
      </div>
    </div>
<?php 
  require_once dirname ( __FILE__ ) . '/../../common/SQLHelper.class.php';
  $sqlHelper = new SQLHelper();
  $sql = "select * from pic_title";
  $picTitles = $sqlHelper->execute_dql_array($sql);
?>
    <script>
      var titles = {};
    </script>
    <div class="picDiv">
      <ul class="picUl">
        <div style="height : 30px;"></div>
        <?php 
          foreach ($picTitles as $picTitle) {
        ?>
        <script>
          var pics = new Array();
        </script>
        <li class="picLi">
          <div class="picTitle"><?php echo $picTitle['title'];?></div>
          <ul>
            <?php 
              $sql = "select * from picture where title_id=" . $picTitle['id'] . " limit 0,9";
              $pictures = $sqlHelper->execute_dql_array($sql);
              foreach($pictures as $index => $picture) {
            ?>
            <li class="imgLi" pid="<?php echo $picTitle['id'];?>" id="<?php echo $index;?>"><img src="<?php echo $picture['path'];?>" width="100px" height="100px" /></li>
            <script>
              pics[<?php echo $index;?>] = "<?php echo $picture['path'];?>";
            </script>
            <?php 
              }
            ?>
          </ul>
          <div style="clear : both;"></div>
        </li>
        <div style="height : 30px;"></div>
        <script>
          titles[<?php echo $picTitle['id'];?>] = pics;
        </script>
        <?php
          }
        ?>
      </ul>
    </div>
  </div>
  <div id="bigPic">
    <div class="grayDiv" id="grayDiv"></div>
    <div class="wrapDiv"><img id="bigImg" src="../../images/pics/pic1.jpg" width="500px" height="500px" /></div>
    <div class="leftButton"><img id="leftButton" src="../../images/left.png" /></div>
    <div class="rightButton"><img id="rightButton" src="../../images/right.png" /></div>
  </div>
  <script>
    var curIndex;
    var curTitleId;
    setTimeout(function() {
      document.getElementById("grayDiv").style.height = document.body.scrollHeight + "px";
    }, 100);
    document.getElementById("bigPic").style.display = 'none';
    var showBigImg = function(path) {
      document.getElementById("bigImg").setAttribute("src", path);
      if(document.getElementById("bigPic").style.display == 'none') {
        document.getElementById("bigPic").style.display = 'block';
      }
    }
    var hideBigImg = function() {
      if(document.getElementById("bigPic").style.display == 'block') {
        document.getElementById("bigPic").style.display = 'none';
      }
    }
    document.getElementById("bigPic").onclick = function(e) {
      if(e.target.id == "grayDiv") {
        hideBigImg();
      } else if(e.target.id == "leftButton") {
        curIndex--;
        if(curIndex < 0) {
          curIndex = titles[curTitleId].length-1;
        }
        showBigImg(titles[curTitleId][curIndex]);
      } else if(e.target.id == "rightButton") {
        curIndex++;
        if(curIndex >= titles[curTitleId].length) {
          curIndex = 0;
        }
        showBigImg(titles[curTitleId][curIndex]);
      }
    }
    var imgLis = document.querySelectorAll(".imgLi");
    for (index in imgLis) {
      imgLis[index].onclick = function() {
        curIndex = this.getAttribute("id");
        curTitleId = this.getAttribute("pid");
        showBigImg(titles[curTitleId][curIndex]);
      };
    }
  </script>
</body>
check the result

我们先在li上加上cursor:pointer;，这样，鼠标放上去就会有手型图案了。然后我们在li的属性中加了id和pid，分别存储picture的id和pic_title的id，然后在for循环的时候，构建titles二维数组。如果不清楚titles的结构，那么建议你使用chrome浏览器，在浏览器右键，选择审查元素，选中console，然后输入titles，回车，就能够看见titles的结构了。关于chrome的调试技巧，建议看看这里，主要看console部分。

之后，我们又写了两个函数，showBigImg和hideBigImg，用来显示和隐藏大图，在id为bigPic的div上面绑定onclick，然后根据e.target.id来区分到底click了哪个div，如果点击了灰色遮罩，那么就将大图隐藏了。点击了li，就通过this.getAttribute拿到它的id和pid，这里的this就是一个li，然后再从titles中取得图片path，将大图的src设置为path，就能显示大图了，左右切换的按钮，就是在titles中去加减索引，然后拿到对应的path就ok了。需要注意的是，这里为了得到包含图片的li，我们为每个需要被选的li加了.imgLi的class，然后用document.querySelectorAll(".imgLi")将元素选择出来，这是一种非常常用的方式。

Blog页面是类似的，来看看代码：

<!DOCTYPE html>
<head>
  <meta charset=utf-8 />
  <title>pet show</title>
  <style>
    * {
      margin : 0px;
      padding : 0px;
    }
    body {
      background-color : #B1ECFE;
    }
    .totalDiv {
      width : 1000px;
      margin : 10px auto;
    }
    .titleDiv {
      width : 100%;
      height : 100px;
      background-color : #AEFFCF;
      margin-top : 10px;
    }
    .imgDiv {
      float : left;
    }
    .twoTitle {
      float : left;
    }
    .bigTitle {
      font-size : 45px;
      color : #FF5400;
      font-weight : bold;
      margin-top : 8px;
      margin-left : 28px;
    }
    .subTitle {
      font-size : 20px;
      color : #FF0000;
      margin-top : 5px;
      margin-left : 35px;
    }
    .menu {
      float : left;
      margin-left : 120px;
      margin-top : 15px;
    }
    .menu li {
      float : left;
      margin-left : 50px;
      list-style-type : none;
    }
    .menu a {
      font-size : 60px;
      text-decoration : none;
      color : #FFC600;
    }
    .menu a:hover {
      color : #6CDBFF;
    }
    .blog {
      margin-top : 30px;
      background-color : #6DDAFF;
    }
    .blog li {
      list-style-type : none;
      background-color : #29CAFF;
      width : 950px;
      margin : 0px auto;
      padding : 15px;
      cursor : pointer;
    }
    .blogTitle {
      margin-top : 10px;
      color : #2B6BB2;
      font-size : 50px;
    }
  </style>
</head>
<body>
  <div class="totalDiv">
    <div class="titleDiv">
      <div class="imgDiv">
        <img src="../../images/logo.jpg" width="150px" height="100px" />
      </div>
      <div class="twoTitle">
        <div class="bigTitle">
          宠恋秀
        </div>
        <div class="subTitle">
          秀出你的宠物
        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="index.php">首页</a></li>
          <li><a href="pic.php">图片</a></li>
          <li><a href="blog.php">日记</a></li>
        </ul>
      </div>
    </div>
<?php 
  require_once dirname ( __FILE__ ) . '/../../common/SQLHelper.class.php';
  $sqlHelper = new SQLHelper();
  $sql = "select * from blog limit 0,2";
  $blogs = $sqlHelper->execute_dql_array($sql);
?>
    <div class="blog">
      <ul>
        <div style="height : 30px;"></div>
        <?php 
          foreach ($blogs as $blog) {
        ?>
        <li class="blogLi" id="<?php echo $blog['id'];?>">
          <div class="blogTitle"><?php echo $blog['title'];?></div>
          <div class="blogArticle">
          <?php echo $blog['short_content'];?></div>
        </li>
        <div style="height : 30px;"></div>
        <?php 
          }
        ?>
      </ul>
    </div>
    <script>
      var blogLis = document.querySelectorAll(".blogLi");
      for (index in blogLis) {
        blogLis[index].onclick = function() {
          var id = this.getAttribute("id");
          window.location.href = "blog_detail.php?blogId="+id;
        }
      }
    </script>
  </div>
</body>
check the result

知识点基本上和上面的一样，只是这里的跳转用的是window.location.href，直接设置它，浏览器就会跳转。

Blog_detail页面，就很简单了，只是根据参数得到id，将blog取出，然后展示就好了。源码如下：

<!DOCTYPE html>
<head>
  <meta charset=utf-8 />
  <title>pet show</title>
  <style>
    * {
      margin : 0px;
      padding : 0px;
    }
    body {
      background-color : #B1ECFE;
    }
    .totalDiv {
      width : 1000px;
      margin : 10px auto;
    }
    .titleDiv {
      width : 100%;
      height : 100px;
      background-color : #AEFFCF;
      margin-top : 10px;
    }
    .imgDiv {
      float : left;
    }
    .twoTitle {
      float : left;
    }
    .bigTitle {
      font-size : 45px;
      color : #FF5400;
      font-weight : bold;
      margin-top : 8px;
      margin-left : 28px;
    }
    .subTitle {
      font-size : 20px;
      color : #FF0000;
      margin-top : 5px;
      margin-left : 35px;
    }
    .menu {
      float : left;
      margin-left : 120px;
      margin-top : 15px;
    }
    .menu li {
      float : left;
      margin-left : 50px;
      list-style-type : none;
    }
    .menu a {
      font-size : 60px;
      text-decoration : none;
      color : #FFC600;
    }
    .menu a:hover {
      color : #6CDBFF;
    }
    .blog {
      background-color : #6DDBFF;
      margin-top : 30px;
    }
    .blogTitle {
      font-size : 50px;
      color : #2B6BB2;
      padding-top : 30px;
      text-align : center;
    }
    .blogArticle {
      margin-top : 30px;
    }
    .blogArticle p {
      text-indent : 35px;
      margin-top : 15px;
      margin-bottom : 15px;
    }
  </style>
</head>
<body>
  <div class="totalDiv">
    <div class="titleDiv">
      <div class="imgDiv">
        <img src="../../images/logo.jpg" width="150px" height="100px" />
      </div>
      <div class="twoTitle">
        <div class="bigTitle">
          宠恋秀
        </div>
        <div class="subTitle">
          秀出你的宠物
        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="index.php">首页</a></li>
          <li><a href="pic.php">图片</a></li>
          <li><a href="blog.php">日记</a></li>
        </ul>
      </div>
    </div>
<?php 
  require_once dirname ( __FILE__ ) . '/../../common/SQLHelper.class.php';
  $sqlHelper = new SQLHelper();

  if(!isset($_GET['blogId'])) {
    $title = "no such blog";
    $content = "<p>I am sorry, no such blog</p>";
  } else {
    $sql = "select * from blog where id=" . $_GET['blogId'];
    $res = $sqlHelper->execute_dql_array($sql);
    if(count($res) > 0) {
      $title = $res[0]['title'];
      $content = $res[0]['content'];
    } else {
      $title = "no such blog";
      $content = "<p>I am sorry, no such blog</p>";
    }
  }
  
?>
    <div class="blog">
      <div class="blogTitle"><?php echo $title;?></div>
      <div class="blogArticle">
        <?php echo $content;?>
      </div>
      <div style="height : 30px;"></div>
    </div>
  </div>
</body>
check the result

做完后台之后总结一下，其实后台基本逻辑就是从数据库将数据取出来，然后放到前端html中展示就好了，其实比较复杂的在于交互，也就是前端javascript的一些东西。这次还没用到ajax，下次的管理后台页面就要用到了。

本文的代码放在这里，欢迎大家下载！

如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点，不要超过100元哦！
评论请先登录

联系人：李先生     联系电话：13581641192     电子邮件：channingbreeze@163.com     QQ：396417401     微信号：xin874058

友情链接：欣欣网站制作

Copyright © 2015 calfnote.com All Rights Reserved | 京ICP备15008048号-1