springboot+react实现移动端相册(上传图片到oss/ 批量删除/ 查看图片详情等功能)

相册页面及功能展示:

react前端结构及代码:

Java后端结构及代码

数据库结构:

photo:

user

这是首个利用AI+自有知识构建的简易相册系统,项目是react构造前端+spring boot构造后端。

  1. 前端有四个主要页面:LoginPage.js / HomePage.js / PhotoDetailPage.js /
    ProfilePage.js 对应的功能分别为:登录/首页相册/图片详情/个人中心
  2. 后端有两个实体类:User Photo,及其对应的Controller和Repository接口,和一个Web Cors 跨域配置
    分别解决用户登录 、 图片的增加/删除/调用、跨域请求的逻辑
  3. 对应的API为:

http://localhost:8080/api/user/login

http://localhost:8080/api/photo/upload

http://localhost:8080/api/photo/delete

其中还在后端配置了阿里云的OSS,将图片都存储在阿里云中。

在实现的过程中遇到的问题总结(均已解决):

  • java的JDK不匹配(通过设置java编译器的版本解决)
  • java依赖版本冲突
  • OSS路径错误导致的图片上传失败
  • inputStream连着调用两次导致读到分辨率开始报错(inputStream只能用一次)
  • 跨域问题,只能在localhost:3000访问,而换成ip访问却不行(在Cors配置中添加ip的放行)
相关推荐
光依旧5 小时前
MCP实战手记系列(十):MCP Server高可用实战
spring boot·高可用·nginx负载均衡·redis哨兵·mcp·微服务容错·resilience4j熔断
刚子编程8 小时前
我用 ASP.NET Core 做了个水稻病虫害检查系统
后端·asp.net
谢亮_vipxieliang8 小时前
用 PHP 构建轻量级 REST API:从路由到鉴权的完整实践
开发语言·后端·php
省钱兄--zs9 小时前
西安24小时自助健身房解决方案实战:系统开发与部署全流程指南
java·spring boot·系统架构·intellij-idea·需求分析
码事漫谈10 小时前
三步改掉 AI 味,附可直接复制的去 AI 味提示词
后端
IT_陈寒11 小时前
Redis卡顿的锅,这次真不是大key的错
前端·人工智能·后端
可乐鸡翅yeah_11 小时前
video.js 集成 hls.js 开发 M3U8 播放器,新手高频踩坑
开发语言·前端·javascript·后端·ecmascript·m3u8·音视频在线播放
ly768911 小时前
Spring Boot 集成 Elasticsearch 的生产实践:客户端选型、索引生命周期与批量写入容错
spring boot·elasticsearch·索引生命周期·java api client·批量写入
程序猿_极客11 小时前
【免费】分享一套优质的基于SpringBoot的服装商城管理系统的设计与实现(带可视化图表、协同过滤功能),源码+文档+视频详解(讲解)
java·spring boot·后端·服装商城管理系统