PHP 编写留言板

学会使用 VScode 编写 php 代码实现留言板功能。

先讲一下思路：

1、写 html 代码，为后面做准备

2、需求一，进入页面后会自动刷新出数据库的数据，显示出来；因此得写一个方法，function getInfo(){ } 在函数里写 ajax 请求，调用该函数，成功接受数据后，输出到页面。从后台得到的数据是 json 数组，通过遍历将所有的数据信息显示出来。如图所示。

注：其中得到的 res 的类型是一个数组，将数据库中的数据放在了一个数组中，这样就可以实现多条数据的存储了，里面还输出了时间。用到了 php 中的 time() （时间戳）的方法。代码放在了最后！

3、需求二，点击提交按钮后可以将输入的用户名和内容，添加到数据库中，同时要在页面中实时更新。需要给 button 绑定点击事件 发送 ajax 请求传入用户输入的值（传参）接受数据成功后通过判断状态码的值，给予用户反馈，然后再刷新页面，将输入的值显示在留言板上。

注：提交过内容以后需要把原来的输入框全部清空，所以用到了 $('.content').html(''); $("#user").val(""); $("#content").val("")，同时需要刷新页面，将添加的数据显示出来，因此得重新获取数据调用一下函数 getInfo() 函数即可（真心方便！）。还有就是，得获取一下输入的内容，赋值给变量username content 你们可以随意定义。（记得将数据传入到后台）

4、编写 php 代码：①连接数据库 ②编写查询数据库的函数 ③编写添加留言的函数。

如下图所示：①连接数据库

这是 mysqli_connect() 方法连接数据库也可以使用 PDO 方法连接这里如下：

<?php
$dbtype = "mysql";
$host = "localhost";
$dbuser = "root";
$dbname = "classroom";
$dbpwd = "root";
$dsn = "$dbtype:host=$host;dbname=$dbname";        //固定搭配
$con = new PDO($dsn,$dbuser,$dbpwd);

if(!$con){
    die('连接失败！');
};
//操作数据库
$sql = "select * from `2204`";
var_dump($con->query($sql));
foreach($con->query($sql) as $k=>$value){
    var_dump($value);
}
?>

②编写查询数据库的函数

<?php
    function select(){
    global $con;
    $sql = "select * from `liuyan`";
    $res = mysqli_query($con,$sql);
    $arr = [];
    if($res){
        foreach($res as $v){
            $arr[] = $v;
        }
        return $arr;
    }
}
?>

注： foreach($res as $v){} 这个方法是遍历 $v 是每一个值也可以写成foreach($res as $k=> $v){} $k 是下标这是数据库的查询方法：$sql = "select * from `liuyan`";（sql语句）

③编写添加留言的函数

<?php
function add($username,$content){
    global $con;
    $time = time();
    $time = date('Y-m-d h:i:s',$time);
$sql="insert into `liuyan`(username,content,time) values('$username','$content','$time')";
    $res = mysqli_query($con,$sql);
    if($res){
        return ['code'=>200,'msg'=>'添加成功'];
    }
}
?>

$sql="insert into `liuyan`(username,content,time) values('$username','$content','$time')";是向数据库中插入一条数据的 $sql 语句 $time = time();是上文提到的时间戳 $time = date('Y-m-d h:i:s',$time);参数分别是年月日小时分钟秒。

最后需要添加一个判断，如果前台传入的参数正确的话就执行对应的函数，否就不执行，代码如下：

$q = $_POST['query'];
if($q =='select'){
    echo json_encode(select());
}elseif($q == 'add'){
    $username = $_POST['username'];
    $content = $_POST['content'];
    $as = add($username,$content);
    echo json_encode($as);
};

注：$q 是ajax传入的判断数据。这里返回的数据类型是 json 字符串；整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            text-align:center;
        }
        .content{
            width:500px;
            height:300px;
            border:1px solid ;
            border-radius:10px;
            text-align:left;
            margin:0 auto;
            padding-left:10px;
        }
        .content>span{
            margin-left:10px;
            margin-top:5px;
        }
        .user{
            font-weight:600;
        }
        input{
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="wrapper">
    <div class="content">
        <h2>留言展示：</h2>

    </div>

    <!-- <h2>留言板</h2> -->
    <input type="text" id="user" placeholder="用户名"  >
    <input type="text" id="content" placeholder="留言内容" >
    <button id="btn"> 提交</button>
    </div>
    <!-- 首先获取数据库的内容 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $("#btn").click(function(){
            var username = $("#user").val();
            var content = $("#content").val();
            // console.log("==");
            $.ajax({
                url:'./liuyanjieshou.php',
                data:{query:'add',username:username,content:content},
                dataType:'json',
                method:'post',
                success(res){
                    console.log(res);
                    if(res.code == 200){
                        alert("数据添加成功！");
                        $('.content').html('');
                        $("#user").val("");
                        $("#content").val("");
                        getInfo();

                    }
                }
            })
        });
    </script>
    <script>
        getInfo();
        function getInfo(){
            $.ajax({
                url:'./liuyanjieshou.php',
                data:{query:'select'},
                dataType:'json',
                method:'post',
                success(res){
                    // console.log(res);
                    if(res){
                        var str = "";
                        for(var i=0;i<res.length;i++){
                        str += `<span class="user">${res[i].username}</span>:<span>${res[i].content}</span>&emsp;
                        <span>${res[i].time}</span>
                        <br>`
                            
                        }
                        $(".content").append(str);
                    }
                }
                })
            }
            
            
        
    </script>
</body>
</html>

<?php
$host = "localhost";
$dbuser = "root";
$dbpwd = "root";
$dbname = "classroom";

$con = mysqli_connect($host,$dbuser,$dbpwd,$dbname);
$q = $_POST['query'];
if(!$con){
    echo "数据失败！";
};

if($q =='select'){
    echo json_encode(select());
}elseif($q == 'add'){
    $username = $_POST['username'];
    $content = $_POST['content'];
    $as = add($username,$content);
    echo json_encode($as);
};
// 查询所有的数据库信息，函数
function select(){
    global $con;
    $sql = "select * from `liuyan`";
    $res = mysqli_query($con,$sql);
    $arr = [];
    if($res){
        foreach($res as $v){
            $arr[] = $v;
        }
        return $arr;
    }
}
// 增加留言的函数
function add($username,$content){
    global $con;
    $time = time();
    $time = date('Y-m-d h:i:s',$time);
    $sql = "insert into `liuyan`(username,content,time) values('$username','$content','$time')";
    $res = mysqli_query($con,$sql);
    if($res){
        return ['code'=>200,'msg'=>'添加成功'];
    }
}
?>

注意：这是两个文件，第一个是html 发送请求的文件第二个是返回的数据的文件。

效果图如下：

学会使用 VScode 编写 php 代码 实现留言板功能。

猜你喜欢

学会使用 VScode 编写 php 代码实现留言板功能。