留言板系统架构留言板功能的实现

转载

数据探索家 2023-11-15 21:39:38

文章标签 留言板系统架构 css3 html5 javascript php 文章分类 架构后端开发

记录学习的第一阶段

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

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

效果图：

留言板系统架构留言板功能的实现_javascript

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，新人勿喷）

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。