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

最新推荐文章于 2023-05-29 23:11:34 发布

原创

最新推荐文章于 2023-05-29 23:11:34 发布 · 7.1w 阅读

278 ·

CC 4.0 BY-SA版权

本文介绍如何使用SSM框架和MySQL数据库在微信小程序中实现评论留言功能，仿照知乎的设计。核心涉及三个数据库表：comment、source和user，包含获取评论、删除评论和插入评论的后台操作。在小程序端，分别处理wxml、wxss和js逻辑。

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

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

实现技术

后台：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 class="text">{
  
  {replyUserName}}</text>
      <button class="cancel" bindtap="cancleReply">取消回复</button>
    </view>
    <view class="replyinfo2">
      <textarea placeholder-class="input_null" fixed="true" maxlength="-1" show-confirm-bar="false" cursor-spacing="15" aut