今天终于完成了自己在这家公司写的第一个独立页面
也算是值得记录一下吧,毕竟发现了自己的差距,有很多不会的地方都是摸着石头过河,搓出来这个页面并不算容易。
前期
整个组织编写代码的过程其实在前期都还算顺利。虽然有两个小难点,也就是嵌套路由配置和瀑布流➕无限滚动刷新,但是还是相对快的解决了(后者用的Masonry.js)页面布局部分也还算轻松,能发觉自己的些许进步,比刚来时更轻车熟路一些。
中期
中期是实现那些不涉及OSS存储的接口和对应的页面逻辑以及数据的渲染。单纯的发送网络请求其实很简单,但是有很多数据是需要从外层组件或者子组件传递的,这部分有些还涉及页面挂载阶段产生的数据。这里困扰了一下,因为vue中响应式数据收集依赖是在挂载前完成的,所以如果在负组件的onMonted钩子中发送请求获取响应式数据,在子组件中是无法及时更新的,因此需要在子组件挂载时监听该数据,才能实现正常更新父组件注入的数据。
后期
后期就是完成那几个与OSS有关的接口的。说实话,我之前压根没听说过什么是对象存储,一头雾水。问了问AI,也似懂非懂,请求写好了,但数据就是加载不出来。后来终于琢磨明白了一些(此处借用豆包的解释,在我反复追问下终于给出个差不多的回答):
上传时的流程
- 文件发送到 OSS:前端通常借助 OSS 提供的 SDK,在用户选择文件后,直接将文件上传到 OSS。比如利用阿里云 OSS 的 JavaScript SDK,在获取用户选择的文件对象后,调用相关方法(如
put)并传入文件路径等参数,把文件上传到指定的 OSS 存储桶。为确保安全,一般会配合 STS(Security Token Service)临时授权机制,由后端获取并向前端提供临时访问凭证,前端使用该凭证初始化 OSS 客户端后再进行上传 。 - 文件路径发送到后端:文件成功上传到 OSS 后,会得到一个在 OSS 中的访问路径。前端将这个路径连同文件的其他相关信息(如文件名、文件大小等),通过 HTTP 请求(比如
POST请求 )发送到后端。后端接收这些信息后,将其存储到数据库中,以便后续管理和查询,如记录用户上传文件的信息,用于展示用户的文件列表等。
请求文件时的流程
当需要获取文件时(比如用户在前端请求查看自己上传的文件 ),前端向后端发起请求,后端从数据库中查询对应的文件路径信息,然后将文件路径返回给前端。前端拿到路径后,直接使用该路径从 OSS 获取文件并展示给用户。
这种策略的优势
- 减轻后端压力:文件直接上传到 OSS,不经过后端服务器中转,减少了后端服务器的存储和带宽压力,后端只需处理文件路径等少量元数据信息。
- 提高上传效率:OSS 具备强大的存储和传输能力,能高效处理文件上传,且支持多种上传方式(如分片上传、断点续传等 ),在网络不稳定等情况下也能保证上传的稳定性和效率。
- 方便管理:后端集中管理文件路径等信息,便于实现权限控制、文件检索、统计分析等业务逻辑。比如可以根据用户权限判断是否允许其访问某个文件路径对应的文件;可以通过查询数据库中存储的文件路径信息,快速检索出用户上传的所有文件等。
结语
总之,学到很多,也越来越认识到自己知识、经验的匮乏。很多公司默认我该会的我都没有掌握,还是需要继续学习。
加油