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

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

实现技术

后台：SSM框架

数据库：MySQL数据库

数据库设计

评论功能的实现主要涉及三个表

comment：存储留言评论信息，表结构如下：

表中，必须的字段：id，user_id，reply_comment_id，comment，insert_time，source_id

添加了冗余字段username，reply_user_name，userphoto

主要用于存储微信名、回复的微信名、微信头像(这三个字段完全不应该冗余，当小程序用户更换用户名时，该表要跟着更新，可维护性差，不建议存储这些冗余信息，我就是懒得写SQL了)

source：存储你在小程序需要回复的内容。

user：存储小程序使用的用户信息，主要包括用户名、用户头像等微信用户信息。

小程序端

wxml

{{item.userName}}

-> {{item.replyUserName}}

{{item.comment}}

{{item.insertTime}}

回复

删除

回复{{replyUserName}}

取消回复

发送

css

.names {

display: flex;

font-size: 30rpx;

line-height: 40rpx;

}

.input_null {

color: #c9c9c9;

}

.replyAll {

position:absolute;

}

.release {

align-items: flex-end; /*底部对齐*/

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; /*两端对齐*/

font-size: 35rpx;

}

.replyinfo2{

display: flex;

justify-content: space-between; /*两端对齐*/

}

.release textarea {

width: 550rpx;

min-height: 34rpx;

max-height: 102rpx; /*最多显示三行*/

border-width: 15rpx 20rpx; /*使用padding与预期留白不一致，故使用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({

/**

* 页面的初始数据

*/

data: {

list: [],

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function(options) {

var that = this;

mydata.sourceId = options.sourceId

mydata.commentId = "";

mydata.replyUserName = "";

//设置scroll的高度

wx.getSystemInfo({

success: function(res) {

that.setData({

scrollHeight: res.windowHeight,

userId:app.globalData.haulUserInfo.id

});

}

});

mydata.page = 1;

that.getPageInfo(mydata.page);

},

/**

* 页面下拉刷新事件的处理函数

*/

refresh: function() {

console.log('refresh');

mydata.page = 1

this.getPageInfo(mydata.page, function() {

this.setData({

list: []

})

});

mydata.end = 0;

},

/**

* 页面上拉触底事件的处理函数

*/

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

})

},

// 合并数组

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: '删除评论',

content: '请确认是否删除该评论？',

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('用户点击取消')

}

}

})

},

cancleReply: function(e) {

mydata.commentId = "";

mydata.replyUserName = "";

this.setData({

replyUserName: mydata.replyUserName,

reply: false

})

},

// 更新页面信息

// 此处的回调函数在 传入新值之前执行 主要用来清除页面信息

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 {

// 当前页为其他页

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('请输入评论');

return;

}

// 提交评论

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: "回复成功"

})

that.refresh();

mydata.commentId = "";

mydata.replyUserName = "";

this.setData({

replyUserName: mydata.replyUserName,

reply: false

})

} else {

wx.showToast({

title: '回复失败，请检查您的网络',

})

}

}

})

}

})

后台

后台功能：获取评论、删除评论、插入评论，都是简单的数据库操作，放在一个controller类中实现即可

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 getComments(@RequestParam("sourceId") int sourceId,

@RequestParam("limited") int limited,@RequestParam("offset") int offset) {

logger.info("getComments");

List list = new ArrayList();

try{

list = commentService.getComment(sourceId, limited, offset);

}catch(Exception e){

}

return list;

}

@RequestMapping(value = "/insertComment", method = RequestMethod.POST)

private @ResponseBody

Result>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 resultMap = new HashMap();

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>(true, resultMap);

}

@RequestMapping(value = "/deleteComment", method = RequestMethod.POST)

private @ResponseBody

Result>deleteComment(@RequestParam("commentId") String commentId) {

logger.info("deleteComment");

Map resultMap = new HashMap();

try{

commentService.deleteComment(commentId);

resultMap.put("msg", "deleteComment success");

}catch(Exception e){

System.out.print(e);

resultMap.put("msg", "deleteComment error");

}

return new Result>(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;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。