SpringBoot+Vue豆宝社区前后端分离手把手项目实战系列教程06---推广信息模块实现-阿里云开发者社区

SpringBoot+Vue豆宝社区前后端分离手把手项目实战系列教程06---推广信息模块实现

2023-05-17 126

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： SpringBoot+Vue豆宝社区前后端分离手把手项目实战系列教程06---推广信息模块实现

豆宝社区项目实战教程简介

本项目实战教程配有免费视频教程，配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目。本项目难度适中，为便于大家学习，每一集视频教程对应在Github上的每一次提交。

项目首页截图

代码开源地址

前端

后端

视频教程地址

视频教程

前端技术栈

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>