在实际项目中我们经常需要处理一些非技术性的需求例如为特定事件或人物创建数字化的纪念空间。这类需求往往源于情感或文化层面的诉求但实现它却需要严谨的技术方案。本文将以一个假设的“数字纪念册”项目为例探讨如何从零开始构建一个能够承载记忆、支持多媒体内容、并具备良好可维护性的 Web 应用。我们将使用主流的 Spring Boot Vue.js 技术栈并重点讲解后端 API 设计、文件存储、前端展示以及部署上线的完整流程。通过本文你将掌握如何将一个概念性的想法转化为一个结构清晰、可运行、可扩展的线上服务。1. 理解“数字纪念册”项目的核心需求与技术选型这个项目的核心目标是创建一个私密的在线空间用于记录和展示共同经历的事件、照片、文字等。它不是一个公开的社交平台更侧重于个人化的收藏与回顾。因此在技术选型上我们需要考虑以下几个关键点1.1 功能需求分析内容管理支持创建“纪念册”每个纪念册可以包含标题、描述、封面图、创建时间等元数据。条目管理在每个纪念册下可以添加具体的“纪念条目”例如一次旅行、一个项目、一段对话记录。条目应支持富文本描述、图片上传、视频链接、时间地点等信息。权限与隐私内容默认应为私密仅创建者或受邀者可见。这涉及到用户认证和简单的授权机制。前端展示需要一个美观、沉浸式的前端界面来浏览纪念册和条目支持图片画廊、时间线等视图。1.2 技术栈选型理由后端 (Spring Boot)Java 生态成熟稳定Spring Boot 能快速搭建 RESTful API并轻松集成数据库、安全框架和文件存储服务。适合构建逻辑清晰、易于维护的后端服务。前端 (Vue.js)渐进式框架学习曲线平缓组件化开发模式非常适合构建交互复杂的单页面应用SPA能提供流畅的用户体验。数据库 (MySQL)关系型数据库适合存储结构化的纪念册和条目信息以及用户关系。文件存储 (本地/MinIO/OSS)用户上传的图片需要可靠存储。开发阶段可使用本地磁盘生产环境建议使用对象存储服务如阿里云 OSS、腾讯云 COS或自建 MinIO。认证与安全 (Spring Security JWT)用于实现用户登录、注册并通过 JSON Web Token 管理 API 访问权限。明确了需求和选型后我们将从环境准备开始逐步构建整个应用。2. 环境准备与项目初始化在开始编码前需要确保本地开发环境就绪。我们将创建两个独立的项目一个 Spring Boot 后端项目和一个 Vue.js 前端项目。2.1 后端项目初始化使用 Spring Initializr 或 IDE 创建项目关键依赖如下Spring Web: 用于构建 REST API。Spring Data JPA: 简化数据库操作。MySQL Driver: 数据库连接。Spring Security: 安全与认证。JJWT: 用于生成和解析 JWT Token。Lombok: 简化实体类代码。创建后的pom.xml关键依赖部分如下dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-data-jpa/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-security/artifactId /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.11.5/version scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-jackson/artifactId version0.11.5/version scoperuntime/scope /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies2.2 前端项目初始化使用 Vue CLI 创建项目并安装必要依赖# 全局安装 Vue CLI (如未安装) npm install -g vue/cli # 创建项目 vue create memory-album-frontend # 进入项目并安装路由、状态管理、UI库和HTTP客户端 cd memory-album-frontend npm install vue-router vuex element-ui axios这里选择 Element UI 作为基础组件库因其组件丰富能快速搭建管理界面。2.3 数据库准备在本地 MySQL 中创建数据库CREATE DATABASE memory_album DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;utf8mb4字符集支持存储 Emoji 等特殊字符适合存储用户可能输入的文本。3. 后端核心模块设计与实现后端采用经典的分层架构Controller - Service - Repository。我们首先设计核心的数据模型。3.1 数据模型设计根据需求我们至少需要三张核心表用户表、纪念册表、纪念条目表。实体关系如下一个用户拥有多个纪念册一对多。一个纪念册包含多个纪念条目一对多。条目与用户是间接关联。对应的 JPA 实体类代码如下以Album和MemoryItem为例// Album.java Entity Data NoArgsConstructor AllArgsConstructor public class Album { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String title; private String description; private String coverImageUrl; // 封面图存储路径或URL ManyToOne JoinColumn(name user_id) private User creator; // 创建者 OneToMany(mappedBy album, cascade CascadeType.ALL, orphanRemoval true) private ListMemoryItem items new ArrayList(); private LocalDateTime createTime; private LocalDateTime updateTime; PrePersist protected void onCreate() { this.createTime LocalDateTime.now(); } PreUpdate protected void onUpdate() { this.updateTime LocalDateTime.now(); } } // MemoryItem.java Entity Data NoArgsConstructor AllArgsConstructor public class MemoryItem { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String title; Column(columnDefinition TEXT) private String content; // 富文本内容 private String mediaUrls; // 多个媒体文件URL可用JSON数组字符串存储 private LocalDateTime eventTime; // 事件发生时间 private String location; ManyToOne JoinColumn(name album_id) private Album album; private LocalDateTime createTime; private LocalDateTime updateTime; PrePersist protected void onCreate() { this.createTime LocalDateTime.now(); } PreUpdate protected void onUpdate() { this.updateTime LocalDateTime.now(); } }mediaUrls字段存储多个文件的访问路径这里用简单的 JSON 字符串表示生产环境可考虑使用ElementCollection或单独的表。3.2 文件上传服务实现文件上传是核心功能之一。我们创建一个FileStorageService来抽象存储操作便于后续切换存储方式。// FileStorageService.java Service public class FileStorageService { // 从配置文件中读取存储路径 Value(${file.upload-dir}) private String uploadDir; public String storeFile(MultipartFile file) throws IOException { // 生成唯一文件名防止覆盖 String fileName UUID.randomUUID().toString() _ StringUtils.cleanPath(file.getOriginalFilename()); Path targetLocation Paths.get(uploadDir).resolve(fileName); Files.copy(file.getInputStream(), targetLocation, StandardCopyOption.REPLACE_EXISTING); // 返回相对路径或可访问的URL这里先返回文件名 return fileName; } public Resource loadFileAsResource(String fileName) { try { Path filePath Paths.get(uploadDir).resolve(fileName).normalize(); Resource resource new UrlResource(filePath.toUri()); if (resource.exists()) { return resource; } else { throw new FileNotFoundException(File not found fileName); } } catch (MalformedURLException | FileNotFoundException ex) { throw new FileNotFoundException(File not found fileName); } } }在application.yml中配置上传目录和静态资源映射file: upload-dir: ./uploads spring: servlet: multipart: max-file-size: 10MB max-request-size: 10MB同时需要配置一个WebMvcConfig将上传目录暴露为静态资源以便前端通过 URL 访问图片Configuration public class WebMvcConfig implements WebMvcConfigurer { Value(${file.upload-dir}) private String uploadDir; Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/uploads/**) .addResourceLocations(file: uploadDir /); } }3.3 用户认证与 API 安全使用 Spring Security 和 JWT 实现无状态认证。核心步骤包括自定义UserDetailsService从数据库加载用户信息。创建 JWT 工具类用于生成和验证 Token。配置SecurityConfig定义登录接口放行其他接口需要认证并添加 JWT 过滤器。关键配置片段 (SecurityConfig.java)Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Autowired private JwtAuthenticationFilter jwtAuthenticationFilter; Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() // 对于API通常禁用CSRF .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) // 无状态 .and() .authorizeRequests() .antMatchers(/api/auth/**, /uploads/**).permitAll() // 登录注册和静态资源公开 .anyRequest().authenticated(); // 其他所有请求需要认证 // 将JWT过滤器添加到UsernamePasswordAuthenticationFilter之前 http.addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class); } Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); } }JwtAuthenticationFilter会从 HTTP 请求头中提取Authorization: Bearer token并验证 Token 的有效性将用户信息设置到安全上下文中。4. 前端项目构建与核心页面开发前端采用 Vue Router 管理路由Vuex 管理全局状态如用户登录状态Axios 作为 HTTP 客户端。4.1 配置 Axios 与路由守卫首先创建一个配置好的 Axios 实例自动在请求头中添加 Token并统一处理错误。// src/utils/request.js import axios from axios; import { Message } from element-ui; import router from ../router; const service axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL || http://localhost:8080/api, timeout: 10000 }); // 请求拦截器添加Token service.interceptors.request.use( config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer ${token}; } return config; }, error { return Promise.reject(error); } ); // 响应拦截器统一处理错误 service.interceptors.response.use( response { return response.data; }, error { if (error.response.status 401) { Message.error(登录已过期请重新登录); localStorage.removeItem(token); router.push(/login); } else { Message.error(error.response.data.message || 请求失败); } return Promise.reject(error); } ); export default service;然后在路由配置中设置全局前置守卫对需要认证的页面进行保护。// src/router/index.js router.beforeEach((to, from, next) { const isAuthenticated !!localStorage.getItem(token); if (to.matched.some(record record.meta.requiresAuth) !isAuthenticated) { next(/login); } else { next(); } });4.2 纪念册列表与创建页面使用 Element UI 的布局和组件快速搭建页面。关键组件是AlbumList.vue和CreateAlbum.vue。 在AlbumList.vue中使用el-card组件展示纪念册并通过created生命周期钩子调用后端 API 获取数据。template div classalbum-list el-button typeprimary clickgoToCreate创建新纪念册/el-button el-row :gutter20 el-col :span6 v-foralbum in albums :keyalbum.id el-card :body-style{ padding: 0px } click.nativeviewAlbum(album.id) img :srcgetCoverImageUrl(album.coverImageUrl) classimage div stylepadding: 14px; span{{ album.title }}/span div classbottom clearfix time classtime{{ formatDate(album.createTime) }}/time /div /div /el-card /el-col /el-row /div /template script import request from /utils/request; export default { name: AlbumList, data() { return { albums: [] }; }, created() { this.fetchAlbums(); }, methods: { async fetchAlbums() { try { const res await request.get(/albums/my); this.albums res.data; } catch (error) { console.error(获取纪念册列表失败, error); } }, getCoverImageUrl(url) { if (url !url.startsWith(http)) { return ${process.env.VUE_APP_API_BASE_URL || http://localhost:8080}/uploads/${url}; } return url || require(/assets/default-cover.jpg); }, goToCreate() { this.$router.push(/album/create); }, viewAlbum(id) { this.$router.push(/album/${id}); } } }; /scriptCreateAlbum.vue则包含一个表单用于提交标题、描述和封面图。封面图上传使用el-upload组件在上传成功后将服务器返回的文件名或路径绑定到表单数据中。5. 前后端联调与部署上线完成核心功能开发后需要进行联调测试并规划生产环境部署。5.1 跨域问题解决在开发阶段前端运行在localhost:8081后端在localhost:8080存在跨域问题。在后端可以通过配置CorsFilter或使用CrossOrigin注解解决。// 全局CORS配置 (在配置类或主类中) Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) .allowedOrigins(http://localhost:8081) // 前端开发地址 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowCredentials(true); } }; }注意生产环境应将allowedOrigins替换为实际的前端域名避免使用通配符*带来安全风险。5.2 生产环境关键配置数据库使用云数据库服务如 RDS并做好定期备份。文件存储强烈建议使用对象存储服务。只需修改FileStorageService的实现调用对应云服务的 SDK 进行文件上传和获取访问 URL。本地磁盘存储仅适用于单机且数据量极小的场景。应用部署后端使用mvn clean package打包为 JAR 文件在服务器上通过java -jar运行。推荐配合systemd或 Docker 进行进程管理。前端运行npm run build生成静态文件位于dist目录将其部署到 Nginx 或 Apache 等 Web 服务器上。域名与 HTTPS为服务绑定域名并申请 SSL 证书启用 HTTPS保证数据传输安全。环境变量将数据库连接字符串、对象存储密钥、JWT 密钥等敏感信息通过环境变量或配置中心管理不要硬编码在代码中。5.3 部署清单在将应用部署到生产环境前请对照以下清单进行检查[ ] 后端application-prod.yml中的数据库配置已指向生产数据库。[ ] 文件存储服务已切换为对象存储且存储桶权限配置正确。[ ] JWT 签名密钥已更换为强随机字符串并妥善保管。[ ] 前端axios的baseURL已指向生产环境后端 API 地址。[ ] Nginx 等 Web 服务器已正确配置将前端路由如/,/login,/album/*指向index.html并将/api/*代理到后端服务。[ ] 已配置日志收集如 ELK 或云日志服务便于问题排查。[ ] 已设置监控告警如应用健康检查、服务器资源监控。6. 常见问题排查与优化建议在实际开发和运行中你可能会遇到以下典型问题。6.1 文件上传失败或无法访问现象前端提示上传成功但图片无法显示或后端抛出IOException。排查步骤检查application.yml中file.upload-dir配置的路径是否存在应用是否有读写权限。检查WebMvcConfig中配置的静态资源映射路径 (/uploads/**) 是否与返回给前端的 URL 前缀匹配。检查操作系统文件句柄限制如果并发上传量大可能需要调整。如果使用对象存储检查 SDK 配置Endpoint, AccessKey, SecretKey, BucketName是否正确以及网络连通性。解决与预防在FileStorageService的storeFile方法中加入更详细的日志记录文件保存的完整路径。生产环境务必使用对象存储其可靠性远高于自维护的磁盘。6.2 JWT Token 失效或认证失败现象登录后操作其他接口返回 401 状态码。排查步骤使用浏览器开发者工具或 Postman 检查请求头中的Authorization字段格式是否正确Bearer token。检查 Token 是否已过期。可以在 JWT 解析时打印过期时间进行验证。检查后端用于签名的密钥 (JWT_SECRET) 是否在前后端一致尤其是在重启服务后。验证SecurityConfig中配置的放行路径 (antMatchers) 是否包含了登录注册等无需认证的接口。解决与预防实现 Token 的自动刷新机制。当 API 返回 401 时前端尝试使用 Refresh Token 获取新的 Access Token无感刷新用户体验。6.3 前端路由在刷新后报 404现象在 Vue Router 的 History 模式下直接访问某个子路由如/album/123或刷新页面时显示 Nginx 404 页面。原因这是因为该路径在前端是一个路由但 Nginx 在服务器上找不到对应的静态文件。解决在 Nginx 配置中添加一个try_files指令将非静态文件请求都指向index.html。location / { root /path/to/your/frontend/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend-server:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }6.4 数据库性能与设计优化随着纪念册和条目增多查询可能变慢。为关联查询字段添加索引例如album_id,user_id,create_time等经常用于WHERE或ORDER BY的字段。分页查询在获取纪念册列表或条目列表时务必实现分页避免一次性加载过多数据。Spring Data JPA 的Pageable接口可以很方便地实现。媒体 URL 存储优化当前mediaUrls使用 JSON 字符串存储在单个字段中不利于针对某个媒体文件的查询。如果查询需求复杂可考虑拆分为独立的media表。定期归档对于时间久远、访问频率极低的“纪念册”可以考虑将其数据迁移到归档存储减轻主库压力。构建这样一个“数字纪念册”应用技术实现只是第一步。更重要的是其承载的内容和情感价值。在技术层面确保其稳定、安全和易于维护才能让这份数字记忆长久地留存下去。你可以在此基础上继续扩展例如加入时间线视图、地图标记、多人协作编辑、数据导出等功能使其更加强大和个性化。
在实际项目中我们经常需要处理一些非技术性的需求例如为特定事件或人物创建数字化的纪念空间。这类需求往往源于情感或文化层面的诉求但实现它却需要严谨的技术方案。本文将以一个假设的“数字纪念册”项目为例探讨如何从零开始构建一个能够承载记忆、支持多媒体内容、并具备良好可维护性的 Web 应用。我们将使用主流的 Spring Boot Vue.js 技术栈并重点讲解后端 API 设计、文件存储、前端展示以及部署上线的完整流程。通过本文你将掌握如何将一个概念性的想法转化为一个结构清晰、可运行、可扩展的线上服务。1. 理解“数字纪念册”项目的核心需求与技术选型这个项目的核心目标是创建一个私密的在线空间用于记录和展示共同经历的事件、照片、文字等。它不是一个公开的社交平台更侧重于个人化的收藏与回顾。因此在技术选型上我们需要考虑以下几个关键点1.1 功能需求分析内容管理支持创建“纪念册”每个纪念册可以包含标题、描述、封面图、创建时间等元数据。条目管理在每个纪念册下可以添加具体的“纪念条目”例如一次旅行、一个项目、一段对话记录。条目应支持富文本描述、图片上传、视频链接、时间地点等信息。权限与隐私内容默认应为私密仅创建者或受邀者可见。这涉及到用户认证和简单的授权机制。前端展示需要一个美观、沉浸式的前端界面来浏览纪念册和条目支持图片画廊、时间线等视图。1.2 技术栈选型理由后端 (Spring Boot)Java 生态成熟稳定Spring Boot 能快速搭建 RESTful API并轻松集成数据库、安全框架和文件存储服务。适合构建逻辑清晰、易于维护的后端服务。前端 (Vue.js)渐进式框架学习曲线平缓组件化开发模式非常适合构建交互复杂的单页面应用SPA能提供流畅的用户体验。数据库 (MySQL)关系型数据库适合存储结构化的纪念册和条目信息以及用户关系。文件存储 (本地/MinIO/OSS)用户上传的图片需要可靠存储。开发阶段可使用本地磁盘生产环境建议使用对象存储服务如阿里云 OSS、腾讯云 COS或自建 MinIO。认证与安全 (Spring Security JWT)用于实现用户登录、注册并通过 JSON Web Token 管理 API 访问权限。明确了需求和选型后我们将从环境准备开始逐步构建整个应用。2. 环境准备与项目初始化在开始编码前需要确保本地开发环境就绪。我们将创建两个独立的项目一个 Spring Boot 后端项目和一个 Vue.js 前端项目。2.1 后端项目初始化使用 Spring Initializr 或 IDE 创建项目关键依赖如下Spring Web: 用于构建 REST API。Spring Data JPA: 简化数据库操作。MySQL Driver: 数据库连接。Spring Security: 安全与认证。JJWT: 用于生成和解析 JWT Token。Lombok: 简化实体类代码。创建后的pom.xml关键依赖部分如下dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-data-jpa/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-security/artifactId /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.11.5/version scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-jackson/artifactId version0.11.5/version scoperuntime/scope /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies2.2 前端项目初始化使用 Vue CLI 创建项目并安装必要依赖# 全局安装 Vue CLI (如未安装) npm install -g vue/cli # 创建项目 vue create memory-album-frontend # 进入项目并安装路由、状态管理、UI库和HTTP客户端 cd memory-album-frontend npm install vue-router vuex element-ui axios这里选择 Element UI 作为基础组件库因其组件丰富能快速搭建管理界面。2.3 数据库准备在本地 MySQL 中创建数据库CREATE DATABASE memory_album DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;utf8mb4字符集支持存储 Emoji 等特殊字符适合存储用户可能输入的文本。3. 后端核心模块设计与实现后端采用经典的分层架构Controller - Service - Repository。我们首先设计核心的数据模型。3.1 数据模型设计根据需求我们至少需要三张核心表用户表、纪念册表、纪念条目表。实体关系如下一个用户拥有多个纪念册一对多。一个纪念册包含多个纪念条目一对多。条目与用户是间接关联。对应的 JPA 实体类代码如下以Album和MemoryItem为例// Album.java Entity Data NoArgsConstructor AllArgsConstructor public class Album { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String title; private String description; private String coverImageUrl; // 封面图存储路径或URL ManyToOne JoinColumn(name user_id) private User creator; // 创建者 OneToMany(mappedBy album, cascade CascadeType.ALL, orphanRemoval true) private ListMemoryItem items new ArrayList(); private LocalDateTime createTime; private LocalDateTime updateTime; PrePersist protected void onCreate() { this.createTime LocalDateTime.now(); } PreUpdate protected void onUpdate() { this.updateTime LocalDateTime.now(); } } // MemoryItem.java Entity Data NoArgsConstructor AllArgsConstructor public class MemoryItem { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String title; Column(columnDefinition TEXT) private String content; // 富文本内容 private String mediaUrls; // 多个媒体文件URL可用JSON数组字符串存储 private LocalDateTime eventTime; // 事件发生时间 private String location; ManyToOne JoinColumn(name album_id) private Album album; private LocalDateTime createTime; private LocalDateTime updateTime; PrePersist protected void onCreate() { this.createTime LocalDateTime.now(); } PreUpdate protected void onUpdate() { this.updateTime LocalDateTime.now(); } }mediaUrls字段存储多个文件的访问路径这里用简单的 JSON 字符串表示生产环境可考虑使用ElementCollection或单独的表。3.2 文件上传服务实现文件上传是核心功能之一。我们创建一个FileStorageService来抽象存储操作便于后续切换存储方式。// FileStorageService.java Service public class FileStorageService { // 从配置文件中读取存储路径 Value(${file.upload-dir}) private String uploadDir; public String storeFile(MultipartFile file) throws IOException { // 生成唯一文件名防止覆盖 String fileName UUID.randomUUID().toString() _ StringUtils.cleanPath(file.getOriginalFilename()); Path targetLocation Paths.get(uploadDir).resolve(fileName); Files.copy(file.getInputStream(), targetLocation, StandardCopyOption.REPLACE_EXISTING); // 返回相对路径或可访问的URL这里先返回文件名 return fileName; } public Resource loadFileAsResource(String fileName) { try { Path filePath Paths.get(uploadDir).resolve(fileName).normalize(); Resource resource new UrlResource(filePath.toUri()); if (resource.exists()) { return resource; } else { throw new FileNotFoundException(File not found fileName); } } catch (MalformedURLException | FileNotFoundException ex) { throw new FileNotFoundException(File not found fileName); } } }在application.yml中配置上传目录和静态资源映射file: upload-dir: ./uploads spring: servlet: multipart: max-file-size: 10MB max-request-size: 10MB同时需要配置一个WebMvcConfig将上传目录暴露为静态资源以便前端通过 URL 访问图片Configuration public class WebMvcConfig implements WebMvcConfigurer { Value(${file.upload-dir}) private String uploadDir; Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/uploads/**) .addResourceLocations(file: uploadDir /); } }3.3 用户认证与 API 安全使用 Spring Security 和 JWT 实现无状态认证。核心步骤包括自定义UserDetailsService从数据库加载用户信息。创建 JWT 工具类用于生成和验证 Token。配置SecurityConfig定义登录接口放行其他接口需要认证并添加 JWT 过滤器。关键配置片段 (SecurityConfig.java)Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Autowired private JwtAuthenticationFilter jwtAuthenticationFilter; Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() // 对于API通常禁用CSRF .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) // 无状态 .and() .authorizeRequests() .antMatchers(/api/auth/**, /uploads/**).permitAll() // 登录注册和静态资源公开 .anyRequest().authenticated(); // 其他所有请求需要认证 // 将JWT过滤器添加到UsernamePasswordAuthenticationFilter之前 http.addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class); } Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); } }JwtAuthenticationFilter会从 HTTP 请求头中提取Authorization: Bearer token并验证 Token 的有效性将用户信息设置到安全上下文中。4. 前端项目构建与核心页面开发前端采用 Vue Router 管理路由Vuex 管理全局状态如用户登录状态Axios 作为 HTTP 客户端。4.1 配置 Axios 与路由守卫首先创建一个配置好的 Axios 实例自动在请求头中添加 Token并统一处理错误。// src/utils/request.js import axios from axios; import { Message } from element-ui; import router from ../router; const service axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL || http://localhost:8080/api, timeout: 10000 }); // 请求拦截器添加Token service.interceptors.request.use( config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer ${token}; } return config; }, error { return Promise.reject(error); } ); // 响应拦截器统一处理错误 service.interceptors.response.use( response { return response.data; }, error { if (error.response.status 401) { Message.error(登录已过期请重新登录); localStorage.removeItem(token); router.push(/login); } else { Message.error(error.response.data.message || 请求失败); } return Promise.reject(error); } ); export default service;然后在路由配置中设置全局前置守卫对需要认证的页面进行保护。// src/router/index.js router.beforeEach((to, from, next) { const isAuthenticated !!localStorage.getItem(token); if (to.matched.some(record record.meta.requiresAuth) !isAuthenticated) { next(/login); } else { next(); } });4.2 纪念册列表与创建页面使用 Element UI 的布局和组件快速搭建页面。关键组件是AlbumList.vue和CreateAlbum.vue。 在AlbumList.vue中使用el-card组件展示纪念册并通过created生命周期钩子调用后端 API 获取数据。template div classalbum-list el-button typeprimary clickgoToCreate创建新纪念册/el-button el-row :gutter20 el-col :span6 v-foralbum in albums :keyalbum.id el-card :body-style{ padding: 0px } click.nativeviewAlbum(album.id) img :srcgetCoverImageUrl(album.coverImageUrl) classimage div stylepadding: 14px; span{{ album.title }}/span div classbottom clearfix time classtime{{ formatDate(album.createTime) }}/time /div /div /el-card /el-col /el-row /div /template script import request from /utils/request; export default { name: AlbumList, data() { return { albums: [] }; }, created() { this.fetchAlbums(); }, methods: { async fetchAlbums() { try { const res await request.get(/albums/my); this.albums res.data; } catch (error) { console.error(获取纪念册列表失败, error); } }, getCoverImageUrl(url) { if (url !url.startsWith(http)) { return ${process.env.VUE_APP_API_BASE_URL || http://localhost:8080}/uploads/${url}; } return url || require(/assets/default-cover.jpg); }, goToCreate() { this.$router.push(/album/create); }, viewAlbum(id) { this.$router.push(/album/${id}); } } }; /scriptCreateAlbum.vue则包含一个表单用于提交标题、描述和封面图。封面图上传使用el-upload组件在上传成功后将服务器返回的文件名或路径绑定到表单数据中。5. 前后端联调与部署上线完成核心功能开发后需要进行联调测试并规划生产环境部署。5.1 跨域问题解决在开发阶段前端运行在localhost:8081后端在localhost:8080存在跨域问题。在后端可以通过配置CorsFilter或使用CrossOrigin注解解决。// 全局CORS配置 (在配置类或主类中) Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) .allowedOrigins(http://localhost:8081) // 前端开发地址 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowCredentials(true); } }; }注意生产环境应将allowedOrigins替换为实际的前端域名避免使用通配符*带来安全风险。5.2 生产环境关键配置数据库使用云数据库服务如 RDS并做好定期备份。文件存储强烈建议使用对象存储服务。只需修改FileStorageService的实现调用对应云服务的 SDK 进行文件上传和获取访问 URL。本地磁盘存储仅适用于单机且数据量极小的场景。应用部署后端使用mvn clean package打包为 JAR 文件在服务器上通过java -jar运行。推荐配合systemd或 Docker 进行进程管理。前端运行npm run build生成静态文件位于dist目录将其部署到 Nginx 或 Apache 等 Web 服务器上。域名与 HTTPS为服务绑定域名并申请 SSL 证书启用 HTTPS保证数据传输安全。环境变量将数据库连接字符串、对象存储密钥、JWT 密钥等敏感信息通过环境变量或配置中心管理不要硬编码在代码中。5.3 部署清单在将应用部署到生产环境前请对照以下清单进行检查[ ] 后端application-prod.yml中的数据库配置已指向生产数据库。[ ] 文件存储服务已切换为对象存储且存储桶权限配置正确。[ ] JWT 签名密钥已更换为强随机字符串并妥善保管。[ ] 前端axios的baseURL已指向生产环境后端 API 地址。[ ] Nginx 等 Web 服务器已正确配置将前端路由如/,/login,/album/*指向index.html并将/api/*代理到后端服务。[ ] 已配置日志收集如 ELK 或云日志服务便于问题排查。[ ] 已设置监控告警如应用健康检查、服务器资源监控。6. 常见问题排查与优化建议在实际开发和运行中你可能会遇到以下典型问题。6.1 文件上传失败或无法访问现象前端提示上传成功但图片无法显示或后端抛出IOException。排查步骤检查application.yml中file.upload-dir配置的路径是否存在应用是否有读写权限。检查WebMvcConfig中配置的静态资源映射路径 (/uploads/**) 是否与返回给前端的 URL 前缀匹配。检查操作系统文件句柄限制如果并发上传量大可能需要调整。如果使用对象存储检查 SDK 配置Endpoint, AccessKey, SecretKey, BucketName是否正确以及网络连通性。解决与预防在FileStorageService的storeFile方法中加入更详细的日志记录文件保存的完整路径。生产环境务必使用对象存储其可靠性远高于自维护的磁盘。6.2 JWT Token 失效或认证失败现象登录后操作其他接口返回 401 状态码。排查步骤使用浏览器开发者工具或 Postman 检查请求头中的Authorization字段格式是否正确Bearer token。检查 Token 是否已过期。可以在 JWT 解析时打印过期时间进行验证。检查后端用于签名的密钥 (JWT_SECRET) 是否在前后端一致尤其是在重启服务后。验证SecurityConfig中配置的放行路径 (antMatchers) 是否包含了登录注册等无需认证的接口。解决与预防实现 Token 的自动刷新机制。当 API 返回 401 时前端尝试使用 Refresh Token 获取新的 Access Token无感刷新用户体验。6.3 前端路由在刷新后报 404现象在 Vue Router 的 History 模式下直接访问某个子路由如/album/123或刷新页面时显示 Nginx 404 页面。原因这是因为该路径在前端是一个路由但 Nginx 在服务器上找不到对应的静态文件。解决在 Nginx 配置中添加一个try_files指令将非静态文件请求都指向index.html。location / { root /path/to/your/frontend/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend-server:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }6.4 数据库性能与设计优化随着纪念册和条目增多查询可能变慢。为关联查询字段添加索引例如album_id,user_id,create_time等经常用于WHERE或ORDER BY的字段。分页查询在获取纪念册列表或条目列表时务必实现分页避免一次性加载过多数据。Spring Data JPA 的Pageable接口可以很方便地实现。媒体 URL 存储优化当前mediaUrls使用 JSON 字符串存储在单个字段中不利于针对某个媒体文件的查询。如果查询需求复杂可考虑拆分为独立的media表。定期归档对于时间久远、访问频率极低的“纪念册”可以考虑将其数据迁移到归档存储减轻主库压力。构建这样一个“数字纪念册”应用技术实现只是第一步。更重要的是其承载的内容和情感价值。在技术层面确保其稳定、安全和易于维护才能让这份数字记忆长久地留存下去。你可以在此基础上继续扩展例如加入时间线视图、地图标记、多人协作编辑、数据导出等功能使其更加强大和个性化。
