java 评论回复功能,javaweb评论回复功能

　　这篇文章主要为大家详细介绍了VUE爪哇实现评论回复功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

背景

　　最近需要做一个多级评论的功能，技术路线：VUE(元素)Java(SpringBoot)

　　效果

后台

　　SQL

　　Java

　　控制器

　　/**

　　* 根据关联编号获取评论信息

　　* @param relationId关联编号

　　* @param类型类型

　　* @ return:com。哈维。结果。resultsupportjava。郎。目标

　　* @日期：2020/12/10 14:37

　　@GetMapping(findList )

　　public ResultSupportObject findList(@ request param( relationId )String relationId，@ request param( type )String type){

　　log.debug(接口[查找列表]的参数：关系Id={}，类型={} ,关系Id，类型);

　　ResultSupportObject结果=resultsupport。createmisresp()；

　　尝试{

　　list comment comment list=commentservice。findlist(关系id，类型)；

　　结果支持实用程序。fillresultsupport(结果，评论列表)；

　　} catch(异常e) {

　　log.error([findList]接口执行异常，e)；

　　结果支持实用程序。fillerror(结果，系统出现异常！);

　　}

　　log.debug(接口[查找列表]的结果：result={} ，result)；

　　返回结果；

　　}

　　/**

　　* 保存评论

　　* @param注释参数

　　* @ return:com。乌龟。常见。结果。resultsupportjava。郎。目标

　　* @日期：2020/12/10 14:37

　　@PostMapping(save )

　　public ResultSupportObject save(@ request正文注释Comment，HttpServletRequest请求){

　　log.debug(接口[保存]的参数：comment={} ，comment)；

　　ResultSupportObject结果=resultsupport。createmisresp()；

　　字符串令牌=请求。get头(“授权”)；

　　if (StrUtil.isEmpty(token)) {

　　结果。设置成功(假)；

　　result.setMessage(标记无效!);

　　返回结果；

　　}

　　if (BeanUtil.isEmpty(comment)){

　　结果。设置成功(假)；

　　result.setMessage(参数无效!);

　　返回结果；

　　}

　　尝试{

　　commentService.save(comment，token)；

　　} catch(异常e) {

　　日志。错误([保存]接口执行异常，e)；

　　结果支持实用程序。fillerror(结果，系统出现异常！);

　　}

　　log.debug(接口[保存]的结果：result={} ，result)；

　　返回结果；

　　}

　　服务

　　/**

　　* 根据关联编号获取绩效信息

　　公共列表注释查找列表(字符串关系Id，字符串类型){

　　返回注释映射器。findlist(关系id，类型)；

　　}

　　/**

　　* 保存评论

　　* @param注释参数

　　* @param标记用户代币

　　* @return:

　　* @日期：2020/12/10 14:37

　　@ Transactional(回滚=exception。类)

　　公共空的保存（注释，字符串标记){

　　sys user user=user utils。getuser(token)；

　　评论。预插入(用户。getid())；

　　评论。setdelflag(“0”)；

　　commentMapper.save(注释);

　　}

　　制图人

　　/**

　　* 根据关联编号获取绩效信息

　　列表注释findList(@ Param( relationId )String relationId，@ Param( type )String type)；

　　/**

　　* 根据编号获取子评论内容

　　列表注释selectByParentId(@ Param( parentId )String parentId)；

　　/**

　　* 保存评论

　　无效保存(评论评论);

　　可扩展置标语言

　　sql id=commentColumns

　　a.id为id ，

　　答。用户标识为"用户标识",

　　u.name为"用户名",

　　a .关系标识为关系Id ，

　　答。类型为"类型",

　　a .回复用户标识为replyUserId ，

　　姓名为回复用户名，

　　a .家长id为 parentId ，

　　答。内容作为"内容",

　　照片作为照片，

　　一面旗帜为德尔弗拉格，

　　a .创建者作为“创建者”，

　　a .创建日期为"创建日期"

　　/sql

　　sql id=commentJoins

　　左联接sys_user u ON a.user_id=u.id和u.del_flag=0

　　左联接sys _ user r ON a . reply _ user _ id=r . id和r . del _ flag= 0

　　/sql

　　！-保存评论-

　　插入id=保存

　　插入注释（

　　id，

　　用户标识，

　　关系id，

　　类型，

　　回复用户标识，

　　家长id

　　内容，

　　del_flag，

　　创建者，

　　创建日期

　　)值（

　　#{id}，

　　#{userId}，

　　# {关系Id}，

　　#{type}，

　　#{replyUserId}，

　　#{parentId}，

　　# {内容},

　　#{delFlag}，

　　#{createBy}，

　　# {创建日期}

　　)

　　/插入

　　结果映射id= commentResultMap type= com。哈维。实体。评论

　　编号列=id 属性=id /

　　结果列=用户标识属性=userId /

　　结果列=用户名属性=用户名/

　　结果列=关系Id 属性=关系Id /

　　结果列=类型属性=type /

　　结果列=replyUserId 属性=replyUserId /

　　结果列=回复用户名属性=replyUserName /

　　结果列=parentId 属性=parentId /

　　结果列=内容属性=内容/

　　类型为“com”的集合属性=“children”列=“{ parentId=id }”select=“select by parentId”。哈维。注释/

　　/结果映射

　　！-根据关联编号获取评论信息-

　　select id=查找列表结果映射= commentResultMap

　　挑选

　　include refid=commentColumns/

　　从

　　评论a

　　include refid=commentJoins/

　　在哪里

　　a.relation_id=#{relationId}

　　和a.type=#{type}

　　并且a.parent_id=0

　　以.排序

　　答。创建日期表名

　　/选择

　　！-根据编号获取子评论内容-

　　select id= selectByParentId resultType= com。哈维。实体。评论

　　挑选

　　include refid=commentColumns/

　　从

　　评论a

　　include refid=commentJoins/

　　在哪里

　　a.parent_id=#{parentId}

　　以.排序

　　答。创建日期表名

　　/选择

前端

　　把评论抽成组件，方便其他模块引用

　　！-评论模块-

　　模板

　　埃尔抽屉

　　title=评论

　　:visible.sync=drawer

　　方向=rtl

　　:before-close=handleClose

　　:modal=false

　　:withHeader=true

　　@open=getCommentList

　　@close=close

　　size= 320px像素

　　div class=容器

　　div class= write-reply @ click= showCommentInputMajor()

　　div style= margin-top:10px；

　　埃尔输入

　　 class=灰色-背景-输入

　　v-model=majorComment

　　type=textarea

　　:rows=3

　　自（动)调焦装置

　　占位符=写下你的评论

　　/el-input

　　div style= text-align:right；上边距：10px

　　埃尔按钮@ click= reset size= small 圆形重置/el-button

　　埃尔按钮

　　type=primary

　　圆形物

　　@click=commitMajorComment

　　大小=小

　　确定/el-button

　　/div

　　注释列表中的项目:key= item。id

　　div class=info

　　图片

　　《阿凡达》

　　:src=fileUrl item.photo

　　宽度=36

　　高度=36

　　div class=右

　　div class= name"{ item。用户名} }/div

　　div class= date " { format date(item。创建日期)} }/div

　　/div

　　div class= content"{ item。content } }/div

　　div class=控制

　　！-跨度

　　喜欢

　　:class="{ active:item。就是喜欢}”

　　@click=likeClick(item)

　　i class=iconfont icon-like/i

　　span class= like-num { 0

　　item.likeNum 0？ item.likeNum 人赞 : 赞

　　} span

　　/span -

　　跨度

　　评论-回复

　　@click=showCommentInput(item，item， major )

　　I class= icon font icon-icon comment /I

　　跨度回复/span

　　/span

　　/div

　　div class=回复

　　div class= item v-for=在项目中回复。 children :key=回复。id

　　div class=回复内容

　　span class= from-name 回复。用户名} }/span

　　span: /span

　　span class= to-name @ { { reply。回复用户名} }/span

　　span {回复。content } }/span

　　/div

　　div class=回复-底部

　　span { {格式化日期(回复。创建日期)} }/span

　　跨度

　　 class=回复文本

　　@click=showCommentInput(item，reply， child )

　　I class= icon font icon-icon comment /I

　　跨度回复/span

　　/span

　　/div

　　过渡名称=淡化

　　v-if=showItemId===item.id

　　el-tag

　　type=info

　　效果=黑暗

　　v-if=inputLabel！=未定义的输入标签

　　{{输入标签}}/el标签

　　埃尔输入

　　 class=灰色-背景-输入

　　v-model=inputComment

　　type=textarea

　　:rows=3

　　自（动)调焦装置

　　占位符=写下你的评论

　　/el-input

　　 BTN-控制

　　埃尔按钮@ click= cancel size= small round取消/el-button

　　埃尔按钮

　　type=primary

　　圆形物

　　@click=commitComment

　　大小=小

　　确定/el-button

　　/div

　　/过渡

　　/div

　　/El-抽屉

　　/模板

　　脚本

　　从" @/api/comment-api "导入*作为commentApi

　　从" @/实用工具/日期实用工具"导入{日期实用程序}；

　　从" @/utils/UserUtils "导入{用户实用工具}；

　　导入" @/assets/CSS/icon font/icon font。CSS”；

　　导出默认值{

　　道具：{

　　出票人：{

　　类型：布尔型，

　　必填：真，

　　默认值：错误

　　关系Id: {

　　类型：字符串，

　　必填：真，

　　默认值：""

　　注释类型：{

　　类型：字符串，

　　必填：真，

　　默认值：""

　　}

　　data() {

　　返回{

　　文件URL:进程。环境。vue _ APP _ FD FST _ FILE _ URL，

　　评论列表：[],

　　输入注释："",

　　showItemId: ，

　　replyUserId: ，

　　parentId:" "，

　　userInfo:用户util。getuserbystorage()，

　　输入标签:"",

　　主要注释：""

　　};

　　方法：{

　　格式化日期(日期){

　　return DateUtil.formatDate(date， yyyy-MM-DD hh:MM )；

　　手柄关闭（完成){

　　done()；

　　/**

　　* 点赞

　　/* likeClick(项目){

　　if (item.isLike===null) {

　　item.likeNum

　　}否则{

　　if (item.isLike) {

　　项目。像num-；

　　}否则{

　　item.likeNum

　　}

　　item.isLike=！项目。就是喜欢；

　　}

　　}, */

　　//获取评论内容

　　getCommentList() {

　　注释API。查找列表(这个。关系id，this.commentType).然后(res={

　　这个。注释列表=RES . data

　　});

　　/**

　　* 点击取消按钮

　　取消(){

　　这个。show itemid=

　　/**

　　* 提交评论

　　commitComment() {

　　//封装参数

　　让param={

　　userId: this.userInfo.userId，

　　relationId: this.relationId，

　　类型：this.commentType，

　　replyUserId: this.replyUserId，

　　parentId: this.parentId，

　　内容：这个。投入注释

　　};

　　评论tapi。保存注释(参数).然后(res={

　　if (res.success) {

　　这个消息({

　　消息：评论成功，

　　类型："成功"

　　});

　　这个。getcommentlist()；

　　这个。输入注释=" "；

　　}否则{

　　这个message.error(评论失败);

　　}

　　});

　　/**

　　* 提交评论

　　commitmajorgeoint(){

　　//封装参数

　　让param={

　　userId: this.userInfo.userId，

　　relationId: this.relationId，

　　类型：this.commentType，

　　replyUserId: this.replyUserId，

　　parentId: this.parentId，

　　内容：this.majorComment

　　};

　　评论tapi。保存注释(参数).然后(res={

　　if (res.success) {

　　这个消息({

　　消息：评论成功，

　　类型："成功"

　　});

　　这个。getcommentlist()；

　　这个。主要评论=" "；

　　}否则{

　　这个message.error(评论失败);

　　}

　　});

　　/**

　　* 点击评论按钮显示输入框

　　*项目：当前大评论

　　*回复：当前回复的评论

　　showCommentInput(项目，回复，类型){

　　如果（回复){

　　这个。输入label= @ 回复。用户名“”；

　　if (type===major) {

　　这个。parentid=回复。id；

　　}

　　if (type===child) {

　　这个。parentid=回复。parentid

　　}

　　这个。回复userid=回复。userid

　　调试器；

　　}否则{

　　这个。输入标签=" "；

　　这个。parentid=" 0

　　这个。回复userid=

　　}

　　这个。输入注释=" "；

　　这个。显示itemid=item。id；

　　showCommentInputMajor() {

　　这个。输入标签=" "；

　　这个。parentid=" 0

　　这个。回复userid=

　　重置(){

　　这个。输入注释=" "；

　　这个。主要评论=" "；

　　close() {

　　这个. emit(commentClose ， 0 )；

　　}

　　};

　　/脚本

　　样式范围语言=少

　　/深/。el-drawer__body {

　　溢出：自动；

　　}

　　/深/。el-drawer__header span:focus {

　　大纲：0!重要；

　　}。容器{

　　填充：0 10px

　　框大小：边框-框；评论{

　　显示器：flex

　　伸缩方向：列；

　　填充：10px

　　边框-底部：1px solid # f2f 6 fc。信息{

　　显示器：flex

　　对齐-项目：居中；头像{

　　边界半径：50%;

　　}。右{

　　显示器：flex

　　伸缩方向：列；

　　左边距：10px。名称{

　　字体大小：16px

　　颜色：# 303133;

　　边距-底部：5px

　　字体粗细：500;

　　}。日期{

　　字体大小：12px

　　颜色：# 909399;

　　}

　　}。内容{

　　字体大小：16px

　　颜色：# 303133;

　　行高：20px

　　填充：10px 0；

　　}。控制{

　　显示器：flex

　　对齐-项目：居中；

　　字体大小：14px

　　颜色：# 909399;喜欢{

　　显示器：flex

　　对齐-项目：居中；

　　右边距：20px

　　光标：指针；活跃，

　　：悬停{

　　颜色：# 409eff

　　}。iconfont {

　　字体大小：14px

　　右边距：5px

　　}

　　}。评论-回复{

　　显示器：flex

　　对齐-项目：居中；

　　光标：指针；

　　：悬停{

　　颜色：# 333;

　　}。iconfont {

　　字体大小：16px

　　右边距：5px

　　margin-top:4px；

　　}

　　}。回复{

　　边距：10px 0；

　　border-left:2px solid # DCD Fe 6；项目{

　　边距：0 10px

　　填充：10px 0；

　　底部边框：1px虚线# ebeef5。回复-内容{

　　显示器：flex

　　对齐-项目：居中；

　　字体大小：14px

　　颜色：# 303133;发件人姓名{

　　颜色：# 409eff

　　}。收件人姓名{

　　颜色：# 409eff

　　左边距：5px

　　右边距：5px

　　}

　　}。回复-底部{

　　显示器：flex

　　对齐-项目：居中；

　　边距-顶部：6px

　　字体大小：12px

　　颜色：# 909399;回复文本{

　　显示器：flex

　　对齐-项目：居中；

　　左边距：10px

　　光标：指针；

　　：悬停{

　　颜色：# 333;

　　}。图标-图标注释{

　　右边距：5px

　　margin-top:4px；

　　字体大小：13px

　　}

　　}。写-回复{

　　显示器：flex

　　对齐-项目：居中；

　　字体大小：14px

　　颜色：# 909399;

　　填充：10px

　　光标：指针；

　　：悬停{

　　颜色：# 303133;

　　}。埃尔-图标-编辑{

　　右边距：5px

　　}

　　}。淡入激活，

　　淡化-保持活动状态{

　　过渡：不透明度0.5s

　　}。淡入，淡出-离开至{

　　不透明度：0;

　　}。输入包装器{

　　填充：10px。灰色-背景-输入，埃尔输入_ _内部{

　　/*背景色：# 67C23A*/

　　}。BTN-控制{

　　显示器：flex

　　justify-content:flex-end；

　　对齐-项目：居中；

　　填充顶部：10px。取消{

　　字体大小：16px

　　颜色：# 606266;

　　右边距：20px

　　光标：指针；

　　：悬停{

　　颜色：# 333;

　　}

　　}。确认{

　　字体大小：16px

　　}

　　/风格

　　其他模块引用该评论组件

　　模板

　　:关系id= KPI性能。id

　　:commentType=1

　　：抽屉=isComment

　　@commentClose=commentClick(0 )

　　/评论

　　/模板

　　脚本

　　从" @/组件/注释"导入注释；

　　导出默认值{

　　组件：{

　　}

　　/脚本

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

背景

后台

前端

相关文章阅读