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

Post list front end

1. Download format time

yarn add dayjs
Copy the code

2. The SRC \ main. Js added

/ / the internationalization
import 'dayjs/locale/zh-cn'
const dayjs = require('dayjs');

// Relative time plugin
dayjs.extend(relativeTime)

dayjs.locale('zh-cn') // use locale globally
dayjs().locale('zh-cn').format() // use locale in a specific instance

Vue.prototype.dayjs = dayjs;Dayjs can be used globally

Vue.filter('date'.(date) = > {
  return format(new Date(date), 'yyyy-MM-dd')})Copy the code

3. New SRC \ API \ post. Js

  
import request from '@/utils/request'

/ / list
export function getList(pageNo, size, tab) {
  return request(({
    url: '/post/list'.method: 'get'.params: { pageNo: pageNo, size: size, tab: tab }
  }))
}
Copy the code

4. Modify the SRC \ views \ post \ index vue

Can be replace

<template> <div> <el-card shadow="never"> <div slot="header" class="clearfix"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label=" latest theme "name="latest"> <article v-for="(item, index) in articleList" :key="index" class="media"> <div class="media-left"> <figure class="image is-48x48"> <img :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=monsterid`" style="border-radius: 5px;" > </figure> </div> <div class="media-content"> <div class=""> <p class="ellipsis is-ellipsis-1"> <el-tooltip class="item" effect="dark" :content="item.title" placement="top"> <router-link :to="{name:'post-detail',params:{id:item.id}}"> <span class="is-size-6">{{ item.title }}</span> </router-link> </el-tooltip> </p> </div> <nav class="level has-text-grey is-mobile is-size-7 mt-2"> <div class="level-left"> <div class="level-left"> <router-link class="level-item" :to="{ path: ` / member / ${item. The username} / home `} "> {{item. Alias}} < / router - the link > < span class =" Mr - 1 "> published in: {{ dayjs(item.createTime).format("YYYY/MM/DD") }} </span> <span v-for="(tag, index) in item.tags" :key="index" class="tag is-hidden-mobile is-success is-light mr-1" > <router-link :to="{ name: 'tag', params: { name: The tag. The name}} "> {{" #" + tag. The name}} < / router - the link > < / span > < span class = "is hidden - mobile" > browse: {{item. View}} < / span > < / div > < / div > < / nav > < / div > < div class = "media - right" / > < / article > < / el - TAB - pane > < el - TAB - pane label = "hot topics" name = "hot" > <article v-for="(item, index) in articleList" :key="index" class="media"> <div class="media-left"> <figure class="image is-48x48"> <img :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=monsterid`" style="border-radius: 5px;" > </figure> </div> <div class="media-content"> <div class=""> <p class="ellipsis is-ellipsis-1"> <el-tooltip class="item" effect="dark" :content="item.title" placement="top"> <router-link :to="{name:'post-detail',params:{id:item.id}}"> <span class="is-size-6">{{ item.title }}</span> </router-link> </el-tooltip> </p> </div> <nav class="level has-text-grey is-mobile is-size-7 mt-2"> <div class="level-left"> <div class="level-left"> <router-link class="level-item" :to="{ path: ` / member / ${item. The username} / home `} "> {{item. Alias}} < / router - the link > < span class =" Mr - 1 "> published in: {{ dayjs(item.createTime).format("YYYY/MM/DD") }} </span> <span v-for="(tag, index) in item.tags" :key="index" class="tag is-hidden-mobile is-success is-light mr-1" > <router-link :to="{ name: 'tag', params: { name: The tag. The name}} "> {{" #" + tag. The name}} < / router - the link > < / span > < span class = "is hidden - mobile" > browse: {{item. View}} < / span > < / div > < / div > < / nav > < / div > < div class = "media - right" / > < / article > < / el - TAB - pane > < el - TAB - pane label = "recent changes" name="udpate"> <article v-for="(item, index) in articleList" :key="index" class="media"> <div class="media-left"> <figure class="image is-48x48"> <img :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=monsterid`" style="border-radius: 5px;" > </figure> </div> <div class="media-content"> <div class=""> <p class="ellipsis is-ellipsis-1"> <el-tooltip class="item" effect="dark" :content="item.title" placement="top"> <router-link :to="{name:'post-detail',params:{id:item.id}}"> <span class="is-size-6">{{ item.title }}</span> </router-link> </el-tooltip> </p> </div> <nav class="level has-text-grey is-mobile is-size-7 mt-2"> <div class="level-left"> <div class="level-left"> <router-link class="level-item" :to="{ path: ` / member / ${item. The username} / home `} "> {{item. Alias}} < / router - the link > < span class =" Mr - 1 "> published in: {{ dayjs(item.createTime).format("YYYY/MM/DD") }} </span> <span v-for="(tag, index) in item.tags" :key="index" class="tag is-hidden-mobile is-success is-light mr-1" > <router-link :to="{ name: 'tag', params: { name: The tag. The name}} "> {{" #" + tag. The name}} < / router - the link > < / span > < span class = "is hidden - mobile" > browse: {{item. View}} < / span > </div> </div> </nav> </div> <div class="media-right" /> </article> </el-tab-pane> </el-tabs> </div> </el-card> </div> </template> <script> import { getList } from '@/api/post' export default { name: "TopicList", data() { return { activeName: 'latest', articleList: [], }; }, created() { this.init(this.tab) }, methods: { init(tab) { getList(1, 10, tab).then((response) => { const { data } = response this.articleList = data.records }) }, handleClick(tab) { this.init(tab.name) } } }; </script>Copy the code