当前位置：首页 > news >正文

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

news 2025/8/21 7:32:18

瞬移第九周！上周的需求基本完成之后就拿去提测了，提了好多bug（OMG），好像都是师父背的锅呢（对不起）。然后开启无限修bug模式......

本周总结：

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

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

一、修bug

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

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

思路：

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

const checkImageWH = async (file: File): Promise<boolean> => {const { width, height } = await getImageWH(file);
const size = width * height;
console.log('size', size, width, height);
return size >= 800 * 800 && size <= 4096 * 4096;
};const checkImage = async (thumbPath: string): Promise<boolean> => {const STATE = {SUCCESS: 'success',PENDING: 'pending',FAILED: 'failed',};const res = await Http.post('/resource/xxxx', { image: thumbPath });
let valid = true;
for (;;) {await sleep(2500);const res2 = await Http.get('/resource/xxxxq', { uid: res.data.uid });if (res2.data.state === STATE.PENDING) continue;else if (res2.data.state === STATE.FAILED) throw new Error(res2.message);else {valid = !!res2.data.result.length;break;}
}
return valid;
};const onFileChange = async (file: any) => {// state.scene = file;try {state.loadingUpload = true;const fileUploader = new FileUploader();const res = await fileUploader.upload(file, {mediaUpdate: false,directory: getUploadPath('/qt/xxxx'),routePath: '/qt/upload',});if (!(await checkImage(res.href))) {return _modal.warning({title: xxxx,content: yyyyyy,});} else {state.scene = file;}} catch (err) {console.error(err);_message.error(err?.message || "xxxxxx";} finally {state.loadingUpload = false;}
};

(二) emits 事件发射机制

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

const emits = defineEmits([ 'openNewUrl']);
const checkPolicy = () => {const url = 'https://juejin';emits('openNewUrl', url);
};<ACheckbox ><div @click="checkPolicy" /></ACheckbox>

const emits = defineEmits(['update:checkedList', 'update:faceSwapVersion', 'openNewUrl']);const openNewUrl = (url: string) => {emits('openNewUrl', url);
};
....<div v-if="isAddVisible"><com1  @openNewUrl="openNewUrl" /></div>

  const openNewUrl = (url: string) => {softwareImpl.openUrl(url);};
......<com2@openNewUrl="openNewUrl"/>

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

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

二、长表单重构新逻辑

上一个项目是把一个页面按照页面结构和一些功能分成了不同的组件来显示。这次的需求是将一个长表单重构。按照我的想法肯定是还按照之前的写成不同的组件。but，下面看看师父的写法（偷偷copy的代码）
其实就是一个很长的表单，但是，非常冗长的代码量，抽离组件，使用映射的方式，吧对应的组件映射到相应的位置。

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

使用 Object.keys 和 reduce 方法来遍历 componentsContext 对象的所有键，并将每个组件重新组织成一个新的对象。
提取组件名：使用 replace 方法从文件路径中提取组件名。例如，./formItem/MyComponent.vue 会被转换为 MyComponent。

const componentsContext = import.meta.globEager('./formItem/*.vue');
const components: Record<string, any> = Object.keys(componentsContext).reduce((acc, cur) => {acc[cur.replace('./formItem/', '').replace('.vue', '')] = componentsContext[cur].default;return acc;
}, {} as Record<string, any>);export default components;

真正的逻辑
定义和导出表单字段的配置信息，这些配置信息可以用于动态生成表单字段。

具体来说：

1. 字段类型：定义了字段的类型（文件上传或图片上传）。
2. 字段标识：为每个字段分配了一个唯一的 key，用于标识字段。
3. 字段名称：定义了字段的显示名称。
4. 必填属性：指定了字段是否为必填。
5. 其他属性：预留了扩展属性，以便将来可以添加更多的配置项。

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

import FieldConfig from '@market/tools/form/domains/formItem/FieldConfig';
....export const plate = (): FieldConfig => {return {compType: 'File',key: 'plate',name: 'plate 文件',required: false,attrs: {},};
};export const thumb = (): FieldConfig => {return {compType: 'Image',key: 'thumb',name: '缩略图文件',required: true,attrs: {},};
};