微信小程序仿知乎實(shí)現(xiàn)評(píng)論留言功能
更新時(shí)間：2018年11月28日 09:21:15 作者：蝸牛專注學(xué)習(xí)
這篇文章主要為大家詳細(xì)介紹了微信小程序仿知乎實(shí)現(xiàn)評(píng)論留言功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近沉迷學(xué)習(xí)無(wú)法自拔，太久沒有碼字，碼一個(gè)小程序留言功能實(shí)現(xiàn)。先上一波最后效果圖：
（刪除按鈕，是用戶自己的留言時(shí)才會(huì)顯示該按鈕）
實(shí)現(xiàn)技術(shù)
后臺(tái)：SSM框架
數(shù)據(jù)庫(kù)：MySQL數(shù)據(jù)庫(kù)
數(shù)據(jù)庫(kù)設(shè)計(jì)
評(píng)論功能的實(shí)現(xiàn)主要涉及三個(gè)表
comment：存儲(chǔ)留言評(píng)論信息，表結(jié)構(gòu)如下：
表中，必須的字段：id，user_id，reply_comment_id，comment，insert_time，source_id
添加了冗余字段username，reply_user_name，userphoto
主要用于存儲(chǔ)微信名、回復(fù)的微信名、微信頭像（這三個(gè)字段完全不應(yīng)該冗余，當(dāng)小程序用戶更換用戶名時(shí)，該表要跟著更新，可維護(hù)性差，不建議存儲(chǔ)這些冗余信息，我就是懶得寫SQL了）
source：存儲(chǔ)你在小程序需要回復(fù)的內(nèi)容。
user：存儲(chǔ)小程序使用的用戶信息，主要包括用戶名、用戶頭像等微信用戶信息。
小程序端
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">回復(fù)</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">
回復(fù)<text class="text">{{replyUserName}}</text>
<button class="cancel" bindtap="cancleReply">取消回復(fù)</button>
</view>
<view class="replyinfo2">
<textarea placeholder-class="input_null" fixed="true" maxlength="-1" show-confirm-bar="false" cursor-spacing="15" auto-height="true" placeholder="請(qǐng)輸入回復(fù)" name="comment"></textarea>
<button form-type="submit" class="submit">發(fā)送</button>
</view>
</view>
</form>
css
.names {
display: flex;
font-size: 30rpx;
line-height: 40rpx;
}
.input_null {
color: #c9c9c9;
}
.replyAll {
position:absolute;
}
.release {
align-items: flex-end; /*底部對(duì)齊*/
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 18rpx 0 18rpx 30rpx;
background-color: #f7f8f7;
font-size: 28rpx;
z-index: 999;
}
.replyinfo1{
display: flex;
justify-content: space-between; /*兩端對(duì)齊*/
font-size: 35rpx;
}
.replyinfo2{
display: flex;
justify-content: space-between; /*兩端對(duì)齊*/
}
.release textarea {
width: 550rpx;
min-height: 34rpx;
max-height: 102rpx; /*最多顯示三行*/
border-width: 15rpx 20rpx; /*使用padding與預(yù)期留白不一致，故使用border*/
border-style: solid;
border-color: #fff;
line-height: 34rpx;
font-size: 28rpx;
background-color: #fff;
border-radius: 4rpx;
}
.release .text {
font-size: 40rpx;
color: #c9c9c9;
}
.cancel {
width: 240rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
color: #6c0;
margin: 0 3px;
padding: 0;
}
.release .submit {
width: 120rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
color: #6c0;
margin: 0 3px;
padding: 0;
}
.pro-box .info .text .delete {
color: #f68135;
border-radius: 50rpx;
border: 1px solid #f68135;
font-size: 28 rpx;
width: 150rpx;
height: 48rpx;
text-align: center;
}
js
// pages/comment/comment.js
const model = require('../cityChoose/cityChoose.js')
const config = require('../../utils/config.js')
const util = require('../../utils/util.js')
const app = getApp()
var mydata = {
end: 0,
replyUserName: ""
}
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
list: [],
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function(options) {
var that = this;
mydata.sourceId = options.sourceId
mydata.commentId = "";
mydata.replyUserName = "";
//設(shè)置scroll的高度
wx.getSystemInfo({
success: function(res) {
that.setData({
scrollHeight: res.windowHeight,
userId:app.globalData.haulUserInfo.id
});
}
});
mydata.page = 1;
that.getPageInfo(mydata.page);
},
/**
* 頁(yè)面下拉刷新事件的處理函數(shù)
*/
refresh: function() {
console.log('refresh');
mydata.page = 1
this.getPageInfo(mydata.page, function() {
this.setData({
list: []
})
});
mydata.end = 0;
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
bindDownLoad: function() {
console.log("onReachBottom");
var that = this;
if (mydata.end == 0) {
mydata.page++;
that.getPageInfo(mydata.page);
}
},
bindReply: function(e) {
console.log(e);
mydata.commentId = e.target.dataset.commentid;
mydata.replyUserName = e.target.dataset.commentusername;
this.setData({
replyUserName: mydata.replyUserName,
reply: true
})
},
// 合并數(shù)組
addArr(arr1, arr2) {
for (var i = 0; i < arr2.length; i++) {
arr1.push(arr2[i]);
}
return arr1;
},
deleteComment:function(e){
console.log(e);
var that = this;
var commentId = e.target.dataset.commentid;
wx.showModal({
title: '刪除評(píng)論',
content: '請(qǐng)確認(rèn)是否刪除該評(píng)論？',
success: function (res) {
if (res.confirm) {
wx.request({
url: config.deleteComment,
method: "POST",
data: {
commentId: commentId
},
header: {
"content-type": "application/x-www-form-urlencoded;charset=utf-8",
},
success: res => {
that.refresh();
wx.showToast({
title: "刪除成功"
})
}
})
} else if (res.cancel) {
console.log('用戶點(diǎn)擊取消')
}
}
})
},
cancleReply: function(e) {
mydata.commentId = "";
mydata.replyUserName = "";
this.setData({
replyUserName: mydata.replyUserName,
reply: false
})
},
// 更新頁(yè)面信息
// 此處的回調(diào)函數(shù)在 傳入新值之前執(zhí)行 主要用來(lái)清除頁(yè)面信息
getPageInfo(page, callback) {
var that = this;
util.showLoading();
console.log("getPageInfo");
console.log("page" + page);
var limited = 6;
var offset = (page - 1) * 6;
wx.request({
url: config.getComments,
method: "POST",
data: {
sourceId: mydata.sourceId,
limited: limited,
offset: offset
},
header: {
"content-type": "application/x-www-form-urlencoded;charset=utf-8",
},
success: res => {
console.log(res);
if (page == 1) {
that.data.list = res.data;
that.setData({
list: that.data.list
})
mydata.end = 0;
} else {
// 當(dāng)前頁(yè)為其他頁(yè)
var list = that.data.list;
if (res.data.length != 0) {
list = that.addArr(list, res.data);
that.setData({
list: list
})
mydata.end = 0;
} else {
mydata.end = 1;
}
}
wx.hideLoading();
}
})
},
submitForm(e) {
var form = e.detail.value;
var that = this;
console.log(app.globalData.haulUserInfo);
if(form.comment == ""){
util.showLog('請(qǐng)輸入評(píng)論');
return;
}
// 提交評(píng)論
wx.request({
url: config.insertComment,
method: "POST",
data: {
sourceId: mydata.sourceId,
comment: form.comment,
userId: app.globalData.haulUserInfo.id,
userName: app.globalData.haulUserInfo.userName,
replyCommentId: mydata.commentId,
replyUserName: mydata.replyUserName,
userPhoto: app.globalData.haulUserInfo.userPhoto
},
header: {
"content-type": "application/x-www-form-urlencoded;charset=utf-8",
//token: app.globalData.token
},
success: res => {
console.log(res)
if (res.data.success) {
wx.showToast({
title: "回復(fù)成功"
})
that.refresh();
mydata.commentId = "";
mydata.replyUserName = "";
this.setData({
replyUserName: mydata.replyUserName,
reply: false
})
} else {
wx.showToast({
title: '回復(fù)失敗，請(qǐng)檢查您的網(wǎng)絡(luò)',
})
}
}
})
}
})
后臺(tái)
后臺(tái)功能：獲取評(píng)論、刪除評(píng)論、插入評(píng)論，都是簡(jiǎn)單的數(shù)據(jù)庫(kù)操作，放在一個(gè)controller類中實(shí)現(xiàn)即可
package com.melon.haul.web;
import java.sql.Date;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import net.sf.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.melon.haul.dto.DataUtil;
import com.melon.haul.dto.GetLocation;
import com.melon.haul.dto.Result;
import com.melon.haul.entity.Comment;
import com.melon.haul.entity.District;
import com.melon.haul.entity.Source;
import com.melon.haul.service.CommentService;
import com.melon.haul.service.DistrictService;
import com.melon.haul.service.SourceService;
@Controller
@WebAppConfiguration
@RequestMapping("/Comment")
public class CommentController {
private Logger logger = LoggerFactory.getLogger(this.getClass());
@Autowired
private CommentService commentService;
@RequestMapping(value = "/getComments", method = RequestMethod.POST)
private @ResponseBody List<Comment> getComments(@RequestParam("sourceId") int sourceId,
@RequestParam("limited") int limited,@RequestParam("offset") int offset) {
logger.info("getComments");
List<Comment> list = new ArrayList<Comment>();
try{
list = commentService.getComment(sourceId, limited, offset);
}catch(Exception e){
}
return list;
}
@RequestMapping(value = "/insertComment", method = RequestMethod.POST)
private @ResponseBody
Result<Map<String,String>>insertComment(@RequestParam("sourceId") String sourceId,
@RequestParam("comment") String comment,@RequestParam("userId") int userId,
@RequestParam("userName") String userName,@RequestParam("replyCommentId") String replyCommentId,
@RequestParam("replyUserName") String replyUserName,@RequestParam("userPhoto")String userPhoto) {
logger.info("insertComment");
Map<String, String> resultMap = new HashMap<String, String>();
try{
Integer rCId = -1;
if(!replyCommentId.equals(""))
rCId = Integer.parseInt(replyCommentId);
commentService.insertComment(Integer.parseInt(sourceId), comment, userId,userName,rCId,replyUserName,userPhoto);
resultMap.put("msg", "insertComment success");
}catch(Exception e){
System.out.print(e);
resultMap.put("msg", "insertComment error");
}
return new Result<Map<String, String>>(true, resultMap);
}
@RequestMapping(value = "/deleteComment", method = RequestMethod.POST)
private @ResponseBody
Result<Map<String,String>>deleteComment(@RequestParam("commentId") String commentId) {
logger.info("deleteComment");
Map<String, String> resultMap = new HashMap<String, String>();
try{
commentService.deleteComment(commentId);
resultMap.put("msg", "deleteComment success");
}catch(Exception e){
System.out.print(e);
resultMap.put("msg", "deleteComment error");
}
return new Result<Map<String, String>>(true, resultMap);
}
}
公共CSS（app.wxss）
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
/* large button style */
.large-btn{
background: #f68135;
border-radius: 50rpx;
border: 1px solid #f68135;
color: #fff;
height: 100rpx;
line-height: 100rpx;
margin: 0 auto;
width: 96%;
text-align: center;
}
.large-btn.empty{
background: transparent;
color: #f68135;
margin-top: 50rpx;
}
.large-btn.disabled{
border-color: #ccc;
background: #ccc;
color: #fff;
}
/* public style to clear default styles */
.fl{
float: left;
}
.fr{
float: right;
}
.fc{
float:none;
}
.col-gray{
color: #999!important;
}
/* the message of auction about goods & cars */
.pro-con{
padding: 20rpx;
background: #f1f1f1;
}
.pro-box{
background: #fff;
padding: 20rpx;
box-sizing: border-box;
border-radius: 10rpx;
margin-bottom: 20rpx;
}
.pro-box .img{
display: inline-block;
vertical-align: top;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
margin-right: 10rpx;
}
.pro-box .box{
display: inline-block;
vertical-align: top;
width: calc(98% - 80rpx);
}
.pro-box .shead{
padding-bottom: 20rpx;
}
.pro-box .shead .name{
font-size: 30rpx;
line-height: 40rpx;
}
.pro-box .shead .stxt{
font-size: 26rpx;
color: #999;
}
.pro-box .shead .fr{
padding-top: 10rpx;
}
.pro-box .shead .fr navigator{
font-size: 0;
}
.pro-box .shead .fr image{
width: 48rpx;
height: 48rpx;
}
.pro-box .sharebtn{
height:48rpx;
background: #f68135;
border-radius: 50rpx;
border: 1px solid #f68135;
color: #fff;
text-align: center;
line-height: 50rpx;
font-size:30rpx;
}
.pro-box .addr-info{
align-items: center;
justify-content: space-between;
border-bottom: 1px dashed #ccc;
margin: 0 -20rpx;
margin-bottom: 20rpx;
padding-bottom: 20rpx;
padding-left: 20rpx;
padding-right: 20rpx;
display: inline-block;
}
.pro-box .addr-info .addr-text{
font-size: 35rpx;
line-height: 40rpx;
width:100%;
}
.pro-box .addr-info .addr-text .color1{
color:lightskyblue;
border-color: #ccc;
border: 1px solid lightskyblue;
border-radius:15px;
margin-right: 5px;
padding: 0rpx,2rpx,0rpx,2rpx;
}
.pro-box .addr-info .addr-text .color2{
color: #f68135;
border-color: #ccc;
border: 1px solid #f68135;
border-radius:10px;
margin-right: 5px;
margin-left: 5px;
padding: 0rpx,2rpx,0rpx,2rpx;
}
.pro-box .position{
width: 48rpx;
height: 48rpx;
}
.pro-box .comment{
width: 55rpx;
height: 48rpx;
}
.pro-box .addr{
align-items: center;
justify-content: space-between;
border-bottom: 1px dashed #ccc;
margin: 0 -20rpx;
margin-bottom: 20rpx;
padding-bottom: 20rpx;
padding-left: 20rpx;
padding-right: 20rpx;
display: flex;
}
.pro-box .addr .addr-text{
font-size: 34rpx;
line-height: 40rpx;
max-width: 240rpx;
min-width:200rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pro-box .addr .addr-text .color-text{
color: #f68135;
}
.pro-box .addr .time{
font-size: 26rpx;
line-height: 36rpx;
text-align: center;
}
.pro-box .addr .line{
background: #ccc;
height: 1px;
margin: 6rpx -20rpx;
position: relative;
}
.pro-box .info{
display: flex;
align-items: center;
justify-content: space-between;
}
.pro-box .info .text{
vertical-align:text-top;
font-size: 26rpx;
}
.pro-box .info .text .delete{
color: #f68135;
border-radius: 50rpx;
border: 1px solid #f68135;
width: 100rpx;
height: 48rpx;
text-align: center;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在JavaScript中，和JAVA類似，也提供了對(duì)于基本數(shù)據(jù)類型的包裝類型。例如Number、Boolean、String類型。下面我們就來(lái)詳細(xì)探討下吧。2015-06-06
JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法,簡(jiǎn)單講述了廣義表的原理與相關(guān)概念,并結(jié)合實(shí)例形式分析了javascript定義與使用廣義表的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
JS中call(),apply(),bind()函數(shù)的區(qū)別與用法詳解
這篇文章主要介紹了JS中call(),apply(),bind()函數(shù)的高級(jí)用法詳解,需要的朋友可以參考下2022-12-12
在javascript中，hash指的是哈希表，是一種根據(jù)關(guān)鍵字直接訪問內(nèi)存存儲(chǔ)位置的數(shù)據(jù)結(jié)構(gòu)，hash就是一個(gè)賦值的方法，但實(shí)際用的并不需要太復(fù)雜，能用的就一點(diǎn)點(diǎn)，寫法也非常簡(jiǎn)單，hash有多種寫法，本文給大家介紹javascript?hash使用，感興趣的朋友一起看看吧2023-10-10
wap手機(jī)圖片滑動(dòng)切換特效無(wú)css3元素js腳本編寫
手機(jī)圖片滑動(dòng)切換，網(wǎng)上有很多這樣的例子，但都借助于其他組件，讓代碼混亂的不行，本例無(wú)css3元素js腳本編寫,需要的朋友可以參考下2014-07-07
JS提示：Uncaught SyntaxError:Unexpected token ) 錯(cuò)誤的解決方法
這篇文章主要介紹了JS提示：Uncaught SyntaxError:Unexpected token ) 錯(cuò)誤的解決方法,結(jié)合實(shí)例形式分析了javascript提示此類異常的常見原因與相關(guān)解決方法,需要的朋友可以參考下2016-08-08
package.json與package-lock.json的區(qū)別及詳細(xì)解釋
不知道大家平時(shí)在開發(fā)中有沒有注意到,你的項(xiàng)目中有兩個(gè)文件:package.json,package-lock.json,應(yīng)該很多人平時(shí)都不會(huì)去關(guān)注這兩個(gè)文件有啥關(guān)系吧,這篇文章主要給大家介紹了關(guān)于package.json與package-lock.json的區(qū)別及詳細(xì)解釋,需要的朋友可以參考下2022-08-08
JavaScript中省略元素對(duì)數(shù)組長(zhǎng)度的影響
這篇文章主要介紹了JavaScript中省略元素對(duì)數(shù)組長(zhǎng)度的影響,本文給大家介紹的非常詳細(xì)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
elementui-樹形控件實(shí)現(xiàn)子節(jié)點(diǎn)右側(cè)添加圖標(biāo)和數(shù)據(jù)鼠標(biāo)放上去顯示文字效果
這篇文章主要介紹了elementui-樹形控件實(shí)現(xiàn)子節(jié)點(diǎn)右側(cè)添加圖標(biāo)和數(shù)據(jù)鼠標(biāo)放上去顯示文字效果,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了JavaScript的流程控制語(yǔ)句，感興趣的小伙伴們可以參考一下2015-11-11