电商商城定制开发PHP 编写留言板

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

先讲一下思路：

1、写 html 代码，电商商城定制开发为后面做准备          

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

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

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

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

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

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

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

  1. <?php
  2. $dbtype = "mysql";
  3. $host = "localhost";
  4. $dbuser = "root";
  5. $dbname = "classroom";
  6. $dbpwd = "root";
  7. $dsn = "$dbtype:host=$host;dbname=$dbname";        //固定搭配
  8. $con = new PDO($dsn,$dbuser,$dbpwd);
  9.  
  10. if(!$con){
  11.     die('连接失败！');
  12. };
  13. //操作数据库
  14. $sql = "select * from `2204`";
  15. var_dump($con->query($sql));
  16. foreach($con->query($sql) as $k=>$value){
  17.     var_dump($value);
  18. }
  19. ?>

 ②编写查询数据库的函数

  1. <?php
  2.     function select(){
  3.     global $con;
  4.     $sql = "select * from `liuyan`";
  5.     $res = mysqli_query($con,$sql);
  6.     $arr = [];
  7.     if($res){
  8.         foreach($res as $v){
  9.             $arr[] = $v;
  10.         }
  11.         return $arr;
  12.     }
  13. }
  14. ?>

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

③编写添加留言的函数

  1. <?php
  2. function add($username,$content){
  3.     global $con;
  4.     $time = time();
  5.     $time = date('Y-m-d h:i:s',$time);
  6. $sql="insert into `liuyan`(username,content,time) values('$username','$content','$time')";
  7.     $res = mysqli_query($con,$sql);
  8.     if($res){
  9.         return ['code'=>200,'msg'=>'添加成功'];
  10.     }
  11. }
  12. ?>

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

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

  1. $q = $_POST['query'];
  2. if($q =='select'){
  3.     echo json_encode(select());
  4. }elseif($q == 'add'){
  5.     $username = $_POST['username'];
  6.     $content = $_POST['content'];
  7.     $as = add($username,$content);
  8.     echo json_encode($as);
  9. };

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .wrapper{
  10.             text-align:center;
  11.         }
  12.         .content{
  13.             width:500px;
  14.             height:300px;
  15.             border:1px solid ;
  16.             border-radius:10px;
  17.             text-align:left;
  18.             margin:0 auto;
  19.             padding-left:10px;
  20.         }
  21.         .content>span{
  22.             margin-left:10px;
  23.             margin-top:5px;
  24.         }
  25.         .user{
  26.             font-weight:600;
  27.         }
  28.         input{
  29.             margin-top: 10px;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.  
  35.     <div class="wrapper">
  36.     <div class="content">
  37.         <h2>留言展示：</h2>
  39.     </div>
  41.     <!-- <h2>留言板</h2> -->
  42.     <input type="text" id="user" placeholder="用户名"  >
  43.     <input type="text" id="content" placeholder="留言内容" >
  44.     <button id="btn"> 提交</button>
  45.     </div>
  46.     <!-- 首先获取数据库的内容 -->
  47.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  48.     <script>
  49.         $("#btn").click(function(){
  50.             var username = $("#user").val();
  51.             var content = $("#content").val();
  52.             // console.log("==");
  53.             $.ajax({
  54.                 url:'./liuyanjieshou.php',
  55.                 data:{query:'add',username:username,content:content},
  56.                 dataType:'json',
  57.                 method:'post',
  58.                 success(res){
  59.                     console.log(res);
  60.                     if(res.code == 200){
  61.                         alert("数据添加成功！");
  62.                         $('.content').html('');
  63.                         $("#user").val("");
  64.                         $("#content").val("");
  65.                         getInfo();
  66.  
  67.                     }
  68.                 }
  69.             })
  70.         });
  71.     </script>
  72.     <script>
  73.         getInfo();
  74.         function getInfo(){
  75.             $.ajax({
  76.                 url:'./liuyanjieshou.php',
  77.                 data:{query:'select'},
  78.                 dataType:'json',
  79.                 method:'post',
  80.                 success(res){
  81.                     // console.log(res);
  82.                     if(res){
  83.                         var str = "";
  84.                         for(var i=0;i<res.length;i++){
  85.                         str += `<span class="user">${res[i].username}</span>:<span>${res[i].content}</span>&emsp;
  86.                         <span>${res[i].time}</span>
  87.                         <br>`
  88.                             
  89.                         }
  90.                         $(".content").append(str);
  91.                     }
  92.                 }
  93.                 })
  94.             }
  95.             
  96.             
  97.         
  98.     </script>
  99. </body>
  100. </html>
  1. <?php
  2. $host = "localhost";
  3. $dbuser = "root";
  4. $dbpwd = "root";
  5. $dbname = "classroom";
  6.  
  7. $con = mysqli_connect($host,$dbuser,$dbpwd,$dbname);
  8. $q = $_POST['query'];
  9. if(!$con){
  10.     echo "数据失败！";
  11. };
  12.  
  13. if($q =='select'){
  14.     echo json_encode(select());
  15. }elseif($q == 'add'){
  16.     $username = $_POST['username'];
  17.     $content = $_POST['content'];
  18.     $as = add($username,$content);
  19.     echo json_encode($as);
  20. };
  21. // 查询所有的数据库信息，函数
  22. function select(){
  23.     global $con;
  24.     $sql = "select * from `liuyan`";
  25.     $res = mysqli_query($con,$sql);
  26.     $arr = [];
  27.     if($res){
  28.         foreach($res as $v){
  29.             $arr[] = $v;
  30.         }
  31.         return $arr;
  32.     }
  33. }
  34. // 增加留言的函数
  35. function add($username,$content){
  36.     global $con;
  37.     $time = time();
  38.     $time = date('Y-m-d h:i:s',$time);
  39.     $sql = "insert into `liuyan`(username,content,time) values('$username','$content','$time')";
  40.     $res = mysqli_query($con,$sql);
  41.     if($res){
  42.         return ['code'=>200,'msg'=>'添加成功'];
  43.     }
  44. }
  45. ?>

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

效果图如下：

 

 

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发