基于SSM与Vue的摇滚乐队社群与周边商城系统设计与实现
系统概述
本系统是一个面向海外摇滚乐队粉丝群体的综合性平台，整合了用户交流、乐队资讯展示与官方周边商品售卖功能。系统采用后端SSM（Spring + Spring MVC + MyBatis）框架提供稳定服务，前端基于Vue 3构建响应式界面，实现前后端分离架构。平台支持用户注册登录、商品浏览与购买、评论互动、订单管理及后台权限控制，满足中小型文化类电商项目的实际需求。
技术架构
- 后端：Java 1.8 + Spring Boot 2.7 + Spring MVC + MyBatis + MySQL 5.7
- 前端：Vue 3 + Element Plus + Axios + Router + Pinia
- 部署：Tomcat 9 + Maven 3.8 + Docker（可选）
- 安全：JWT令牌认证 + 密码BCrypt加密 + 权限角色控制
核心功能模块
用户端功能
- 会员体系：支持邮箱注册、手机号绑定、密码找回、个人信息维护
- 乐队动态：展示乐队巡演日程、新歌发布、幕后花絮等图文资讯
- 商品中心：分类展示T恤、黑胶唱片、徽章、海报等周边商品，支持多图预览与详情页
- 购物车与订单：添加商品至购物车、结算生成订单、查看物流状态、评价商品
- 社区互动：发表评论、点赞他人动态、收藏乐队内容
管理端功能
- 权限分级：管理员、运营、客服三类角色，基于RBAC模型分配页面访问权限
- 商品管理：增删改查商品信息、上传封面图、设置库存与价格
- 订单处理：查看全部订单、修改状态（待付款/已发货/已完成）、导出报表
- 内容审核：审核用户评论、屏蔽违规内容、置顶热门动态
- 数据统计：商品销量排行、用户活跃度、月度营收趋势可视化图表
关键代码实现
后端：商品查询接口（Spring Boot + MyBatis）
@RestController
@RequestMapping("/api/products")
public class ProductController {
@Autowired
private ProductService productService;
@GetMapping("/list")
public Result<List<ProductDto>> getProducts(
@RequestParam(defaultValue = "0") Integer page,
@RequestParam(defaultValue = "12") Integer size,
@RequestParam(required = false) String category,
@RequestParam(required = false) String keyword) {
Pageable pageable = PageRequest.of(page, size, Sort.by("createdAt").descending());
Page<Product> products = productService.findWithFilters(category, keyword, pageable);
List<ProductDto> dtoList = products.getContent().stream()
.map(ProductMapper::toDto)
.collect(Collectors.toList());
return Result.success(dtoList, products.getTotalElements());
}
}前端：商品列表组件（Vue 3 + Pinia）
<template>
<div class="product-grid">
<ProductCard
v-for="product in productList"
:key="product.id"
:product="product"
@add-to-cart="handleAddToCart"
/>
</div>
<Pagination
:current="pagination.page"
:total="pagination.total"
:page-size="pagination.size"
@change="loadProducts"
/>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useProductStore } from '@/stores/product'
import ProductCard from './ProductCard.vue'
import Pagination from './Pagination.vue'
const productStore = useProductStore()
const productList = ref([])
const pagination = ref({ page: 0, size: 12, total: 0 })
const loadProducts = async (page = 0) => {
const data = await productStore.fetchProducts(page, pagination.value.size)
productList.value = data.list
pagination.value.total = data.total
}
onMounted(() => loadProducts())
const handleAddToCart = (product) => {
productStore.addToCart(product)
ElMessage.success('已加入购物车')
}
</script>数据库核心表结构（简化版）
CREATE TABLE `band` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`name` VARCHAR(100) NOT NULL UNIQUE,
`country` VARCHAR(50),
`genre` VARCHAR(50),
`bio` TEXT,
`avatar_url` VARCHAR(255),
`created_at` DATETIME DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE `product` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`band_id` INT NOT NULL,
`name` VARCHAR(150) NOT NULL,
`category` ENUM('tshirt','vinyl','poster','accessory') NOT NULL,
`price` DECIMAL(10,2),
`stock` INT DEFAULT 0,
`images` JSON,
`description` TEXT,
`is_active` TINYINT(1) DEFAULT 1,
FOREIGN KEY (`band_id`) REFERENCES `band`(`id`) ON DELETE CASCADE
);
CREATE TABLE `user_order` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`user_id` INT NOT NULL,
`total_amount` DECIMAL(10,2),
`status` ENUM('pending','paid','shipped','completed','cancelled') DEFAULT 'pending',
`shipping_address` TEXT,
`created_at` DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (`user_id`) REFERENCES `user`(`id`)
);
CREATE TABLE `order_item` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`order_id` INT NOT NULL,
`product_id` INT NOT NULL,
`quantity` INT NOT NULL,
`unit_price` DECIMAL(10,2),
FOREIGN KEY (`order_id`) REFERENCES `user_order`(`id`),
FOREIGN KEY (`product_id`) REFERENCES `product`(`id`)
);
CREATE TABLE `comment` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`user_id` INT NOT NULL,
`target_id` INT NOT NULL, -- 关联band_id或product_id
`target_type` ENUM('band','product') NOT NULL,
`content` TEXT,
`rating` TINYINT DEFAULT 5,
`created_at` DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (`user_id`) REFERENCES `user`(`id`)
);系统亮点
- 采用前后端分离架构，提升开发效率与部署灵活性
- 基于JWT实现无状态登录，支持移动端与Web端统一认证
- 商品图片采用JSON数组存储，支持多图上传与轮播展示
- 权限系统细粒度控制，确保不同角色仅能访问授权功能
- 订单与库存操作使用数据库事务保证数据一致性
