留言板:简单的留言功能实现

记录学习的第一阶段

自从我开始学习Web一个月以来,照着视频课程写过不少的练习,所以当我粗略的学习了Web三件套和php+Mysql后。我决定要用自己的想法来实现留言板这个练习,来巩固自己的学习。毕竟纸上得来终觉浅,绝知此事要躬行,实践才是最好的老师。(网上留言板编写教程很多,建议还是先靠自己的想法来实现)虽然这个案例实现的功能不多,但是编写的过程还是遇到了挺多的问题,特别是接口的编写。(第一次写接口的时候真的是特别懵)。在这里也很感谢我同学对我的指引,让我在学习的路少走了很多弯路,感谢感谢感谢~。本来想把功能完善的更好一点(因为急着进入下一阶段的学习,所以实现了简单的留言功能之后就停下来了,以后一定回头把它完善好)

  • 功能实现
    1. 提交留言,通过php把留言写入Mysql数据库,再通过AJAX从数据库查询最后一条留言显示出来实现局部刷新。
    1. 页面初始化,通过php查询Mysql数据库里的留言,全部显示出来。
    1. 心动画的实现(心会跳动)

效果图:
留言板
html代码:

<!DOCTYPE html>
<html lang="en">
    <style>
        div#dem p{
         
         margin-top: 10px;
         margin-bottom: 10px;
         font-size: 24px;
         }
         
        
    </style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="lyb.css?v=12">
    <script>//按钮按下执行的脚本
        function newmessage(){
        var x =document.getElementById("srname").value;
        var y =document.getElementById("srmessage").value;
        if(x==""){
           alert("必须填写姓名!");
           return false;
        }
        else if (y == "") {
           alert("必须填写留言!");
           return false;
         }
         else{
            document.getElementById("srname").value="";//提交以后清空内容
            document.getElementById("srmessage").value="";//提交以后清空内容
           var xhttp = new XMLHttpRequest();
           xhttp.onreadystatechange=function(){
                if(this.readyState==4&&this.status==200){     //先向数据库添加数据,当服务器响应则查询最后一个留言
                    var xhttp = new XMLHttpRequest();{
                    xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) { //向服务器响应则查询最后一个留言
                    var box=document.getElementById("dem");
                    var str=this.responseText;
                    var strArray=str.split("}{");//以}{分割字段
                    for(var i=0;i<strArray.length;i++){
                        if(i=strArray.length-1){
                        strArray[i]=strArray[i].replace("{","");//去掉字符串里的某个字符
                        strArray[i]=strArray[i].replace("}","");
                        var str=strArray[i];
                        var obj=document.createElement("p");
                        obj.innerText=str;
                        document.getElementById("dem").appendChild(obj);
                                            }
                                    }
                                }               
                            }
                    };
                        xhttp.open("post", "/chaxun.php", true);//向数据库添加数据请求
                        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//加了这个就可以以表单方式提交,以头文件形式?
                        xhttp.send(); 
                }
       }
                        xhttp.open("POST", "/xxx.php", true);
                        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//加了这个就可以以表单方式提交,以头文件形式?
                        xhttp.send(JSON.stringify({
                        "name" :x,
                        "message" :y
                         }));
                         $("#name").val(""); 
       
        }
    }
   </script>
   <script>         //界面初始化执行脚本,查询留言并显示出来。
       window.onload=function(){
       var xhttp = new XMLHttpRequest();{
       xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var box=document.getElementById("dem");
            var str=this.responseText;
            var strArray=str.split("}{");//以}{分割字段
                for(var i=0;i<strArray.length;i++){
                        strArray[i]=strArray[i].replace("{","");//去掉字符串里的某个字符
                        strArray[i]=strArray[i].replace("}","");
                        var str=strArray[i];
                        var obj=document.createElement("p");
                        obj.innerText=str;
                        document.getElementById("dem").appendChild(obj);
                    
            }
          }               
       }
    };
        xhttp.open("post", "/chaxun.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//加了这个就可以以表单方式提交,以头文件形式?
        xhttp.send(); 
    
} 
    
   </script>
</head>
<body>
    <div id="body">
    <header>
        
       
        <p class="headerP">十三毕业留言</p>
        <button class="dl">管理员登录</button>
        
    </header>
        <input id="srname" class="inputname" type="text" name="name" placeholder="请输入你的姓名(必填)">
        <textarea id="srmessage" class="inputtextarea" name="newmessage" placeholder="请输入你想写的留言(必填)"></textarea>
        <button  class="buttontj" onclick="newmessage()">提交留言</button>
         <span class="heart"><!--用来设置心形动画的实现-->
            <span class="heart-left"></span><span class="heart-right"></span>
        </span>
        <div id="dem"></div>
   </div>
   
    
</body>
</html>

css样式:

*{ margin: 0;padding: 0;}
p.headerP{
    line-height: 50px;
    display: inline-block;
    color: white;
    margin-left:10px;
    font-size: 18px;
}
div#body{
    margin-left: 20%;
    margin-right: 20%;
}
body{
    background:url(picture/320539.jpg);
    background-size: 1920px 1080px;
    background-repeat:repeat-y;
    position: relative;
    
}
header{
    height: 50px;
    background-color: #32393F;
    margin-bottom: 10px;
     display: flex;
     justify-content: space-between;
     border-radius: 6px;
     margin-top: 16px;
     
}
button.dl{
      width:100px ;
      text-align: center;
      background-color:#4facfe;
      font-size: 16px;
      color: white;
      border-radius: 13px;    
      height: 40px;
      margin-top: 5px;
      margin-right: 5px;
      border: white;
}
input.inputname{
    height: 30px;
    width:99.8%;
    font-size: 18px;
    border-radius: 10px;
    outline: none;
    border: white;
    
}
textarea.inputtextarea{
    width: 100%;
    height: 120px;
    font-size: 22px;
    margin-top: 10px;
    border-radius: 13px;
    outline: none;
    border: white;
}
button.buttontj{
    width: 100%;
    height: 40px;
    border: white;
    background-color: #027BFE;
    border-radius: 18px;
    color: white;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 12px;
}


span{
    display: inline-block;
    
}
.heart-left,.heart-right{    /*画出基本样式*/
    width: 25px;height: 40px;
    background-color: red;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
 }
 .heart-left{  /*通过旋转变为心形*/
     transform: rotateZ(-45deg);
 }
 .heart-right{  /*通过旋转变为心形*/
     transform: translateX(-14px) rotateZ(45deg);
 }
 @keyframes xin{
     30%{transform: scale(1.3);}
     100%{transform: scale(1);}
 }
 .heart{
     animation: xin 1.5s infinite;
     margin-left: 10px;
 }

php程序:

<html>
<body>
<?php 
$a=file_get_contents ( 'php://input' );
$link=mysqli_connect("localhost","root","123456");
$db_selectd=mysqli_select_db($link,"lzm");
$query="insert into t1(info) values('$a')";
mysqli_query($link,$query);
?>
</body>
</html>
<?php 
$link=mysqli_connect("localhost","root","123456");
$db_selectd=mysqli_select_db($link,"lzm");
$query="select*from t1 order by into desc limit 1";
var_dump(mysqli_query($link,$query));

?>

代码全部在这里了,喜欢的点赞关注码走吧。(其中或多或少可能会有一点bug,新人勿喷)

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

篮不住的十三。

你的鼓励是我最大的动力啊~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值