前端实习手记（9）：修修修修bug

本周总结：

• bug修复
• 新增：图片上传组件

主要就讲一下修复的一些bug还有新写的一个组件思路。

一、修bug

(一) 人脸识别与尺寸检测逻辑

要求：上传的图片要先检测尺寸和是否存在人脸。

思路：

看两个比较重要的思路实现：

具体来说：

通过这种方式，可以方便地管理和维护表单字段，同时保持代码的灵活性和可扩展性。

原文链接：https://juejin.cn/post/7406265557131526198

• 这里其实是cv之前的代码（不行看不懂了）
• 

• (二) emits 事件发射机制

  这个就是使用emits自定义事件层层嵌套，最后通过父组件的回调函数打开。

• 

• (三) 隐藏某些选项注意事项

• 不仅仅是把相关的html代码注释掉，要看这个组件里面绑定了 什么值，要传给谁使用，相关的数据和逻辑都要注释掉。

• 二、长表单重构新逻辑

• 上一个项目是把一个页面按照页面结构和一些功能分成了不同的组件来显示。这次的需求是将一个长表单重构。按照我的想法肯定是还按照之前的写成不同的组件。but，下面看看师父的写法（偷偷copy的代码）
• 其实就是一个很长的表单，但是，非常冗长的代码量，抽离组件，使用映射的方式，吧对应的组件映射到相应的位置。
• 使用 Object.keys 和 reduce 方法来遍历 componentsContext 对象的所有键，并将每个组件重新组织成一个新的对象。
• 提取组件名：使用 replace 方法从文件路径中提取组件名。例如，./formItem/MyComponent.vue 会被转换为 MyComponent。
• 
• 真正的逻辑
• 定义和导出表单字段的配置信息，这些配置信息可以用于动态生成表单字段。
• 1. 字段类型：定义了字段的类型（文件上传或图片上传）。
• 1. 字段标识：为每个字段分配了一个唯一的 key，用于标识字段。
• 1. 字段名称：定义了字段的显示名称。
• 1. 必填属性：指定了字段是否为必填。
• 1. 其他属性：预留了扩展属性，以便将来可以添加更多的配置项。