玩命牛的成长记录（十八）——服务端后台实现
来源：互联网 发布：淘宝的hottoys有假货吗 编辑：程序博客网 时间：2024/06/05 02:14
欣欣（1989—）
自动化专业研究生，转行当程序员，在一家国内领先的IT公司工作，业余时间兼职创业，创办网站欣欣网站制作。
玩命牛（1989—）
欣欣的本科同学，学习非常玩命，本科毕业后去了一家小公司，干得并不称心，正准备转行IT，听说本科同学欣欣正在兼职互联网创业，特邀他一起合租，同时加入了兼职创业的队伍。
服务端后台实现
其实后台也不是很难，就是从服务器中取出数据，然后放到前端展示就好啦。
首先我们需要一个操作数据库的类，想起了我之前封装的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，下次的管理后台页面就要用到了。
本文的代码放在这里，欢迎大家下载！
0 0
- 玩命牛的成长记录（十八）——服务端后台实现
- 玩命牛的成长记录（十九）——后台管理系统实现
- 玩命牛的成长记录（十八）——搭台
- 玩命牛的成长记录（一）——初见
- 玩命牛的成长记录（二）——布局
- 玩命牛的成长记录（三）——盒子
- 玩命牛的成长记录（四）——内容
- 玩命牛的成长记录（五）——表单
- 玩命牛的成长记录（六）——定位
- 玩命牛的成长记录（七）——切换
- 玩命牛的成长记录（八）——游戏
- 玩命牛的成长记录（九）——服务
- 玩命牛的成长记录（十）——数据
- 玩命牛的成长记录（十一）——请求
- 玩命牛的成长记录（十二）——会话
- 玩命牛的成长记录（十三）——异步
- 玩命牛的成长记录（十四）——接活
- 玩命牛的成长记录（十五）——需求
- C#调用C++类（以COM组件的形式）
- C语言中的日期函数
- jQuery mobile Data 属性
- Bootstrap3学习（二、排版）class="text-left"
- 理解Java对象序列化
- 玩命牛的成长记录（十八）——服务端后台实现
- 多边形三角化问题见闻
- 网站安全之Java加密体系（MD5算法）
- Android基础介绍
- 关于DoG角点检测matlab实现
- 史上最详细的八个皇后算法解析【php版本】
- list的遍历与删除
- struts2 标签的使用之一 s:if
- 函数调用过程探究
