广告-广告管理

广告管理模块功能解析文档

1. 系统架构

广告管理模块采用前后端分离架构，基于Vue 3前端框架和Spring Boot后端框架实现，集成亚马逊广告API，提供完整的广告管理功能。

1.1 技术栈

分类 技术 版本 用途
前端框架 Vue 3.x 构建用户界面，使用Composition API
前端UI库 Element Plus 最新版 提供组件库和样式
数据可视化 ECharts 最新版 展示广告数据图表
HTTP客户端 Axios 最新版 与后端API通信
状态管理 Vuex 4.x 管理全局状态
后端框架 Spring Boot 2.x 构建RESTful API
ORM框架 MyBatis Plus 最新版 数据库操作
亚马逊API Amazon Advertising API 最新版 与亚马逊广告平台交互
数据库 MySQL 5.7+ 存储广告数据和配置

1.2 架构分层

前端架构

后端架构

1.3 核心流程图

sequenceDiagram
    participant Frontend as 前端
    participant Backend as 后端API
    participant AmazonAPI as 亚马逊广告API
    participant DB as 数据库

    Frontend->>Backend: 请求广告活动列表
    Backend->>DB: 查询广告配置
    Backend->>AmazonAPI: 调用ListCampaigns接口
    AmazonAPI-->>Backend: 返回广告活动数据
    Backend->>DB: 存储/更新广告数据
    Backend-->>Frontend: 返回处理后的数据
    Frontend->>Frontend: 渲染广告活动列表

    Frontend->>Backend: 创建新广告活动
    Backend->>AmazonAPI: 调用CreateCampaigns接口
    AmazonAPI-->>Backend: 返回创建结果
    Backend->>DB: 存储新广告活动信息
    Backend-->>Frontend: 返回创建结果

2. 前端实现

2.1 主组件结构

广告管理模块的主组件是 index.vue，采用左右分栏布局：

2.2 组件分类

根据广告类型，前端组件分为三大类：

SP广告组件 (Sponsored Products)

SB广告组件 (Sponsored Brands)

SD广告组件 (Sponsored Display)

2.3 核心功能实现

2.3.1 广告树结构

广告树组件 ad_tree.vue 实现了广告账户、广告活动、广告组的层级展示：

// 核心逻辑：构建广告树数据结构
function buildAdTree(data) {
  // 构建账户节点
  // 构建广告活动节点
  // 构建广告组节点
  return treeData;
}

// 节点点击事件
function handleNodeClick(data) {
  // 发送数据到父组件
  emit('change', data);
}

2.3.2 标签页管理

根据广告类型和操作对象，动态生成标签页：

// 标签页数据
const tabsDataValue = [
  {name: '广告活动', value: 'adcams', count: ''},
  {name: '广告组', value: 'adgroups', count: ''},
  {name: '商品', value: 'ProductAds', count: ''},
  {name: '关键词', value: 'adkey', count: ''},
  // 其他标签页...
];

// 根据广告类型过滤标签页
function getTabs(filterTabs) {
  var list = [];
  state.tabsDataValue.forEach(item => {
    if(filterTabs.includes(item.value)) {
      // 特殊处理SB广告的"广告"标签
      if(item.value == "ProductAds" && state.queryParams.campaignType == "SB") {
        item.name = "广告";
      }
      list.push(item);
    }
  });
  return list;
}

2.3.3 数据加载与展示

根据当前选择的标签页和广告类型，加载对应数据：

function handleQuery() {
  state.queryParams.ftype = state.activeName;
  var activeName = state.activeName;
  if(state.queryParams.profileid) {
    nextTick(() => {
      if(state.queryParams.campaignType == "SP") {
        if(activeName == 'adcams') {
          spListCampaignsRef.value.show(state.queryParams);
        }
        // 其他标签页...
      }
      // SB和SD广告类型的处理...
    });
  }
}

2.4 API调用

前端通过封装的API模块与后端通信：

广告管理API

// advertApi.js
export default {
  loadProfile,          // 加载广告配置文件
  addSerchHistory,      // 添加搜索历史
  getSerchHistory,      // 获取搜索历史
  deleteSerchHistory,   // 删除搜索历史
  loadCampaignsNotArchived, // 加载未归档的广告活动
  findPortfoliosForProfileId, // 查找广告组合
  getallsumtype,        // 获取所有汇总类型
  saleorder,            // 销售订单数据
  cpcdata,              // CPC数据
};

广告活动API

// advCampaignApi.js
export default {
  getCampaignList,      // 获取广告活动列表
  getCampaignSummary,   // 获取广告活动汇总
  getCampaignChart,     // 获取广告活动图表数据
  // 其他方法...
};

3. 后端实现

3.1 控制器

广告活动控制器

AdvertCampaignManagerController.java 负责处理广告活动相关的API请求：

@Api(tags = "广告活动接口")
@RestController 
@RequestMapping("/api/v1/advCampaignManager") 
public class AdvertCampaignManagerController {
    
    @Resource
    IAmzAdvCampaignService amzAdvCampaignService;
    
    @Resource 
    IAmzAdvCampaignsSDService amzAdvCampaignsSDService;
    
    @Resource
    IAmzAdvCampaignHsaService amzAdvCampaignHsaService;
    
    // 获取广告活动列表
    @PostMapping("/getCampaignList")
    public Result<List<Map<String, Object>>> getCampaignListAction(@RequestBody QueryForList query) {
        // 实现逻辑
    }
    
    // 创建广告活动
    @PostMapping("/createCampaign")
    public Result<Map<String, Object>> createCampaignAction(@RequestBody JSONObject param) {
        // 实现逻辑
    }
    
    // 更新广告活动
    @PostMapping("/updateCampaign")
    public Result<Map<String, Object>> updateCampaignAction(@RequestBody JSONObject param) {
        // 实现逻辑
    }
    
    // 其他方法...
}

广告组控制器

AdvertAdgroupManagerController.java 负责处理广告组相关的API请求：

@Api(tags = "广告组接口")
@RestController 
@RequestMapping("/api/v1/advAdgroupManager") 
public class AdvertAdgroupManagerController {
    
    @Resource
    IAmzAdvAdGroupService amzAdvAdGroupService;
    
    @Resource 
    IAmzAdvAdgroupsSDService amzAdvAdgroupsSDService;
    
    @Resource
    IAmzAdvAdgroupsHsaService amzAdvAdgroupsHsaService;
    
    // 获取广告组列表
    @PostMapping("/getAdgroupList")
    public Result<List<Map<String, Object>>> getAdgroupListAction(@RequestBody QueryForList query) {
        // 实现逻辑
    }
    
    // 创建广告组
    @PostMapping("/createAdgroup")
    public Result<Map<String, Object>> createAdgroupAction(@RequestBody JSONObject param) {
        // 实现逻辑
    }
    
    // 其他方法...
}

3.2 服务层

广告活动服务

AmzAdvCampaignServiceImpl.java 实现了广告活动的核心业务逻辑：

@Service
public class AmzAdvCampaignServiceImpl implements IAmzAdvCampaignService {
    
    @Autowired
    AmzAdvCampaignsMapper amzAdvCampaignsMapper;
    
    @Autowired
    IAmzAdvAuthService amzAdvAuthService;
    
    // 创建广告活动
    @Override
    public Map<String, Object> amzCreateCampaigns(AmzAdvProfile profile, List<AmzAdvCampaigns> campaigns) {
        // 实现逻辑：调用亚马逊API创建广告活动
    }
    
    // 更新广告活动
    @Override
    public Map<String, Object> amzUpdateSpCampaigns(AmzAdvProfile profile, List<AmzAdvCampaigns> campaigns) {
        // 实现逻辑：调用亚马逊API更新广告活动
    }
    
    // 获取广告活动图表数据
    @Override
    public Map<String, Object> getCampaignChart(AmzAdvProfile profile, Map<String, Object> param) {
        // 实现逻辑：生成图表数据
    }
    
    // 其他方法...
}

广告组服务

AmzAdvAdGroupServiceImpl.java 实现了广告组的核心业务逻辑：

@Service
public class AmzAdvAdGroupServiceImpl implements IAmzAdvAdGroupService {
    
    @Autowired
    AmzAdvAdgroupsMapper amzAdvAdgroupsMapper;
    
    @Autowired
    IAmzAdvAuthService amzAdvAuthService;
    
    // 创建广告组
    @Override
    public Map<String, Object> amzCreateAdGroups(AmzAdvProfile profile, List<AmzAdvAdgroups> adgroups) {
        // 实现逻辑：调用亚马逊API创建广告组
    }
    
    // 更新广告组
    @Override
    public Map<String, Object> amzUpdateAdGroups(AmzAdvProfile profile, List<AmzAdvAdgroups> adgroups) {
        // 实现逻辑：调用亚马逊API更新广告组
    }
    
    // 其他方法...
}

3.3 数据模型

广告活动模型

public class AmzAdvCampaigns {
    private String campaignId;
    private String campaignName;
    private String campaignType;
    private String targetingType;
    private BigDecimal dailyBudget;
    private String state;
    private String startDate;
    private String endDate;
    private String biddingStrategy;
    // 其他字段...
    // getter和setter方法...
}

广告组模型

public class AmzAdvAdgroups {
    private String adGroupId;
    private String campaignId;
    private String name;
    private BigDecimal defaultBid;
    private String state;
    // 其他字段...
    // getter和setter方法...
}

3.4 亚马逊API集成

后端通过封装的客户端与亚马逊广告API交互：

public class AmazonAdvertisingAPIClient {
    
    private String accessToken;
    private String endpoint;
    private String profileId;
    
    // 调用ListCampaigns接口
    public List<Campaign> listCampaigns() {
        // 实现逻辑：构建请求，发送到亚马逊API，处理响应
    }
    
    // 调用CreateCampaigns接口
    public List<CampaignResponse> createCampaigns(List<Campaign> campaigns) {
        // 实现逻辑：构建请求，发送到亚马逊API，处理响应
    }
    
    // 其他API方法...
}

4. 核心功能分析

4.1 广告活动管理

功能描述

实现逻辑

  1. 前端发送创建广告活动请求
  2. 后端接收请求，验证参数
  3. 后端调用亚马逊API创建广告活动
  4. 后端存储广告活动信息到数据库
  5. 后端返回创建结果给前端
  6. 前端更新界面，显示新广告活动

关键代码

前端创建广告活动：

function createCampaign() {
  // 验证表单
  // 构建请求参数
  advCampaignApi.createCampaign(params).then(res => {
    if(res.code == 200) {
      ElMessage.success('创建成功');
      // 刷新广告活动列表
    } else {
      ElMessage.error('创建失败：' + res.msg);
    }
  });
}

后端处理创建请求：

@Override
public Map<String, Object> amzCreateCampaigns(AmzAdvProfile profile, List<AmzAdvCampaigns> campaigns) {
  // 构建亚马逊API请求
  // 调用API
  // 处理响应
  // 存储数据
  // 返回结果
}

4.2 广告组管理

功能描述

实现逻辑

  1. 前端选择广告活动，点击"创建广告组"
  2. 前端填写广告组信息，提交表单
  3. 后端接收请求，验证参数
  4. 后端调用亚马逊API创建广告组
  5. 后端存储广告组信息到数据库
  6. 后端返回创建结果给前端
  7. 前端更新界面，显示新广告组

4.3 商品广告管理

功能描述

实现逻辑

  1. 前端选择广告组，点击"添加商品"
  2. 前端选择要推广的商品，设置出价
  3. 后端接收请求，验证参数
  4. 后端调用亚马逊API创建商品广告
  5. 后端存储商品广告信息到数据库
  6. 后端返回创建结果给前端
  7. 前端更新界面，显示新商品广告

4.4 关键词管理

功能描述

实现逻辑

  1. 前端选择广告组，点击"添加关键词"
  2. 前端输入关键词，设置匹配类型和出价
  3. 后端接收请求，验证参数
  4. 后端调用亚马逊API创建关键词
  5. 后端存储关键词信息到数据库
  6. 后端返回创建结果给前端
  7. 前端更新界面，显示新关键词

4.5 定向管理

功能描述

实现逻辑

  1. 前端选择广告组，点击"添加定向"
  2. 前端选择定向类型，设置定向条件和出价
  3. 后端接收请求，验证参数
  4. 后端调用亚马逊API创建定向
  5. 后端存储定向信息到数据库
  6. 后端返回创建结果给前端
  7. 前端更新界面，显示新定向

4.6 数据报表与分析

功能描述

实现逻辑

  1. 前端选择时间范围和数据类型
  2. 前端发送数据请求
  3. 后端接收请求，查询数据库
  4. 后端处理数据，计算指标
  5. 后端返回处理后的数据
  6. 前端使用ECharts渲染图表
  7. 前端展示数据表格

5. 技术亮点

5.1 组件化设计

5.2 批量操作优化

5.3 数据可视化

5.4 智能优化

5.5 性能优化

6. 数据安全

6.1 权限控制

6.2 数据加密

6.3 防滥用措施

7. 扩展性分析

7.1 模块扩展

7.2 技术扩展

7.3 功能扩展

8. 代码优化建议

8.1 前端优化

  1. 组件拆分：将大型组件进一步拆分为更小的、可复用的组件
  2. 状态管理优化：使用Pinia替代Vuex，简化状态管理
  3. API请求优化：使用请求缓存和防抖节流，减少API调用
  4. 代码分割：使用动态导入实现代码分割，减少初始加载时间
  5. 类型定义：使用TypeScript，提高代码类型安全性

8.2 后端优化

  1. 缓存策略：优化缓存策略，减少数据库查询和API调用
  2. 异步处理：使用消息队列处理耗时操作，提高系统响应速度
  3. 数据库优化：优化数据库查询，添加适当的索引
  4. API设计：优化API设计，减少冗余接口
  5. 错误处理：完善错误处理机制，提高系统可靠性

8.3 性能优化

  1. 前端性能：优化前端渲染性能，减少重绘和回流
  2. 后端性能：优化后端代码，提高处理速度
  3. 数据库性能：优化数据库结构和查询，提高数据访问速度
  4. 网络性能：优化网络传输，减少数据传输量
  5. 系统架构：优化系统架构，提高整体性能

9. 总结

广告管理模块是Wimoor系统中一个功能强大、设计合理的核心模块，它通过集成亚马逊广告API，为用户提供了完整的广告管理功能。该模块采用前后端分离架构，使用Vue 3和Spring Boot等现代技术栈，实现了广告活动、广告组、商品广告、关键词、定向等的全生命周期管理。

9.1 核心价值

9.2 技术创新

9.3 未来发展

广告管理模块的设计和实现体现了现代软件架构的最佳实践，为用户提供了专业、高效、智能的广告管理解决方案。通过不断的技术创新和功能扩展，该模块将继续为用户创造更大的价值。

版本号 #1
由 Admin 创建于 2026-01-28 18:46:42 CST
由 Admin 更新于 2026-01-28 18:47:05 CST