全栈项目|小书架|小程序端-评论功能实现

Posted 2020-11-24 gdragon

效果图

发布评论

发布评论的入口在图书详情页面，点击 写评论 按钮之后跳转到发布评论页面。

wxml布局比较简单了，目前还没有添加图片评论功能，也没有子评论功能，所以伪代码就比较简单了：

<view class="comment-container">
    
    <!-- book name -->
    <view class="book-name">
        <text>{{bookInfo.name}}</text>
    </view>

    <!-- comment area -->
    <view class="comment-area bg-white">
        <textarea placeholder="关于这本书的看法..." maxlength="140" value="{{comment}}" bindinput="inputComment"></textarea>
    </view>

    <!-- bottom button -->
    <form report-submit bindsubmit="submitComment">
        <view class="fixed-bottom block-full-width flex-container bg-white">
            <button class="full-button" type="primary" form-type="submit"> 提交评论 </button>
        </view>
    </form>

</view>

这里为了实现功能，页面美化暂时做的还不够好，所以wxss也不叫简单，伪代码如下：

.comment-container {
    display: flex;
    flex-direction: column;
    padding: 20rpx 0;
}

.book-name {
    padding: 10rpx 30rpx;
}

.comment-area {
    margin-top: 20rpx;
    padding: 20rpx 30rpx;
}

在发布评论的时候，我们需要经判断用户的输入内容是否正确，比如判空、非法字符、字符长度判断等，因此这里封装了一个校验的方法：

// 检查用户是否输入了非法字符
  checkIllegal: function(input) {
    let patern = /[`#^<>:"?{}/;'[]]/im;
    let _result = patern.test(input);
    return _result;
  },

数据校验通过之后我们就可以将数据提交给服务器了，主要操作如下：

• 将数据保存为一个对象
• 调用写评论的接口，将对象传递给服务器
• 评论成功之后，关闭评论页面，返回详情页面刷新数据

前面两步都比较好实现，第三步如何实现呢？

这里采用页面传递缓存的方式实现在评论成功的时候保存缓存标志后关闭页面，然后在书籍详情页面的onShow方法中判断缓存标志。

有缓存标志则加载评论数据，然后清除缓存。没有缓存数据则不请求评论列表接口。

评论列表

评论列表其实也很简单，就是写一个item布局，然后通过for循环去渲染列表布局即可。

wxml布局如下：

<view class="comment-area" wx:else>
      <block wx:if="{{commentList.length > 0}}">
        <view class="comment-item" wx:for="{{commentList}}" wx:key="index">
          <view class="avatar-container">
            <image mode="scaleToFill" src="{{item.uavatar}}" class="user-avatar"></image>
          </view>

          <view class="comment-content">
            <text class="user-name">{{item.uname}}</text>
            <text class="user-comment">{{item.ucontent}}</text>
            <text class="comment-time">{{item.created_at}}</text>
          </view>
        </view>
      </block>

      <block wx:else>
        <view class="comment-placeholder">来当第一个评论的人吧～</view>
      </block>
    </view>

有数据则将数据传递给wxml即可。

// 设置进度条隐藏或者加载
  _commentSetTimeOut(list, isLoading) {
    let that = this
    // 关闭进度条
    setTimeout(function() {
      that.setData({
        commentList: list,
        commentLoading: isLoading
      });
    }, 500);
  },

以上就是本次的介绍。

---

扫码关注公众号，轻撩即可。