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的放行)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/445284.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Compose第六弹 对话框与弹窗

1.compose中怎么使用对话框? 2.怎么显示Popup弹窗? 一、Compose显示对话框 二、Popup Popup就类似以前的Popupwindow,我们可以看到其实上面的DropdownMenu是Popup的一个具体实现。 2.1 Popup定义 Popup的定义如下: Composable…

Windows 下 cocos2d-x-3.17.2 VS2017开发环境搭建

1.下载cocos2d-x-3.17.2 源码: Cocos2d-x - 成熟、轻量、开放的跨平台解决方案 2.下载Python2 Python 2.7.0 Release | Python.org 加入环境变量: 测试版本

JAVA基础 day12

一、File、IO流 File是java.io.包下的类,file类的对象,用于代表当前操作系统的文件(可以代表文件、文件夹),使用File可以操作文件及文件夹。 注意:File只能对文件本身进行操作,不能读写文件里…

哈夫曼树和哈夫曼编码

现在需要对下列字符编码 其中我么你发现A 出现三次,B出现一次,C出现两次,D出现一次 那么我们统计出现次数为:3,2,1,1 我们将1,1组成一个树 现在统计次数变为3,2&#x…

Java—继承性与多态性

目录 一、this关键字 1. 理解this 2. this练习 二、继承性 2.1 继承性的理解 2.1.1 多层继承 2.2 继承性的使用练习 2.2.1 练习1 2.2.2 练习2 2.3 方法的重写 2.4 super关键字 2.4.1 子类对象实例化 三、多态性 3.1 多态性的理解 3.2 向下转型与多态练习 四、Ob…

构建高效作业管理平台:Spring Boot师生协作评审系统

1系统概述 1.1 研究背景 如今互联网高速发展,网络遍布全球,通过互联网发布的消息能快而方便的传播到世界每个角落,并且互联网上能传播的信息也很广,比如文字、图片、声音、视频等。从而,这种种好处使得互联网成了信息传…

神经网络超参数优化

遗传算法与深度学习实战(16)——神经网络超参数优化 0. 前言1. 深度学习基础1.1 传统机器学习1.2 深度学习 2. 神经网络超参数调整2.1 超参数调整策略2.2 超参数调整对神经网络影响 3. 超参数调整规则小结系列链接 0. 前言 我们已经学习了多种形式的进化…

鸿蒙开发实战项目【硅谷租房】--- 项目介绍

目录 一、简述 二、项目资料 2.1 UI设计稿 2.2 服务器 2.3 Apifox接口JSON文件 使用 Apifox 测试接口 一、简述 这是一个基于 鸿蒙 API12 开发的移动端租房 App,用户可以使用该应用搜索租房列表、查看房屋详情、预约租房等。 该项目的tabbar包含五部分&…

网站集群批量管理-Ansible(ad-hoc)

1. 概述 1. 自动化运维: 批量管理,批量分发,批量执行,维护 2. 无客户端,基于ssh进行管理与维护 2. 环境准备 环境主机ansible10.0.0.7(管理节点)nfs01 10.0.0.31(被管理节点)backup10.0.0.41(被管理节点) 2.1 创建密钥认证 安装sshpass yum install -y sshpass #!/bin/bash ##…

Android终端GB28181音视频实时回传设计探讨

技术背景 好多开发者,在调研Android平台GB28181实时回传的时候,对这块整体的流程,没有个整体的了解,本文以大牛直播SDK的SmartGBD设计开发为例,聊下如何在Android终端实现GB28181音视频数据实时回传。 技术实现 Andr…

操作系统导论阅读 - 虚拟化

近期系统性地过一下操作系统导论 第二章 操作系统介绍 冯诺伊曼架构 冯诺依曼架构的核心思想: 使用二进制存储数据像存储数据一样来存储程序计算机由输入设备,输出设备以及控制器,运算器和存储器五部分组成 通常使用的键盘,…

SevenZip++显示当前压缩进度的范例

以前写7z压缩工具,直接调用命令行的话,因为无法提取命令行的压缩进度所以无法在界面上显示当前压缩进度,现在用SevenZip,成功提取到了压缩到7z过程中的压缩进度,先在命令行中展示一下效果吧。 直接上代码,看…

企业架构系列(19)TOGAF企业连续体和构建块

TOGAF 企业连续体(Enterprise Continuum)是一个用于对架构描述进行分类的框架。它有助于突出架构师在哪个抽象层次上工作,并概述了不同目的下应使用的不同层次。而构建块(Building Blocks)是用来描述这些架构和解决方案…

机器学习——自动化机器学习(AutoML)

机器学习——自动化机器学习(AutoML) 自动化机器学习(AutoML)——2024年的新趋势什么是AutoML?AutoML的关键组成部分AutoML的优势AutoML 实例:使用Auto-sklearn进行回归分析AutoML的应用领域2024年值得关注…

高效的读书与笔记管理:打造个人知识体系

01 读书学习的常见问题 1、读书⼯具分散,划线和笔记分散,导致我们的复习、搜索效率低。⽐如不同书籍中,提到了同⼀个问题的观点,很难进行关联。 2、读书,仅限于读,知道别⼈的观点,但是缺乏内…

【Qt】控件概述(3)—— 显示类控件

显示类控件 1. QLabel——标签1.1 setPixmap设置图片1.2 setAlignment设置文本对齐方式1.3 setWordWrap设置自动换行1.4 setIndent设置缩进1.5 setMargin设置边距1.6 body 2. QLCDNumber2.1 使用QTimer实现一个倒计时效果2.2 使用循环的方式实现倒计时 3. QProgressBar——进度…

商贸物流痛点解析

商贸物流痛点解析 在当今全球化的商业环境中,商贸与物流之间的紧密协作已成为业务成功的关键因素。然而,许多组织面临着信息不对称、资源配套不足以及系统间隔离等痛点,这些问题严重阻碍了商贸体系与物流、仓储和园区的有效联动,…

Linux高效查日志命令介绍

说明:之前介绍Linux补充命令时,有介绍使用tail、grep命令查日志; Linux命令补充 今天发现仅凭这两条命令不够,本文扩展介绍一下。 命令一:查看日志开头 head -n 行数 日志路径如下,可以查看程序启动是否…

数据库SQL基础教程(二)

目录 连接(JOIN) 语法: 不同的 SQL JOIN INNER JOIN 关键字 LEFT JOIN 关键字 SQL LEFT JOIN 语法 RIGHT JOIN 关键字 SQL RIGHT JOIN 语法 FULL OUTER JOIN 关键字 SQL FULL OUTER JOIN 语法 UNION 操作符 SQL UNION 语法 SQL UNION ALL 语法 SELECT I…

uniapp引入ThorUI的方法

1、下载文件 2、复制相应的文件除了pages 3、往项目中复制即可 4、引入即可实现 5、添加easycome自动引入