php+uniapp+mysql实现评论+回复

评论

首先项目最重要的是数据表
我使用的是mysql

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for comment
-- ----------------------------
DROP TABLE IF EXISTS `comment`;
CREATE TABLE `comment`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `userid` int(11) NULL DEFAULT NULL COMMENT '用户id',
  `articleid` int(11) NULL DEFAULT NULL COMMENT '文章id',
  `parentid` int(11) NULL DEFAULT 0 COMMENT '最父id',
  `comment` varchar(80) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '评论内容',
  `create_at` datetime NULL DEFAULT NULL COMMENT '评论时间',
  `replyid` int(11) NULL DEFAULT NULL COMMENT '回复谁',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 11 CHARACTER SET = utf8 COLLATE = utf8_unicode_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;


-- ----------------------------
-- Table structure for article
-- ----------------------------
DROP TABLE IF EXISTS `article`;
CREATE TABLE `article`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `title` varchar(50) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '文章标题',
  `content` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL COMMENT '文章内容',
  `userid` int(11) NULL DEFAULT NULL COMMENT '文章作者id',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 2 CHARACTER SET = utf8 COLLATE = utf8_unicode_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

使用uni-app uview-ui页面改造实现了基础功能

<template>
	<view>
		<view>
			{{articleData.title}}
			{{articleData.content}}
		</view>
		<view class="reply" @click="reply()">回复</view>
		<view class="comment" v-for="(v,k) in commentList">
			<view class="left"></view>
			<view class="right">
				<view class="top">
					<view class="name">用户id{{v.userid}}</view>
				</view>
				<view class="content"> {{v.comment}} </view>
				<view class="bottom">
					{{$u.timeFormat(v.create_at, 'yyyy-mm-dd hh:MM')}}
					<view class="reply" @click="reply(v.userid,v.id)">回复</view>
				</view>
				<view style="margin: 5px 0;" class="reply-box" v-for="(vv,kk) in v.childList">
					<view class="reply">用户id{{vv.userid}} <span style="color: #2B85E4;">回复</span>{{vv.replyid}}</view>
					<view class="text">{{vv.comment}} </view>
					<view class="bottom">
						{{$u.timeFormat(vv.create_at, 'yyyy-mm-dd hh:MM')}}
						<view class="reply" @click="reply(vv.userid,v.id)">回复</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="show" mode="bottom" border-radius="14" length="40%">
			<u-input type="textarea" v-model="comment" placeholder="请发表你的评论" :height="300"></u-input>
			<u-button @click="release()">发布</u-button>
			<u-button @click="cancel()">取消</u-button>
		</u-popup>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				comment: "",
				articleid: "",
				commentList: [],
				userid: "",
				replyid: "",
				articleData:""
			};
		},
		onLoad() {
			this.articleid = 1
			this.time = this.$u.timeFormat(this.timestamp, 'yyyy-mm-dd');
			this.dataInit()
			this.articleInit()
		},
		methods: {
			articleInit(){
				var that = this
				uni.request({
					url: "http://www.test113.com/index/index/item",
					data: {
						articleid: that.articleid
					},
					success(res) {
						console.log(res)
						that.articleData=res.data.data
					}
				})
			},
			release() {
				var that = this
				uni.request({
					url: "http://www.test113.com/index/index/comment",
					data: {
						articleid: that.articleid,
						parentid: that.parentid,
						comment: that.comment,
						replyid: that.userid
						//++本人的userid
					},
					success(res) {
						console.log(res)
						that.cancel()
						that.dataInit()
					}
				})
			},
			cancel() {
				this.comment = ""
				this.show = false
			},
			reply(userid, parentid) {
				var that = this
				this.show = true
				this.userid = userid
				this.parentid = parentid
			},
			dataInit() {
				var that = this
				uni.request({
					url: "http://www.test113.com/index/index/commentLists",
					data: {
						articleid: that.articleid
					},
					success(res) {
						console.log(res)
						that.commentList = res.data.data
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.comment {
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>

后端php使用thinkphp框架

    public function comment(Request $request)
    {
        $data['userid']=$request->param('userid',1);//用户id
        $data['articleid']=$request->param('articleid',1);//文章id
        $data['parentid']=$request->param('parentid',0);//最父id
        $data['comment']=$request->param('comment',"评论内容");//评论内容
        $data['replyid']=$request->param('replyid',"1");//回复的userid
        $data['create_at']=date('Y-m-d H:i:s');//回复的userid
        $res=Comment::add($data);
    }
    public function commentLists(Request $request)
    {
        $articleid=$request->param('articleid',1);
        $data=Comment::findArticle($articleid);
        $data=getTree($data);
        return json(['code'=>200,"msg"=>"成功",'data'=>$data]);
    }
    public function item(Request $request)
    {
        $articleid=$request->param('articleid',1);
        $data=Article::where('id',$articleid)->find();
        return json(['code'=>200,"msg"=>"成功",'data'=>$data]);
    }

递归函数

function getTree($data,$pid=0){
    $child=[];
    foreach ($data as $k=>$v){
        if($v['parentid']==$pid){
            $v['childList']=getTree($data,$v['id']);
            $child[]=$v;
        }
    }
    return $child;
}