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