豆寶社區(qū)項(xiàng)目實(shí)戰(zhàn)教程簡(jiǎn)介
本項(xiàng)目實(shí)戰(zhàn)教程配有免費(fèi)視頻教程躲叼，配套代碼完全開(kāi)源垂睬。手把手從零開(kāi)始搭建一個(gè)目前應(yīng)用最廣泛的Springboot+Vue前后端分離多用戶(hù)社區(qū)項(xiàng)目独泞。本項(xiàng)目難度適中碱鳞，為便于大家學(xué)習(xí)妹笆，每一集視頻教程對(duì)應(yīng)在Github上的每一次提交勃黍。
項(xiàng)目首頁(yè)截圖
image
代碼開(kāi)源地址
視頻教程地址
前端技術(shù)棧
Vue
Vuex
Vue Router
Axios
Bulma
Buefy
Element
Vditor
DarkReader
后端技術(shù)棧
Spring Boot
Mysql
Mybatis
MyBatis-Plus
Spring Security
JWT
Lombok
推廣信息后端實(shí)現(xiàn)
1.實(shí)體類(lèi)
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;
/**
* 廣告標(biāo)題
*/
@TableField("title")
private String title;
/**
* 廣告鏈接
*/
@TableField("link")
private String link;
/**
* 說(shuō)明
*/
@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);
}
}
推廣信息前端實(shí)現(xiàn)
1.在src/api/創(chuàng)建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.測(cè)試頁(yè)面
image-20210211225450168
