PHP实现小程序留言板功能(完结)添加了评论功能

PHP实现小程序留言板功能(完结)

接着上面的文章添加了评论功能,先看看效果图把，如下图所示

我这里没有做删除评论了，因为跟上篇文章的一样，就没有去做了，好了接下来就是评论功能代码

logs.wxml

<form bindsubmit="liuyanban">
  <view style="float:left;margin-left:15rpx">留言内容:</view>
  <input type="text" name="content" style="border:1px solid #ccc"></input>
  <button form-type="submit">提交留言</button>
</form>
<view wx:for="{{liuyantext}}" wx:key="{{liuyantext}}">
  <view style="margin-top:30rpx;">用户名:{{item.uname}}</view>
  <view style="">内容:{{item.content}}</view>
  <view wx:if="{{uids == item.uid}}" >
  <navigator style="float:left;margin-right:30rpx;color:#0000FF" url="/pages/update/update?id={{item.id}}">修改</navigator>
  <view bindtap="deletei" style="margin-button:30rpx;color:#0000FF" data-src="{{item.id}}">删除</view>
  </view>
  <view bindtap="huifu" data-huifu="{{item.id}}" data-index="{{index}}" style="color:#0000FF">评论</view>
  <form bindsubmit="huifus" wx:if="{{item.id == arr}}">
    <input name="text" style="border:1px solid #ccc;" type="text"></input>
    <button type="primary" form-type="submit">确认</button> 
  </form>
  <view wx:for="{{huifutext}}" wx:key="{{huifutext}}" wx:for-item="cell">
  <view wx:if="{{item.id == cell.blog_id}}">
  <view style="margin-top:20rpx;border:1px solid #ccc;color:#FF0000">评论名称:{{cell.uname}}</view>
  <view style="margin-top:10rpx;color:#FF0000">评论内容:{{cell.text}}</view>
  </view>
  </view>
</view>

logs.js

Page({
  data: {
    hidden: true
  },
  /**
   * 生命周期函数--监听页面加载---获取从其他页面传来的值经行接收
   */
  onLoad: function(options) {
    this.setData({
      id:options.id,
      uid: options.uid,
      uname: options.uname
    })
    var that = this
    that.setData({
      uids:that.data.uid
    })
    //查询留言
    wx.request({
      url: 'http://127.0.0.1/liuyanban.php',
      data:{
        'a':1
      },
      header: { 'content-type': 'application/json'},
      method: 'GET',
      dataType: 'json',
      success: function(res) {
         that.setData({
           liuyantext: res.data['0'],
         })
        console.log('查询值', res.data['0'])
      },
    })
    //查询评论
    wx.request({
      url:"http://127.0.0.1/huifu.php",
      header:{'content-type':'application/json'},
      data:{'a':1},
      method:'get',
      dataType:'json',
      success:function(res){
        that.setData({
          huifutext: res.data['0'],
        })
        console.log("评论值",res.data['0'])
      }
    })
  },
  //插入留言
  liuyanban: function(e) {
    if(e.detail.value.content != ""){
    var that = this
    wx.request({
      url: 'http://127.0.0.1/liuyanban.php',
      data: {
        "uid":this.data.uid,
        "uname":this.data.uname,
        "content":e.detail.value.content
      },
      header: { 'content-type': 'application/x-www-form-urlencoded'},
      method: 'POST',
      dataType: 'json',
      success: function(res) {
        console.log('插入数据值:',res)
      },
    })
    }
    console.log('留言内容',e.detail.value.content)
    console.log('uid：', this.data.uid)
    console.log('uname:', this.data.uname)
  },
  //删除
  deletei: function (e) {
    wx.showModal({
      title: '提示',
      content: '是否确定删除',
      success(res) {
        if (res.confirm) {
          wx.request({
            url: 'http://127.0.0.1/update.php',
            method:"get",
            header: { 'content-type': 'application/json'},
            dataType:'json',
            data:{
              'a':2,
              'id': e.currentTarget.dataset.src
            },
            success:function(){
              wx.showToast({
                title: '删除成功',
                icon: 'none',
              })
            }
          })
          console.log('用户点击删除')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  //评论功能
  huifu:function(e){
    console.log("点击了:",e.currentTarget.dataset.huifu)
    this.setData({
      arr: e.currentTarget.dataset.huifu
    })
  },
   huifus:function(e){
     wx.request({
      url: 'http://127.0.0.1/huifu.php',
      method:"post",
      header:{ 'content-type': 'application/x-www-form-urlencoded'},
      data:{
        'blog_id': this.data.arr,
        'uid': this.data.uid,
        'uname': this.data.uname,
        'text': e.detail.value.text
      },
      dataType:'json',
      success:function(res){
        wx.showToast({
          title: '评论成功',
          icon: 'none',
        })
      }
    })
   }
})

这些事没有封装，想封装的可以去看我钱面封装的文章，接下来就是评论的PHP了

huifu.php

<?php
	class huifu{
		//查询评论
		public function select(){
			require_once 'config.inc.php';
			$sql = "select * from wt_huifu";
			try{
				$stmt = $link->prepare($sql);
				$stmt->execute();
				while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
					//要转成json格式给小程序才可以
					$results[] = $row;
				}
				echo json_encode([$results]);
			}catch(PDOException $e){
					die($e->getMessage());
			}
		}
		//插入评论
		public function insert(){
			require_once 'config.inc.php';
			$sql = "insert into wt_huifu(blog_id,uid,uname,text) values(?,?,?,?)";
			try{
				$stmt = $link->prepare($sql);
				$stmt->execute([$_POST['blog_id'],$_POST['uid'],$_POST['uname'],$_POST['text']]);
			}catch(PDOException $e){
				die($e->getMessage());
			}
		}
	}
	$a = new huifu();
	if($_GET['a'] == 1){
		$a->select();
	}else{
		$a->insert();
	}
?>

还有一个评论功能的sql语句

create table wt_huifu(
id int PRIMARY KEY AUTO_INCREMENT,
blog_id int not null,
uid int not null,
uname varchar(22) not null,
text varchar(60) not null
)

最好是能一步一步来实现功能，要理解里面的原理，再给你们发一个源码吧，里面没有SQL，自己看前面文章，粘贴复制就好了,有什么问题欢迎评论留言，我会及时回复你的。


源码链接: https://pan.baidu.com/s/1wa0uZD5EmprH-rZd2jIhDQ 提取码: qc1f