留言板在我们个人博客比较常见的一个版块。那么我们今天就来做一下这版块的功能和设计。
我们使用jquery+bootstrap做前台界面搭建和业务逻辑编写。
liuyan.php
<?php
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery-1.11.0.js"></script>
<style>
textarea{
resize: none;
width: 500px;
height: 120px;
}
.main{
padding: 10px 15px;
}
.main .article{
width: 500px;
border: 1px solid #ddd;
word-break: break-all;
padding: 10px;
border-radius: 4px;
margin-bottom: 20px;
}
.main .article .article_footer{
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control say" placeholder="请说点什么吧..." id="con"></textarea>
</div>
<div class="form-group">
<button class="btn btn-danger" type="button" id="send">发送</button>
</div>
</form>
<hr />
<div class="main">
</div>
</div>
<script>
$(function(){
$.ajax({
type:"get",
url:"model/getMore.php",
success:function(res){
var data = JSON.parse(res)
var str = ""
var time = getTime()
console.log(data)
for (var i=0;i<data.length;i++) {
str+='<div class="article"><p>'+data[i].sign_con+'</p><div class="article_footer"><span class="time">'+time+'</span></div></div>'
}
$(".main").append(str)
}
})
$("#send").click(function(){
var con = $("#con").val()
if(con.length==0){
alert("请输入点东西吧~")
}else{
$.ajax({
type:"post",
url:"model/add.php",
data:{
con:con
},
async:true,
success:function(res){
var data = JSON.parse(res)
if(data.code==1){
var time = getTime()
var str = '<div class="article"><p>'+con+'</p><div class="article_footer"><span class="time">'+time+'</span></div></div>'
$(".main").append(str)
$("#con").val("")
}
}
})
}
})
function getTime(){
var str = ""
var now = new Date()
var year = now.getFullYear()
var month = now.getMonth()
var oDate = now.getDate()
var oHour = now.getHours()
var oMin = now.getMinutes()
var oSec = now.getSeconds()
str = year+"-"+zero(month)+"-"+zero(oDate)+":"+zero(oHour)+":"+zero(oMin)+":"+zero(oSec)
return str
}
function zero(str){
return str>9?str:"0"+str
}
})
</script>
</body>
</html>
添加功能 add.php
<?php
$conn = mysqli_connect("localhost","root","","shop");
if(!$conn){
echo "数据库连接失败";
}
mysqli_query($conn,"set names utf8");
$con = $_POST["con"];
$time = date("Y-m-d h:i:s",time());
$sql = "insert into sign (sign_con, sign_time) values ('$con','$time')";
$res = mysqli_query($conn,$sql) or die("失败了");
if($res){
$data = array("code"=>1,"message"=>"数据插入成功");
echo json_encode($data);
exit;
}else{
$data = array("code"=>2,"message"=>"数据插入失败");
echo json_encode($data);
exit;
}
?>
获取数据,getMore.php
<?php
$conn = mysqli_connect("localhost","root","","shop");
if(!$conn){
echo "数据库连接失败";
}
mysqli_query($conn,"set names utf8");
$con = $_POST["con"];
$time = date("Y-m-d h:i:s",time());
$sql = "insert into sign (sign_con, sign_time) values ('$con','$time')";
$res = mysqli_query($conn,$sql) or die("失败了");
if($res){
$data = array("code"=>1,"message"=>"数据插入成功");
echo json_encode($data);
exit;
}else{
$data = array("code"=>2,"message"=>"数据插入失败");
echo json_encode($data);
exit;
}
?>