手记

【学习打卡】第九天 中前台平台搭建,提高工作效率

第一模块


学习课程名称:基于 Vue3 ,打造前台+中台通用提效解决方案
章节名称:图片裁剪与上传处理方案 —— 基于阿里云 OSS 处理用户资料
讲师姓名:Sunday


第二模块


课程内容概述

  1. 通用组件:input 构建方案分析与搭建
  2. 用户基础资料构建
  3. 头像修改方案流程分析
  4. 通用组件:Dialog构建方案分析及搭建
  5. 头像裁剪构建方案
  6. 阿里云OSS与腾讯云COS对象存储方案分析
  7. 登录鉴权解决方案

第三模块


设计初衷

在用户详情页面中,我们会包含大量的 input 输入框。并且这些输入框中会包含最大字数的提示。
那么这样的能力默认的 input 标签是不具备的。
所以我们期望可以把这个 input 构建为咱们自己的通用组件。

组件搭建前置准备

首先要分析组件需要具备哪些能力:

在此项目中,我们期望通用组件 input 可以满足以下场景的使用:
可以以单行输入(input)的形式展示
可以以多行输入(textarea)的形式展示
可以通过 v-model 绑定输入内容
支持设定最大字符数
当然其他的能力可以自行扩展

那么据此设计,我们的 input 通用组件中,需要包含三个对应的 prop:
modelValue:双向绑定
type:text || textarea
max:最大字符数
根据这三个 prop 处理对应的视图即可满足需求

对于头像修改该功能而言分为 PC端 和 移动端 两种情况,我们需要分别进行处理

PC 端:
点击更换头像
选择对应文件
通过 Dialog 展示图片裁剪
裁剪后图片上传
功能完成

移动端:
点击更换头像
选择对应文件
通过 popup 展示图片裁剪
裁剪后图片上传
功能完成
由此可以发现,两者之间需要通过不同的组件进行裁剪展示。

对于 Dialog 通用组件而言,我们可以参考 confirm 的组件的构建过程

它们两个构建方案非常类似,唯二不同的地方是:

Dialog 无需通过方法调用的形式展示
Dialog 的内容区可以渲染任意的内容
排除这两点之后,其余与 confirm 完全相同。

图像裁剪解决方案

想要处理图片裁剪我们需要使用到 cropperjs ,它是一个 JavaScript 的库,同时支持 PC 端 和 移动端。

阿里云 OSS 与 腾讯云 COS 对象存储方案分析

当图片裁剪处理完成之后,接下来我们就可以处理裁剪之后的图片上传了。
那么通常情况下在企业开发中,图片或者文件的管理都会通过 对象存储 的方案进行,目前国内常见的对象存储云方案主要有两个平台。

登录鉴权

登录鉴权功能很常见,工作中用的比较多,通过vue-router的beforeEach可以实现


第四模块

0人推荐
随时随地看视频
慕课网APP