SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程20---新增评论功能实现

379 阅读1分钟

豆宝社区项目实战教程简介

本项目实战教程配有免费视频教程,配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目。本项目难度适中,为便于大家学习,每一集视频教程对应在Github上的每一次提交。

项目首页截图

image

代码开源地址

前端 后端

视频教程地址

视频教程

前端技术栈

Vue Vuex Vue Router Axios Bulma Buefy Element Vditor DarkReader

后端技术栈

Spring Boot Mysql Mybatis MyBatis-Plus Spring Security JWT Lombok

评论添加功能前端

API

src\api\comment.js

export function pushComment(data) {
  return request({
    url: '/comment/add_comment',
    method: 'post',
    data: data
  })
}

新增页面

src\components\Comment\CommentsForm.vue

<template>
  <article class="media">
    <div class="media-content">
      <form @submit.prevent="onSubmit">
        <b-field>
          <b-input
            v-model.lazy="commentText"
            type="textarea"
            maxlength="400"
            placeholder="Add a comment..."
            :disabled="isLoading"
          ></b-input>
        </b-field>
        <nav class="level">
          <div class="level-left">
            <b-button
              type="is-primary"
              native-type="submit"
              class="level-item"
              :disabled="isLoading"
            >
              Comment
            </b-button>
          </div>
        </nav>
      </form>
    </div>
  </article>
</template>

<script>
import { pushComment } from '@/api/comment'
export default {
  name: 'LvCommentsForm',
  data() {
    return {
      commentText: '',
      isLoading: false
    }
  },
  props: {
    slug: {
      type: String,
      default: null
    }
  },
  methods: {
    async onSubmit() {
      this.isLoading = true
      try {
        let postData = {}
        console.log(this.commentText)
        postData['content'] = this.commentText
        postData['topic_id'] = this.slug
        await pushComment(postData)
        this.$emit('loadComments', this.slug)
        this.$message.success('留言成功')
      } catch (e) {
        this.$buefy.toast.open({
          message: `Cannot comment this story. ${e}`,
          type: 'is-danger'
        })
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

修改Comments.vue

src\components\Comment\Comments.vue

image-20210213220720012

页面效果

image-20210213220819359

评论添加功能后端

DTO

@Data
public class CommentDTO implements Serializable {
    
    private static final long serialVersionUID = -5957433707110390852L;

    private String topic_id;

    /**
     * 内容
     */
    private String content;

}

BmsCommentController

/**
 * 添加评论
 *
 * @param userName
 * @param dto
 * @return
 */
@PostMapping("/add_comment")
public ApiResult<BmsComment> addComment(@RequestHeader(value = "userName") String userName,
                                         @RequestBody CommentDTO dto) {
    UmsUser umsUser = userService.getOne(new LambdaQueryWrapper<UmsUser>().eq(UmsUser::getUsername,userName));

    Assert.isNull(umsUser,"用户不存在");
    BmsComment comment = commentService.addComment(dto, umsUser);
    return ApiResult.success(comment);
}

BmsCommentService

public BmsComment addComment(CommentDTO dto, UmsUser umsUser) {
    BmsComment comment = BmsComment.builder().userId(umsUser.getId())
            .content(dto.getContent())
            .postId(dto.getTopic_id())
            .createTime(new Date())
            .build();
    this.save(comment);
    return comment;
}