自己写的一个留言板小demo，看完非常有用哦

最新推荐文章于 2024-06-15 17:55:19 发布

前端小骚哥

最新推荐文章于 2024-06-15 17:55:19 发布

阅读量465

点赞数 1

分类专栏：前端，文章标签： 3 vue

本文链接：https://blog.csdn.net/liuxy450/article/details/121651409

版权

前端，专栏收录该内容

5 篇文章 0 订阅

订阅专栏

此demo主要利用ajax与php文件上传处理留言板功能。后台代码我就不写了，只写前端。

1. 展示效果

说明：主要包括三个功能，分别是注册，登录，留言板功能

二注册功能实现

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录</title>
        <link rel="stylesheet" type="text/css" href="../libs/bootstrap.css" />
        <style type="text/css">
            body{
                margin:0px;
                padding:0px;
                background:#ccc;
            }
            .panel{
            width:380px;
                height:280px;
            position:absolute;
            left:50%;
            margin-left:-190px;
            top:50%;
            margin-top:-140px;
                        }
            .form-horizontal{
                padding:10px 20px;
            }
            .btns{
            display:flex;
            justify-content:center;
            }
        </style>
    </head>
    <body>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">用户登录</div>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" name="userName" />
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" name="pwd" />
                    </div>
                    <div class="form-group btns">
                        <input type="button" class="btn btn-primary" value="登录系统" id="submit" />
                        &nbsp;&nbsp;
                        <a type="button" class="btn btn-success" href="reg.php">注册账号</a>
                    </div>
                </form>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(function(){
            $("#submit").on("click",function(){
                var str = $("form").serialize();
                console.log(str);
                $.post("doLogin.php",{"formData":str},function(data){
                    if(data == "true"){
                        alert('注册成功！即将跳转登陆页！')
                        location = "login.php"
                    }else{
                        alert('注册失败！')
                    }
                })
            })
        })


        
    </script>
</html>

三留言功能实现

前端代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #note{
                width: 400px;
                height:100px;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <textarea name="note" id="note"></textarea>
        <br />
        <input type="button" id="submit" value="留言" />
        
        <h1>留言内容</h1>
        <hr>
        <div id="liuyanban">
            
        </div>
    </body>
    
    <script src="../libs/jquery-3.1.1.js"></script>
    <script>
        $(function(){
            getData();
            
            var userName = '<?php echo isset($_GET["name"])?$_GET["name"]:"null"; ?>';
            if(userName=="null"){
                location = "login.php";
            }
            
            $("#div1").html("欢迎您，<span style='color:red;'>"+userName+"</span>");
            
            $("#submit").on("click",function(){
                var noteVal = $("#note").val();
                if(noteVal==""){
                    alert("留言内容不能为空，请核对！");
                    return;
                }
                var time = getTime();
                var note = {
                    "userName":userName,
                    "time":time,
                    "noteVal":noteVal
                }
                
                $.post("doAdd.php",note,function(data){
                    if(data=="true"){
                        alert("留言内容提交成功！");
                        location.reload(true);
                    }else{
                        alert("留言失败！原因不明！");
                    }
                });
                    
            });
        });
        
        function getData(){
            $.post("doShowNote.php",function(data){
                var arr = data.split("[;]");
                arr.pop();
                console.log(arr);
                for (var i=0;i< arr.length;i++) {
                    var thisNote = $.parseJSON(arr[i]);
                    var div = "<br/><div id='div"+i+"'>用户名："+thisNote.userName+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布时间："+thisNote.time+"<br/><br/> 留言内容："+thisNote.noteVal+"</div><br/><hr>"
                    $("#liuyanban").prepend(div);
                }
            })
        }
        
        function getTime(){
            var today  = new Date();
            var year = today.getFullYear();
            var month = today.getMonth();
            var date1  = today.getDate();
            var hours = today.getHours();
            var minutes = today.getMinutes()<10?"0"+today.getMinutes():today.getMinutes();
            var seconds = today.getSeconds()<10?"0"+today.getSeconds():today.getSeconds();
            var dateTime = year+"年"+(month+1)+"月"+date1+"日"+hours+":"+minutes+":"+seconds;    
            return dateTime;
        }
    </script>
</html>