travel-tracks

用户故事

• 可以看到添加的图片列表
• 可以往图片列表中接入新图片
• 可以用标签搜索图片
• 将鼠标悬停在照片上时，可以看到标签和删除按钮
• 可以删除图片

开发流程

• 先设计数据库， 给后端存入数据， 写好后端服务接口 — 添加和展示所有图片接口
• 前端调出来所有图片，调整样式
• 开发搜索功能、删除

前后端仓库

前端：https://github.com/mvpsheng/myunsplash/tree/master
后端：https://github.com/mvpsheng/imageUploaderBackend

图片列表展示功能

• 前端需要设计一个图片展示样式，通过get请求获取到图片url数据之后，将图片按照一定的样式展示出来。
• 后端需要将图片url存储在数据库中，这样方便进行图片数据的操作。

前端添加图片功能

1. 前端添加图片通过前端路由进入图片上传模块中， 开始图片上传，
2. 图片上传成功后，图片存储在后端服务器（文件夹中）上，并且将url存储在服务器数据库中，
3. 后端返回图片的url地址和图片给前端，前端利用后端返回的url地址将图片显示出来。

删除图片

1. 前端发送删除请求， 后端从数据库中删除图片的url
2. 前端中找不到该图片的url判断为不显示。

功能的使用时机：

打开主页时，展示图片墙。

问题：

• 后端如何用数据库存储图片？

1. 存储图片的路径地址（URL），然后按照文件的路径地址来上传。
2. 存储图片，用mysql数据类型blob（二进制的数据类型）。
3. OSS（阿里云对象存储服务）

• 如何返回数据？
  前端请求照片墙， 后端返回 图片标签和图片url， 前端根据url展示图片。

• 为什么不能直接用http://localhost:8080/uploads/%E8%AE%BE%E7%BD%AE.jpeg 这个链接在浏览器中获取SpringBoot应用根目录的资源？（静态资源的访问控制）

Spring Boot默认情况下不会将静态资源暴露出去，需要进行相应的配置才能让客户端通过链接访问静态资源。可以在application.properties或application.yml中进行相关配置。以application.properties为例，可以添加以下配置：

# 配置静态资源文件路径
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:/path/to/your/uploads/folder/

其中/path/to/your/uploads/folder/为存储上传图片的目录路径，需要将其替换为实际的目录路径。这个配置会将Spring Boot的静态资源路径设置为上述几个路径，同时添加上传图片的目录路径，这样Spring Boot就能够将这个路径下的静态资源暴露出去，供客户端访问了。

注意，如果Spring Boot应用是以jar包形式运行的，那么由于jar包本身是不可写的，需要将上传图片的目录放在jar包之外，否则上传图片的操作可能会失败。

• 图片选择存在服务端的文件夹中的话，这个文件夹的位置如何确定，这个静态资源如何控制访问权限？

获取图片方式的选择

• 自己拼接URL
• 通过Resouce类进行获取URL

URL生成方法

This URL should contain the API endpoint base URL plus the path to the image file using the unique filename.
ImageURL = API终端基础URL + 包含文件名的路径

为什么将图片url存在数据库？

Save images in a database and not just in a folder for frontend access.
Storing images in a database has the following advantages:

1. Easy to query - Can fetch images using various filters like date uploaded, category, etc.
2. Versioning - Can maintain history of changes made to an image.
3. Additional metadata - Can store additional details about an image like title, description, tags, etc. along with the image data.
4. Better security - Databases typically have more security mechanisms in place to prevent unauthorized access as compared to just storing files in a folder.
5. Easier to backup and migrate - Can take backups and migrate a database more easily than just copying files from folders.

主要内容

• 首页
  固定的头部（随着用户对页面进行下滑头部栏是固定的） - 搜索框、 添加/上传按钮
  内容 - 展示当前所有图片

• 添加上传页面 （点击上传按钮时进入上传页面，进行图片上传流程）

• 编辑和查看图片故事（之后附加）

实现过程

1. 主页打开调用get请求，获取图片对象数据， for循环加载图片。
2. 在主页的add按钮路由切换到 imageuploader模块，进行添加图片操作，添加完成之后，点击其他部分可以返回主页。
3. 删除模块
4. 查询功能 - 查询之后进行筛选（展示特性的图片）

请求接口

• 获取全部图片
• 上传图片
• 删除图片
• 按label查询图片

实现难点

• 这个add按钮功能实现 通过添加另外一个页面还是切换加载模块，怎样的的路由实现思路（路由转换到其他模块，或者调用别的项目）？
• 删除模块， hover的时候展示一个操作框，可以进行删除。