豆宝社区项目实战教程简介
本项目实战教程配有免费视频教程,配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目。本项目难度适中,为便于大家学习,每一集视频教程对应在Github上的每一次提交。
项目首页截图
代码开源地址
视频教程地址
前端技术栈
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
页面效果
评论添加功能后端
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;
}