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

Promotion information backend implementation

1. The entity class

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;
import java.io.Serializable;

@Data
@TableName("bms_promotion")
@Accessors(chain = true)
public class BmsPromotion implements Serializable {

    private static final long serialVersionUID = 1L;

    /** * primary key */
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;

    /** * AD title */
    @TableField("title")
    private String title;

    /** ** AD link */
    @TableField("link")
    private String link;

    /** ** Indicates */
    @TableField("`description`")
    private String description;

    public BmsPromotion(a) {}}Copy the code

2. Mapper interfaces

public interface BmsPromotionMapper extends BaseMapper<BmsPromotion> {}Copy the code

3.service

@Service
public class BmsPromotionService extends ServiceImpl<BmsPromotionMapper.BmsPromotion> {}Copy the code

4.controller

@RestController
@RequestMapping("/promotion")
public class BmsPromotionController {

    @Autowired
    private BmsPromotionService promotionService;

    @GetMapping("/list")
    public ApiResult getPromotionList(a){
        List<BmsPromotion> list = promotionService.list();
        returnApiResult.success(list); }}Copy the code

Promotion information front-end implementation

1.Create promotion.js in SRC/API /

import request from '@/utils/request'

export function getPromotionList() {
    return request({
        url: '/promotion/list'.method: 'get'})}Copy the code

2. Modify the views \ card \ Promotion vue

<template> <div> <el-card class="box-card" shodow="never"> <div slot="header"> <span> Promotion information </span> </div> <p v-for="(item,index) in list" :key="index" class="block"> <a :href="item.link" target="_blank">{{ item.title }}</a> </p> </el-card> </div> </template> <script> import { getPromotionList } from "@/api/promotion"; export default { name: "Promotion", data() { return { list: [] }; }, created() { this.fetchList(); }, methods: { fetchList() { getPromotionList().then(response => { const { data } = response; this.list = data; }); }}}; </script>Copy the code

3. Test the page