豆宝社区项目实战教程简介
本项目实战教程配有免费视频教程，配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目。本项目难度适中，为便于大家学习，每一集视频教程对应在Github上的每一次提交。
项目首页截图
image
代码开源地址
视频教程地址
前端技术栈
Vue
Vuex
Vue Router
Axios
Bulma
Buefy
Element
Vditor
DarkReader
后端技术栈
Spring Boot
Mysql
Mybatis
MyBatis-Plus
Spring Security
JWT
Lombok
推广信息后端实现
1.实体类
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;
/**
* 主键
*/
@TableId(value = "id", type = IdType.AUTO)
private Integer id;
/**
* 广告标题
*/
@TableField("title")
private String title;
/**
* 广告链接
*/
@TableField("link")
private String link;
/**
* 说明
*/
@TableField("`description`")
private String description;
public BmsPromotion() {
}
}
2.mapper接口
public interface BmsPromotionMapper extends BaseMapper<BmsPromotion> {
}
3.service
@Service
public class BmsPromotionService extends ServiceImpl<BmsPromotionMapper, BmsPromotion> {
}
4.controller
@RestController
@RequestMapping("/promotion")
public class BmsPromotionController {
@Autowired
private BmsPromotionService promotionService;
@GetMapping("/list")
public ApiResult getPromotionList(){
List<BmsPromotion> list = promotionService.list();
return ApiResult.success(list);
}
}
推广信息前端实现
1.在src/api/创建promotion.js
import request from '@/utils/request'
export function getPromotionList() {
return request({
url: '/promotion/list',
method: 'get'
})
}
2.修改views\card\Promotion.vue
<template>
<div>
<el-card class="box-card" shodow="never">
<div slot="header">
<span>推广信息</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>
3.测试页面
image-20210211225450168
