SpringBoot+Vue beanbao community front and back end of the separation project hands-on practice series tutorial 20– new comment function implementation

Bean Treasure community project actual combat tutorial introduction

This project is equipped with a free video tutorial, the supporting code is completely open source. Build from scratch the most widely used Springboot+Vue front-end and back-end separation multi-user community project. This project is of moderate difficulty. For your convenience, each video tutorial will correspond to each submission on Github.

Screenshot of project Home Page

Open source code address

The front end

Video Tutorial Address

Video tutorial

Front-end technology stack

Vue Vuex Vue Router Axios Bulma Buefy Element Vditor DarkReader

Back-end technology stack

Spring Boot Mysql Mybatis MyBatis-Plus Spring Security JWT Lombok

Comments add feature front end

API

src\api\comment.js

export function pushComment(data) {
  return request({
    url: '/comment/add_comment'.method: 'post'.data: data
  })
}
Copy the code

The new page

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(' message.success ')} catch (e) {this.$buefy.toast.open({message: `Cannot comment this story. ${e}`, type: 'is-danger' }) } finally { this.isLoading = false } } } } </script>Copy the code

Modify Comments. Vue

src\components\Comment\Comments.vue

Effect of the page

Comments add functionality back end

DTO

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

    private String topic_id;

    /** ** content */
    private String content;

}
Copy the code

BmsCommentController

/** * add a comment **@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,"User does not exist");
    BmsComment comment = commentService.addComment(dto, umsUser);
    return ApiResult.success(comment);
}
Copy the code

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;
}
Copy the code