大家好我是Java1234_小锋老师分享一套锋哥原创的SpringBoot4Vue3电子相册管理系统。项目介绍随着移动互联网与数字影像技术的快速发展个人与组织积累的电子照片数量持续增长传统的本地文件夹管理方式已难以满足分类整理、在线分享、互动交流和统一维护等需求。针对上述问题本文设计并实现了一套基于Spring Boot与Vue3的电子相册管理系统。系统采用前后端分离架构后端以Spring Boot作为核心框架结合MyBatis-Plus完成数据持久化使用JWT实现身份认证与权限控制前端基于Vue3、Vite、Element Plus与ECharts构建管理端与用户端界面实现相册创建、照片上传、广场浏览、点赞收藏、评论互动、公告发布及后台数据统计等功能。在需求分析阶段本文从可行性、功能性需求和非功能性需求三个维度展开分析明确了用户端与管理员端的业务边界。系统设计阶段则涵盖了总体架构、功能结构、数据库E-R模型以及关键表结构的设计。在实现阶段我们围绕认证授权、相册与照片管理、互动模块、评论审核、统计看板等核心功能详细阐述了实现思路并提供了关键代码示例。最后通过全面的功能测试验证了系统的可用性。实践结果表明该系统结构清晰、交互友好、扩展性良好能够有效满足电子相册日常管理与内容运营的基本需求对同类Web应用的设计与开发具有一定的参考价值。源码下载链接: https://pan.baidu.com/s/1GpCCtiT9Dm6PBC-zMVYvvQ?pwd1234提取码: 1234系统展示核心代码package com.java1234.controller; import com.java1234.aspect.OperLog; import com.java1234.common.R; import com.java1234.entity.Photo; import com.java1234.service.impl.UserManageService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; /** * 照片管理控制器 */ RestController RequestMapping(/api/photo) public class PhotoController { Autowired private UserManageService userManageService; /** * 分页查询照片 */ GetMapping(/page) public R? page(RequestParam(defaultValue 1) int pageNum, RequestParam(defaultValue 12) int pageSize, RequestParam(required false) String name, RequestParam(required false) Long albumId, RequestParam(required false) Long userId) { return R.ok(userManageService.pagePhotos(pageNum, pageSize, name, albumId, userId)); } /** * 新增照片 */ PostMapping OperLog(上传照片) public RVoid add(RequestBody Photo photo) { userManageService.addPhoto(photo); return R.ok(); } /** * 修改照片 */ PutMapping public RVoid update(RequestBody Photo photo) { userManageService.updatePhoto(photo); return R.ok(); } /** * 删除照片 */ DeleteMapping(/{id}) OperLog(删除照片) public RVoid delete(PathVariable Long id) { userManageService.deletePhoto(id); return R.ok(); } }template div classpage-container div classcard-box div classsearch-bar el-input v-modelquery.name placeholder搜索相册名称 clearable stylewidth:220px clearloadData / el-button typeprimary clickloadDatael-iconSearch //el-icon搜索/el-button /div el-table :datatableData stripe border el-table-column propid labelID min-width60 / el-table-column label封面 min-width80 template #default{ row } el-image :srcrow.cover stylewidth:50px;height:50px;border-radius:6px fitcover / /template /el-table-column el-table-column propname label相册名称 min-width120 / el-table-column propusername label所属用户 min-width100 / el-table-column propcategoryName label分类 min-width80 / el-table-column label公开 min-width70 template #default{ row } el-tag :typerow.isPublic 1 ? success : info sizesmall{{ row.isPublic 1 ? 公开 : 私密 }}/el-tag /template /el-table-column el-table-column propphotoCount label照片数 min-width70 / el-table-column propviewCount label浏览量 min-width70 / el-table-column label创建时间 min-width160 template #default{ row }{{ formatDateTime(row.createTime) }}/template /el-table-column el-table-column label操作 min-width100 fixedright template #default{ row } el-button typedanger link clickhandleDelete(row)删除/el-button /template /el-table-column /el-table el-pagination stylemargin-top:16px;justify-content:flex-end v-model:current-pagequery.pageNum v-model:page-sizequery.pageSize :totaltotal :page-sizes[10,20,50] layouttotal,sizes,prev,pager,next changeloadData / /div /div /template script setup import { ref, reactive, onMounted } from vue import { pageAlbum, deleteAlbum, formatDateTime } from /api import { ElMessage, ElMessageBox } from element-plus const tableData ref([]) const total ref(0) const query reactive({ pageNum: 1, pageSize: 10, name: }) const loadData async () { const res await pageAlbum(query) tableData.value res.data.records total.value res.data.total } const handleDelete (row) { if (row.photoCount 0) { ElMessage.warning(相册内还有照片请先删除全部照片后再删除相册) return } ElMessageBox.confirm(确定删除相册「${row.name}」吗, 删除确认, { type: warning }).then(async () { await deleteAlbum(row.id) ElMessage.success(删除成功) loadData() }).catch(() {}) } onMounted(loadData) /script