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

Just look at the front end

API

The SRC \ API \ modify post. Js

//
export function getRecommendTopics(id) {
  return request({
    url: '/post/recommend'.method: 'get'.params: {
      topicId: id
    }
  })
}
Copy the code

Recommend.vue

SRC \ views \ post \ new how vue

<template> <el-card class="" shadow="never"> <div slot="header"> <span class="has-text-weight-bold">🧐 </div> <div> <p v-for="(item,index) in recommend" :key="index" :title="item.title" class="block ellipsis is-ellipsis-1">  <router-link :to="{name:'post-detail',params: { id: item.id }}"> <span v-if="index<9" class="tag"> 0{{ parseInt(index) + 1 }} </span> <span v-else class="tag"> {{ parseInt(index) + 1 }} </span> {{ item.title }} </router-link> </p> </div> </el-card> </template> <script> import { getRecommendTopics } from '@/api/post' export default { name: 'Recommend', props: { topicId: { type: String, default: null } }, data() { return { recommend: [] } }, created() { this.fetchRecommendTopics() }, methods: { fetchRecommendTopics() { getRecommendTopics(this.topicId).then(value => { const { data } = value this.recommend = data  }) } } } </script> <style scoped> </style>Copy the code

Modify the Detail. Vue

src\views\post\Detail.vue

Take a look at the back end

BmsPostController

/** * have a look **@param id
 * @return* /
@GetMapping("/recommend")
public ApiResult getRecommend(@RequestParam("topicId") String id) {
    List<BmsPost> topics = postService.getRecommend(id);
    return ApiResult.success(topics);
}
Copy the code
<select id="getRecommend" resultType="com.notepad.blog.domain.BmsPost">SELECT t.id,t.title FROM bms_post t WHERE t.id ! = #{id} ORDER BY RAND(), t.`view` LIMIT 6</select>
Copy the code