前端实习手记(9):修修修修bug

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

本周总结:

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

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

一、修bug

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

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

思路:

  • 这里其实是cv之前的代码(不行看不懂了)
javascript 复制代码
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自定义事件层层嵌套,最后通过父组件的回调函数打开。

javascript 复制代码
const emits = defineEmits([ 'openNewUrl']);
const checkPolicy = () => {
  const url = 'https://juejin';
  emits('openNewUrl', url);
};

<ACheckbox >
  <div @click="checkPolicy" />
  </ACheckbox>
javascript 复制代码
const emits = defineEmits(['update:checkedList', 'update:faceSwapVersion', 'openNewUrl']);

const openNewUrl = (url: string) => {
  emits('openNewUrl', url);
};
....
  <div v-if="isAddVisible">
  <com1  @openNewUrl="openNewUrl" />
  </div>
javascript 复制代码
  const openNewUrl = (url: string) => {
  softwareImpl.openUrl(url);
  };
......
  <com2
    @openNewUrl="openNewUrl"
    />

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

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

二、长表单重构新逻辑

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

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

  • 使用 Object.keys 和 reduce 方法来遍历 componentsContext 对象的所有键,并将每个组件重新组织成一个新的对象。
  • 提取组件名:使用 replace 方法从文件路径中提取组件名。例如,./formItem/MyComponent.vue 会被转换为 MyComponent。
javascript 复制代码
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. 字段类型:定义了字段的类型(文件上传或图片上传)。
    1. 字段标识:为每个字段分配了一个唯一的 key,用于标识字段。
    1. 字段名称:定义了字段的显示名称。
    1. 必填属性:指定了字段是否为必填。
    1. 其他属性:预留了扩展属性,以便将来可以添加更多的配置项。

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

javascript 复制代码
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: {},
    };
};

三、写在最后

  • 撑不下去了!晚安家人们!!!!!
  • 附一张晚上的图 现在是凌晨五点咯,没有日出........丑丑哒
相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript