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

效果图

发布评论

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

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);
  },

以上就是本次的介绍。


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

原文地址:https://www.cnblogs.com/gdragon/p/11986368.html

时间: 2024-10-05 01:02:28

全栈项目|小书架|小程序端-评论功能实现的相关文章

全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口

通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看出目前一本图书信息主要有: 图片字段 名称字段 作者字段 出版社字段 除了以上前端页面中可见的信息外,在服务器开发中还需要给每一条记录(数据)都加上下面的几个字段: 创建时间字段 更新时间字段 删除时间字段 最后完成的数据库表如下: ps:由于数据库是直接导入的,之前的数据库是没有时间字段的,所以前

全栈项目|小书架|服务器端-NodeJS+Koa2 实现书籍详情接口

通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 书籍详情分析 书籍详情页面如下: 从上图可以分析出详情页面大概有以下几个接口: 获取书籍详情信息 获取用户对书籍的喜欢状态接口 喜欢/不喜欢书籍接口 获取评论列表 写评论接口 以上的接口,有的数据可以直接从已存在的数据表中去获取,比如:书籍详情信息,而其他新接口就需要创建对应的model,然后根据model创建相应的数据表. 比如 用户对书籍的喜欢操作,可以创建li

《从零开始做一个MEAN全栈项目》(1)

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 在本系列的开篇,我打算讲一下全栈项目开发的优势,以及MEAN项目各个模块的概览. 为什么选择全栈开发?     对于初学者来说,学习一门新的语言和技术的体验总是让人愉快的,也会满足于掌握了一些新的东西并且解决了一些实际问题.在一个小组中采用全栈开发时,你可以更加有效地把握项目全局概念,这也有利于让你了解项目中的不同模块以及它们之间是如何协同工作的.你会对你们的产品中他人的贡献更加清晰,你也就了解了这款产品如何

《从零开始做一个MEAN全栈项目》(2)

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习.   上一节简单介绍了什么是MEAN全栈项目,这一节将简要介绍三个内容:(1)一个通用的MEAN项目的技术架构,(2)为什么我们要打造单页应用,(3)本系列项目的技术架构和开发计划.希望通过这三个问题,我们能够对本项目产生一个全局视角. 实现一个常见的MEAN全栈项目的核心就是RESTful API.这个接口通常是用MongoDB, Express, Node.js实现的,而单页应用(SPA)由AngularJ

VueCli3.0全栈项目-资金管理系统带权限(node/element/vue)

课程简介:通过本系列课程,可以快速的掌握全栈开发流程, 包括node.js的接口搭建, vue前端项目的构建, element-ui视图的构建. 一套应有尽有的课程! 课程目录:1.Vue全栈-最终成果展示.mp42.Node接口搭建-express搭建服务器.mp43.Node接口搭建-连接MongoDB数据库.mp44.Node接口搭建-搭建路由和数据模型.mp45.Node接口搭建-搭建注册接口并存储数据.mp46.Node接口搭建-使用全球公认头像gravatar.mp47.Node接口

全栈之路-微信小程序-SKU开发(代码)

SKU开发是小程序中最难的一部分,思路在分析中已经记录过了,这里主要看一下代码的实现,感觉老师写的代码太棒了,很优雅!主要想记录一下写代码的思路,对面向对象编程的实践. 一.代码结构的分析 1.说明几个关键词 搞清楚sku的概念,搞清楚我们抽象出来的realm组件.fence组件.cell组件以及他们对应的模型类,这里模型类放到models文件夹中 realm组件 --- fence-group.js中的FenceGroup模型 fence组件 --- fence.js中的Fence模型 cel

全栈开发工程师微信小程序-中(中)

开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, 群id lang 当 type="user*" 时生效,以哪种语言展示 userInfo <open-data type="groupName" open-gid="xxxxxx"></open-data> <open-data type="us

全栈工程师必备:安卓移动端手机开发,第六课

关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活.提供程序员技术及生活指导干货. 本系列课程 致力于老手程序员可以快速入门学习安卓开发.系统全面的从一个.Net程序员的角度一步步学习总结安卓开发. 上篇课程:安卓一步步从基础到精通自学教程,纯实战,纯干货(五) 简单计算器程序 前台界面如何与后台处理类联系在一起. 上一课我们已经把计算器的前台页面搭建完成了,本次我们将实现真正的加法计算器功能. 安卓程序的开发类似于我们学习过的ASP.Net和Winform ,也有前台页面和后台处理程

全栈项目|小书架|服务器开发-Koa2中间件机制洋葱模型了解一下

KOA2 是什么? Koa是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 async函数,Koa帮你丢弃回调函数,并有力地增强错误处理. Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序. 为什么产生? 笔者对这几个框架都不熟,这里就不误人子弟了.可以看看下面一些大佬的介绍. Koa是由Express的原班人马打造,那么他们为什么不将