既然要好好测一测,那么就重新建一遍数据库先,看看一开始的网站是什么样的。
首页正常、图片页正常、日记页正常,管理页,完了!一开始没有pic_title,是不能够添加图片的,不然图片添加到哪个title下呢?还有,一开始没有pic_title,下拉框中只有一个添加的option,没法响应select的onchange。这可是个不得了的bug,赶紧偷偷地修了吧!
首先,在显示pic的div这里,加上判断,如果picTitles不为空才显示。由于这里的div可能不显示,所以涉及到div里面元素的操作都需要加上判断。
然后是select的绑定函数问题,可以改成onclick,这样就能响应了,但是这样会响应两次,虽然功能正常,但是对于处女座的同学来说,还是不完美的,而且在选择了添加之后,再点击,还是会添加,也是有bug的。其实这是一个设计问题,添加Title应该单独作为一个按钮,而不应该作为select中的一项,但是如果真的碰到这样的变态需求,我们可以判断一下select中的option数量,再做决定,这样就比较完美地解决问题了。
这时候,添加title没问题了,但是再添加一个title,却发现,下面的图片div中的title没有跟着变,这里也要改一下。我们在getPics中将title也返回来,在ajax中修改了title。同样,我们在添加title成功之后,不再刷新页面,而是局部更新,更改addTitle.php,成功的时候返回刚刚插入的title的id,这里用到了SQLHelper中的getLastInsertedId,它就是用来返回最近插入记录的id。
还有一个小问题,我们在登陆之后,你看看地址栏,多了一个#号,这是因为我们form表单中的action填了#,把它去掉,这个bug也修掉了。
我们来提交日记看看,输入一个中文日记,唉,日记摘要的…怎么没出来,我们在php中打印sql语句,然后在ajax中用console.log将返回数据xhr.responseText打印出来,在chrome的控制台可以看到,里面有一个奇怪的字符,这是中文造成的,解决办法是用mb_substr代替substr。
插了5条日记了,怎么才两篇,在blog.php里sql写错了,改一下。
在第一个title里面插入4个图片,再插入两个title,页面就乱掉了,我们需要将九宫格定宽高,改下style。
我们发现blog_detail.php页面的文字间距有点挤,来改一下它的style。
还有日记页和首页的短标题似乎也不是很漂亮,也来改一改。
然后我们发现在blog.php中,如果摘要是一长串英文就没有换行,这是因为系统会把一长串英文当成一个单词,我们在style中加上word-wrap: break-word;就可以解决。
清空数据库再来测一遍,发现第一次添加title时没有刷新页面,这里我们改为reload()。这样一来又发现一个问题,增加title时,select中的option并没有更新,这里我们也可以写个ajax更新一下。我们增加一个接口getTitles.php,返回titles,在ajax中更新option,对我们来说不是难事。
输密码的时候输了一个错误的,竟然也登陆进去了,原来是密码判断的地方写错了,赶紧改一下。
更改过的页面分别为:
admin.php:
<!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; } .bodyDiv { width : 100%; background-color : #6DDBFF; padding-top : 10px; padding-bottom : 10px; } .loginLine { text-align : center; font-size : 30px; margin-top : 30px; } .loginLine input { height : 30px; vertical-align: top; } .loginLine input[type="submit"] { font-size : 30px; height : 50px; width : 100px; } .picDiv, .blogDiv { width : 950px; background-color : #29CAFF; margin : 30px auto; padding : 15px; } .selectDiv { width : 950px; background-color : #29CAFF; margin : 10px auto; padding : 15px; } .blogDiv { text-align : center; } .picTitle { color : #2B6BB2; font-size : 40px; } .picUl li { list-style-type : none; float : left; margin : 15px; } .bodyDiv select { width : 200px; height : 30px; } .blogDiv input[type="text"] { width : 100%; height : 30px; font-size : 20px; } .blogDiv textarea { margin-top : 10px; width : 100%; font-size : 20px; } .blogDiv button { background-color : #4C42C7; color : white; width : 150px; height : 50px; font-size : 30px; margin-top : 10px; } #addPic { cursor : pointer; } #uploadPic { display : none; } </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> <div class="bodyDiv"> <?php $login = false; session_start(); if(!isset($_SESSION['petuser'])) { if(isset($_POST['username']) && isset($_POST['password'])) { if($_POST['username'] == "admin" && $_POST['password'] == "admin") { $_SESSION['petuser'] = "admin"; $login = true; } } } else { $login = true; } ?> <?php if(!$login) { ?> <div class="selectDiv"> <div class="loginLine">请登陆</div> <form action="" method="post"> <div class="loginLine">用户名:<input type="text" name="username" /></div> <div class="loginLine">密 码:<input type="password" name="password" /></div> <div class="loginLine"><input type="submit" value="登陆" /></div> </form> </div> <?php } else { ?> <script> var curTitleId = -1; </script> <div class="selectDiv"> <select id="selectPicTitle"> <?php require_once dirname ( __FILE__ ) . '/../../common/SQLHelper.class.php'; $sqlHelper = new SQLHelper(); $sql = "select * from pic_title"; $picTitles = $sqlHelper->execute_dql_array($sql); foreach ($picTitles as $picTitle) { ?> <option value="<?php echo $picTitle['id'];?>"><?php echo $picTitle['title'];?> </option> <?php } ?> <option value="-1">添加</option> </select> <script> curTitleId = <?php if (count($picTitles) > 0) { echo $picTitles[0]['id']; } else { echo "-1"; } ?>; </script> </div> <?php if(count($picTitles) > 0) { ?> <div class="picDiv"> <div class="picTitle" id="picTitle"><?php echo $picTitles[0]['title'];?></div> <ul class="picUl"> <div id="pics"> </div> <li id="addPic"><img src="../../images/add.jpg" /></li> <input id="uploadPic" name="pic" type="file" /> </ul> <div style="clear : both;"></div> </div> <?php } ?> <div class="blogDiv"> <form id="blogForm" action="#" method="post"> <input id="blogTitle" type="text" name="title" placeholder="标题"/> <textarea id="blogArticle" name="article" placeholder="正文" cols="100" rows="30"></textarea> <button id="submitBlog">提交</button> </form> </div> <?php } ?> <script> // 更新图片 var selectPic = function(titleId) { var xhr = new XMLHttpRequest(); xhr.open("POST", "getPics.php", true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { if(xhr.responseText != "false") { var picJson = JSON.parse(xhr.responseText); var lis = ""; for (var i in picJson.pic) { lis += '<li><img src="' + picJson.pic[i].path + '" /></li>'; } document.getElementById('pics').innerHTML = lis; document.getElementById('picTitle').innerHTML = picJson.title; } } } }; xhr.send("titleId=" + titleId); }; //刷新option var refreshTitle = function() { var xhr = new XMLHttpRequest(); xhr.open("POST", "getTitles.php", true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { if(xhr.responseText) { var titlesJson = JSON.parse(xhr.responseText); var options = ""; for (var i in titlesJson) { if(i == titlesJson.length -1) { options += '<option value="' + titlesJson[i].id + '" selected>' + titlesJson[i].title + '</option>'; } else { options += '<option value="' + titlesJson[i].id + '">' + titlesJson[i].title + '</option>'; } } options += '<option value="-1">添加</option>'; document.getElementById('selectPicTitle').innerHTML = options; } } } }; xhr.send(null); }; var addNewTitle = function(reload) { var res = window.prompt('请输入新Title:'); if(res) { // ajax 添加新Title var xhr = new XMLHttpRequest(); xhr.open("POST", "addTitle.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { if(xhr.responseText != "false") { curTitleId = xhr.responseText; if(reload) { window.location.reload(); } else { selectPic(curTitleId); refreshTitle(); } } else { window.alert('添加新Title失败'); } } } }; xhr.send("newTitle=" + res); } } // select逻辑 var selectPicTitle = document.getElementById("selectPicTitle"); if(curTitleId != -1) { selectPic(curTitleId); } selectPicTitle.onchange = function() { if(selectPicTitle.value == -1) { addNewTitle(); } else { curTitleId = selectPicTitle.value; selectPic(curTitleId); } }; selectPicTitle.onclick = function() { if(selectPicTitle.length == 1) { addNewTitle(true); } } // 添加图片逻辑 if(document.getElementById("addPic")) { document.getElementById("addPic").onclick = function() { document.getElementById("uploadPic").click(); } } // 上传逻辑 if(document.getElementById('uploadPic')) { document.getElementById('uploadPic').onchange = function() { var fd = new FormData(); fd.append(this.name, this.files[0]); var xhr = new XMLHttpRequest(); xhr.open('POST', 'uploadPic.php?titleId=' + curTitleId, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { if(xhr.responseText == "success") { selectPic(curTitleId); } else { window.alert(xhr.responseText); } } } }; xhr.send(fd); } } // 提交日记 document.getElementById('submitBlog').onclick = function(e) { e.preventDefault(); var xhr = new XMLHttpRequest(); xhr.open("POST", "uploadBlog.php", true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { console.log(xhr.responseText); if(xhr.responseText == "true") { window.alert("添加成功"); } else { window.alert("操作失败"); } } } }; xhr.send("title=" + document.getElementById("blogTitle").value + "&article=" + document.getElementById("blogArticle").value); } </script> </div> </div> </body>check the result
addTitle.php:
<?php require_once dirname ( __FILE__ ) . '/../../common/SQLHelper.class.php'; if(isset($_POST['newTitle'])) { $sqlHelper = new SQLHelper(); $sql = "insert into pic_title (title) values ('" . $_POST['newTitle'] . "')"; $res = $sqlHelper->execute_dqm($sql); if($res == 1) { echo $sqlHelper->getLastInsertedId(); } else { echo "false"; } } else { echo "false"; } ?>
getPics.php:
<?php require_once dirname ( __FILE__ ) . '/../../common/SQLHelper.class.php'; if(isset($_POST['titleId'])) { $sqlHelper = new SQLHelper(); $sql = "select * from picture where title_id=" . $_POST['titleId']; $res = $sqlHelper->execute_dql_array($sql); $arr = array(); $arr['pic'] = $res; $sql = "select * from pic_title where id=" . $_POST['titleId']; $title = $sqlHelper->execute_dql_array($sql); $arr['title'] = $title[0]['title']; echo json_encode($arr); } else { echo "false"; } ?>
uploadBlog.php:
<?php require_once dirname ( __FILE__ ) . '/../../common/SQLHelper.class.php'; if(isset($_POST['title']) && isset($_POST['article'])) { $title = $_POST['title']; $article = "<p>"; $article = $article . str_replace("\n", "</p><p>", $_POST['article']); $article = $article . "</p>"; $short = mb_substr($_POST['article'], 0, 100, 'UTF-8'); $short = str_replace("\n", " ", $short); $short = $short . "..."; $sqlHelper = new SQLHelper(); $sql = "insert into blog (title, short_content, content) values ('" . $title . "', '" . $short . "', '" . $article . "')"; if(1 == $sqlHelper->execute_dqm($sql)) { echo "true"; } else { echo "false"; } } else { echo "false"; } ?>
blog.php:
<!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; } .blogArticle { font-size : 20px; text-indent : 40px; margin-top : 20px; word-wrap: break-word; } </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"; $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
index.php:
<!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; height : 400px; 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; } .blogArticle { font-size : 20px; text-indent : 40px; margin-top : 20px; } </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
blog_detail.php:
<!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 : 40px; margin-top : 15px; margin-bottom : 15px; line-height : 30px; font-size : 20px; margin-left : 40px; margin-right : 40px; word-wrap: break-word; } </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
getTitles.php:
<?php require_once dirname ( __FILE__ ) . '/../../common/SQLHelper.class.php'; $sqlHelper = new SQLHelper(); $sql = "select * from pic_title"; $res = $sqlHelper->execute_dql_array($sql); echo json_encode($res); ?>
没想到一个小小的项目,尽然有这么多bug,难怪欣欣这么重视测试了。当然,如果你有更加严格的要求,可以自行测试修改,测试是无止尽的!
本文的代码放在这里,欢迎大家下载!