摘要
随着互联网广告行业的快速发展，广告主对广告投放的精准性、实时性和管理效率提出了更高要求。传统的人工管理方式已难以应对海量广告数据与多平台投放需求。本文设计并实现了一个基于Spring Boot和Vue的广告管理系统，系统采用前后端分离架构，后端使用Spring Boot提供RESTful API，前端使用Vue.js构建交互界面，数据库采用MySQL，并可选集成Redis缓存。系统实现了广告位管理、广告内容管理、投放计划、数据统计等核心功能，为中小型企业提供了一套高效、可扩展的广告管理解决方案。本文详细阐述了系统的需求分析、技术选型、数据库设计、功能实现及测试过程，并了开发过程中的关键技术与经验。
关键词： 广告管理系统；Spring Boot；Vue；MySQL；前后端分离
1. 引言
1.1 研究背景与意义
互联网广告已成为企业营销的重要手段。据统计，2023年中国互联网广告市场规模超过5000亿元，广告形式包括展示广告、搜索广告、信息流广告等。面对复杂的广告投放环境，广告主需要一套能够统一管理广告资源、监控投放效果、优化投放策略的系统。现有的广告管理系统往往价格昂贵或功能冗余，不适合中小型企业或个人开发者使用。因此，开发一款轻量级、易扩展、技术栈主流的广告管理系统具有实际应用价值。
1.2 国内外研究现状
国外广告管理系统如Google Ads、Facebook Ads Manager功能强大但封闭且费用高；国内如百度营销、腾讯广告平台同样面向大型广告主。开源广告管理系统如OpenX、Revive Adserver虽功能完善，但技术栈较旧，二次开发难度大。基于现代Java生态的广告管理系统较少，尤其结合Spring Boot和Vue的更是稀缺。
1.3 论文主要工作
本文的主要工作包括：
- 分析广告管理系统的功能需求与非功能需求；
- 设计基于Spring Boot + Vue的前后端分离架构；
- 实现广告位、广告、投放计划、数据统计等模块；
- 对系统进行功能测试与性能测试；
- 开发经验并展望未来改进方向。
2. 相关技术介绍
2.1 Spring Boot
Spring Boot是Spring框架的扩展，旨在简化Spring应用的初始搭建和开发过程。它通过自动配置和起步依赖，使开发者能够快速构建独立运行的生产级应用。本系统使用Spring Boot 2.7.x作为后端框架，整合Spring MVC、Spring Data JPA、Spring Security等模块。
2.2 Vue.js
Vue.js是一款用于构建用户界面的渐进式JavaScript框架。本系统使用Vue 3组合式API，配合Element Plus组件库、Vue Router和Pinia状态管理，实现响应式的前端页面。
2.3 MySQL
MySQL是广泛使用的关系型数据库管理系统。本系统使用MySQL 8.0存储广告位、广告、用户、统计数据等核心数据。
2.4 Redis（可选）
Redis是一款高性能的键值存储系统，本系统可选使用Redis缓存广告位信息和实时统计数据，提升系统响应速度。
2.5 其他工具
- Maven：项目构建与依赖管理。
- Git：版本控制。
- Postman：API接口测试。
- Nginx：前端静态资源部署与反向代理。
3. 系统需求分析
3.1 功能需求
系统主要面向两类角色：管理员和广告主（普通用户）。
管理员功能：
- 用户管理：查看、禁用、删除用户。
- 广告位管理：创建、修改、删除广告位（如首页横幅、侧边栏）。
- 广告审核：审核广告主提交的广告内容。
- 数据统计：查看整体广告点击、展示数据。
广告主功能：
- 广告位浏览：查看可投放的广告位。
- 广告管理：创建、编辑、提交广告（图片、链接、文本）。
- 投放计划：设置投放时间、目标地域、预算等。
- 数据统计：查看自己广告的展示量、点击量、点击率。
3.2 非功能需求
- 性能：单次API响应时间不超过500ms，支持100并发用户。
- 安全性：用户密码加密存储，接口需认证（JWT），防止SQL注入与XSS攻击。
- 可用性：界面友好，操作简洁，支持主流浏览器。
- 可扩展性：模块化设计，便于后续增加新功能（如实时竞价）。
4. 系统设计
4.1 系统架构设计
系统采用前后端分离架构，分为四层：
- 前端展示层：Vue.js + Element Plus，负责页面渲染与用户交互，通过Axios调用后端API。
- 后端服务层：Spring Boot，提供RESTful API，处理业务逻辑，整合安全、缓存等。
- 数据持久层：Spring Data JPA + MySQL，负责数据存取。
- 基础设施层：Nginx、Redis（可选）、日志服务。
4.2 功能模块设计
系统划分为以下模块：
- 用户模块：注册、登录、个人信息、权限管理。
- 广告位模块：广告位CRUD、状态管理（启用/禁用）。
- 广告模块：广告CRUD、提交审核、上下架。
- 投放计划模块：计划创建、时间设置、预算设置。
- 统计模块：展示数据、点击数据、图表展示。
- 审核模块：管理员审核广告。
4.3 数据库设计
主要数据表包括：
- user：用户ID、用户名、密码、角色、邮箱、创建时间。
- ad_position：广告位ID、名称、描述、尺寸、状态。
- ad：广告ID、广告主ID、广告位ID、标题、图片URL、链接、状态、创建时间。
- campaign：投放计划ID、广告ID、开始时间、结束时间、预算、目标地域。
- ad_stat：统计ID、广告ID、日期、展示量、点击量。
（附E-R图说明，此处略）
4.4 接口设计
遵循RESTful风格，主要接口示例：
- POST /api/auth/login：登录，返回JWT。
- GET /api/adpositions：获取广告位列表。
- POST /api/ads：创建广告（需认证）。
- PUT /api/ads/{id}/audit：审核广告（管理员）。
- GET /api/stats?adId=1&start=2024-01-01&end=2024-01-31：获取统计。
接口统一返回JSON格式：{code, message, data}。
5. 系统实现
5.1 开发环境与工具
- 操作系统：Windows 10 / macOS
- JDK 1.8+
- Maven 3.6+
- Node.js 14+
- IntelliJ IDEA / VS Code
- MySQL 8.0
5.2 后端关键实现
用户认证：使用Spring Security + JWT。用户登录后生成Token，后续请求在Header中携带Token，过滤器校验。
// JwtUtil.java
public String generateToken(String username) {
return Jwts.builder()
.setSubject(username)
.setExpiration(new Date(System.currentTimeMillis() + 86400000))
.signWith(SignatureAlgorithm.HS512, SECRET_KEY)
.compact();
}广告位管理：AdvertisementPositionController提供CRUD接口，服务层使用JPA Repository。
`java
@RestController
@RequestMapping("/api/adpositions")
public class AdPositionController {
@Autowired
private AdPositionService service;
@GetMapping
public Result list() {
return Result.success(service.findAll());
}
@PostMapping
@PreAuthorize("hasRole('ADMIN')")
public Result create(@RequestBody AdPosition position) {
return Result.success(service.save(position));
}
}`
统计模块：每日定时任务将展示和点击日志汇总到ad_stat表，接口按日期范围查询。
5.3 前端关键实现
项目结构：使用Vue CLI创建，目录包括api、views、components、router、store等。
登录页面：调用/api/auth/login，存储Token到localStorage，路由守卫校验权限。
// Login.vue
axios.post('/api/auth/login', {username, password})
.then(res => {
localStorage.setItem('token', res.data.token);
this.$router.push('/dashboard');
});广告位列表：使用Element Plus的Table组件展示，支持分页和操作按钮。
数据统计图表：使用ECharts展示展示量、点击量趋势图。
5.4 数据库实现
使用JPA自动建表，或提供SQL脚本初始化。核心表结构示例：
CREATE TABLE ad (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
advertiser_id BIGINT NOT NULL,
position_id BIGINT NOT NULL,
title VARCHAR(100),
image_url VARCHAR(255),
link_url VARCHAR(255),
status TINYINT DEFAULT 0,
createdat DATETIME DEFAULT CURRENTTIMESTAMP
);6. 系统测试
6.1 测试环境
- 服务器：本地Tomcat（内嵌于Spring Boot）
- 浏览器：Chrome 100+
- 测试工具：Postman、JMeter
6.2 功能测试
针对每个模块设计测试用例，例如：
| 用例ID | 功能 | 步骤 | 预期结果 | 实际结果 |
|--------|------|------|----------|----------|
| TC01 | 用户登录 | 输入正确用户名密码 | 登录成功，跳转首页 | 通过 |
| TC02 | 创建广告 | 填写表单并提交 | 广告保存，状态为待审核 | 通过 |
| TC03 | 审核广告 | 管理员通过广告 | 广告状态变为已上架 | 通过 |
所有测试用例均通过，错误处理符合预期。
6.3 性能测试
使用JMeter模拟100并发用户访问广告位列表接口，平均响应时间230ms，吞吐量420请求/秒，满足非功能需求。
7. 与展望
本文设计并实现了一个基于Spring Boot和Vue的广告管理系统，采用前后端分离架构，实现了广告位管理、广告管理、投放计划、数据统计等核心功能。系统具有技术栈主流、易于扩展、界面友好等优点，可作为计算机专业毕业设计项目，也可作为中小型企业广告管理的基础平台。
未来工作可从以下方面改进：
- 增加实时竞价（RTB）功能；
- 支持多平台广告投放（如移动端、PC端）；
- 引入大数据分析，提供智能推荐；
- 增加多语言支持，支持国际化。
参考文献
[1] 王珊, 萨师煊. 数据库系统概论(第5版)[M]. 北京: 高等教育出版社, 2014.
[2] 殊释Spring Boot编程思想(核心篇)[M]. 北京: 电子工业出版社, 2019.
[3] Vue.js官方文档. https://vuejs.org/[EB/OL]. (访问日期2025-01-01).
[4] Spring Boot官方文档. https://spring.io/projects/spring-boot[EB/OL]. (访问日期2025-01-01).
[5] 李刚. 疯狂Java讲义(第4版)[M]. 北京: 电子工业出版社, 2014.
