既然要好好测一测,那么就重新建一遍数据库先,看看一开始的网站是什么样的。
首页正常、图片页正常、日记页正常,管理页,完了!一开始没有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,难怪欣欣这么重视测试了。当然,如果你有更加严格的要求,可以自行测试修改,测试是无止尽的!
本文的代码放在这里,欢迎大家下载!
,不要超过100元哦!