微信小程序 评论留言功能实现 仿知乎

  最近沉迷学习无法自拔，太久没有码字，码一个小程序留言功能实现。先上一波最后效果图：

（删除按钮，是用户自己的留言时才会显示该按钮）

实现技术

  后台：SSM框架

  数据库：MySQL数据库

数据库设计

  评论功能的实现主要涉及三个表

comment：存储留言评论信息，表结构如下：

表中，必须的字段：id，user_id，reply_comment_id，comment，insert_time，source_id

添加了冗余字段username，reply_user_name，userphoto

主要用于存储微信名、回复的微信名、微信头像（这三个字段完全不应该冗余，当小程序用户更换用户名时，该表要跟着更新，可维护性差，不建议存储这些冗余信息，我就是懒得写SQL了）

source：存储你在小程序需要回复的内容。

user：存储小程序使用的用户信息，主要包括用户名、用户头像等微信用户信息。

小程序端

wxml

<scroll-view scroll-top="{
  {scrollTop}}" scroll-y="true" style="height:{
  {scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="refresh">
  <view class="pro-con">
    <block wx:for="{
  {list}}" wx:key="{
  {index}}">
      <view class="pro-box">
        <view class="head">
          <image class="img" src="{
  {item.userPhoto}}" mode="aspectFit"></image>
          <view class="box">
            <view class="shead clear">
              <view class="names fl">{
  {item.userName}}
                  <view wx:if="{
  {!item.replyUserName == \" \"}}">
                  -> {
  {item.replyUserName}}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="addr-info">
          <view class="addr-text">
            {
  {item.comment}}
          </view>
        </view>
        <view class="info">
          <view class="text">
            <text decode="true">{
  {item.insertTime}}</text>
          </view>
          <view class="text">
            <button class="sharebtn" data-commentId="{
  {item.id}}" data-commentUserName="{
  {item.userName}}" bindtap="bindReply">回复</button>
          </view>
              <view wx:if="{
  {item.userId == userId}}" class="status text fr">
                <text class="delete" decode="true" bindtap='deleteComment' data-CommentId="{
  {item.id}}">删除</text>
              </view>
        </view>
      </view>
    </block>
  </view>
</scroll-view>
<form bindsubmit="submitForm" report-submit="true">
  <view class="release">
    <view  wx:if="{
  {reply}}" class="replyinfo1">
      回复<text clas