前端实习手记(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: {},
    };
};

三、写在最后

  • 撑不下去了!晚安家人们!!!!!
  • 附一张晚上的图 现在是凌晨五点咯,没有日出........丑丑哒
相关推荐
264玫瑰资源库8 分钟前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端18 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED25 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪1 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚2 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑