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 feature list front end
Date formatting
yarn add date-fns
Copy the code
use
API
The SRC \ API \ create comment. Js
import request from '@/utils/request'
export function fetchCommentsByTopicId(topic_Id) {
return request({
url: '/comment/get_comments'.method: 'get'.params: {
topicid: topic_Id
}
})
}
export function pushComment(data) {
return request({
url: '/comment/add_comment'.method: 'post'.data: data
})
}
Copy the code
Create components
1. Create the Comment SRC \ components \ \ Comments vue
<template> <section class="box comments"> <hr /> <h3 class="title is-5">Comments</h3> <lv-comments-item v-for="comment in comments" :key="`comment-${comment.id}`" :comment="comment" /> </section> </template> <script> import { mapGetters } from 'vuex' import { fetchCommentsByTopicId } from '@/api/comment' import LvCommentsItem from './CommentsItem' export default { name: 'LvComments', components: { LvCommentsItem }, data() { return { comments: [] } }, props: { slug: { type: String, default: null } }, computed: { ... mapGetters([ 'token' ]) }, async mounted() { await this.fetchComments(this.slug) }, methods: {// Initialize async fetchComments(topic_id) {console.log(topic_id) fetchCommentsByTopicId(topic_id).then(response => {const { data } = response this.comments = data }) } } } </script>Copy the code
2. The SRC/components/Comment/create CommentsItem. Vue
<template> <article class="media"> <figure class="media-left image is-48x48"> <img :src="`https://cn.gravatar.com/avatar/${comment.userId}?s=164&d=monsterid`"> </figure> <div class="media-content"> <div class="content"> <p> <strong>{{ comment.username }}</strong> <small class="ml-2">{{ comment.createTime | date }}</small> <br /> {{ comment.content }} </p> </div> </div> </article> </template> <script> export default { name: 'LvCommentsItem', props: { comment: { type: Object, required: true } } } </script>Copy the code
Modify the Detail. Vue
src\views\post\Detail.vue
Comment feature list backend
VO
@Data
public class CommentVO {
private String id;
private String content;
private String topicId;
private String userId;
private String username;
private Date createTime;
}
Copy the code
BmsComment
import com.baomidou.mybatisplus.annotation.*;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import javax.validation.constraints.NotBlank;
import java.io.Serializable;
import java.util.Date;
@Data
@Builder
@TableName("bms_comment")
@AllArgsConstructor
@NoArgsConstructor
public class BmsComment implements Serializable {
private static final long serialVersionUID = 1L;
/** * primary key */
@TableId(value = "id", type = IdType.ASSIGN_ID)
private String id;
/** ** content */
@notblank (message = "The content must not be empty ")
@TableField(value = "content")
private String content;
/** * author ID */
@TableField("user_id")
private String userId;
/** * topicID */
@TableField("post_id")
private String postId;
/** * create time */
@TableField(value = "create_time", fill = FieldFill.INSERT)
private Date createTime;
/** * Change the time */
@TableField(value = "modify_time", fill = FieldFill.UPDATE)
private Date modifyTime;
}
Copy the code
BmsCommentMapper
public interface BmsCommentMapper extends BaseMapper<BmsComment> {
List<CommentVO> getCommentsByTopicID(String topicid);
}
Copy the code
BmsCommentMapper.xml
<? xml version="1.0" encoding="UTF-8"? > <! DOCTYPE mapper PUBLIC"- / / mybatis.org//DTD Mapper / 3.0 / EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.notepad.blog.mapper.BmsCommentMapper">
<resultMap id="topicVO" type="com.notepad.blog.domain.vo.CommentVO">
<id column="id" property="id"/>
<result column="content" property="content"/>
<result column="user_id" property="userId"/>
<result column="topic_id" property="topicId"/>
<result column="username" property="username"/>
<result column="create_time" property="createTime"/>
</resultMap>
<select id="getCommentsByTopicID" resultMap="topicVO"> select bms_comment.*, ums_user.username from bms_comment join ums_user on ums_user.id = bms_comment.user_id where post_id = #{postId} order by create_time desc </select> </mapper>Copy the code
BmsCommentController
package com.notepad.blog.controller;
import com.notepad.blog.common.api.ApiResult;
import com.notepad.blog.domain.BmsComment;
import com.notepad.blog.domain.UmsUser;
import com.notepad.blog.domain.vo.CommentVO;
import com.notepad.blog.service.BmsCommentService;
import com.notepad.blog.service.UmsUserService;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
@RestController
@RequestMapping("/comment")
public class BmsCommentController {
@Resource
private BmsCommentService commentService;
@Resource
private UmsUserService userService;
/** ** Comment list **@param topicid
* @return* /
@GetMapping("/get_comments")
public ApiResult<List<CommentVO>> getCommentsByTopicID(@RequestParam(value = "topicid", defaultValue = "1") String topicid) {
List<CommentVO> lstBmsComment = commentService.getCommentsByTopicID(topicid);
returnApiResult.success(lstBmsComment); }}Copy the code
BmsCommentService
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.notepad.blog.domain.BmsComment;
import com.notepad.blog.domain.vo.CommentVO;
import com.notepad.blog.mapper.BmsCommentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/ * * *@ClassName BmsCommentService
* @description:
* @author: A grain of wheat *@Date2021/2/13 21:26 * * /
@Service
public class BmsCommentService extends ServiceImpl<BmsCommentMapper.BmsComment> {
@Autowired
private BmsCommentMapper commentMapper;
/** ** Comment list **@param topicid
* @return* /
public List<CommentVO> getCommentsByTopicID(String topicid) {
List<CommentVO> commentVOList = commentMapper.getCommentsByTopicID(topicid);
returncommentVOList; }}Copy the code