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

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

(删除按钮,是用户自己的留言时才会显示该按钮)

实现技术

  后台: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
  • 42
    点赞
  • 278
    收藏
    觉得还不错? 一键收藏
  • 70
    评论
评论 70
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值