• VUE3-工作笔记-06

    本节：总结11月份学习的内容

    1.如果有很多个功能是一样的，那就先写一个测试很多次，确定没有bug再全部改，不然辛辛苦苦全部改了之后，发现还是有bug又要重新改，最好是写成组件的形式，写成hook。

    2.命名规范：如果是一样功能的方法，不同页面也叫一样的名字，这样比较规范，复制的时候也不容易出错。

    命名规范：

    获取单个对象用 get 做前缀，或者value做后缀。

    获取对象数组用 list 做后缀。查询用 query/search 做前缀

    插入用 add/save 做前缀。编辑、更新用 edit/update 做前缀。数组对象用 List 做后缀。类名首字母大写。提交方法叫 onSubmit,或者其他的操作可以是deleteClick这样。

    命名需要符合语义化，如果函数命名，可以采用加上动词前缀：

    can 判断是否可执行某个动作；has 判断是否含有某个值；is 判断是否为某个值

    get 获取某个值；set 设置某个值； isShow: '是否显示', isVisible: '是否可见',

    isLoading: '是否处于加载中', isConnecting: '是否处于连接中',

    isValidating: '正在验证中', isRunning: '正在运行中', isListening: '正在监听中'

    前端命名规则与各个场景的命名方法，解决你取变量名的痛苦！！！（二） - 掘金

    固定的大小值，比如表格，这些也记录下来，就不用老是找了；表格的栏目之间的位置摆放也要有想法，如果有的值是固定文字大小，而且你其他地方也需要位置，那那个已知的规定文字大小，就要设置好位置，不要占太大空间，包括下拉框之类的，这种位置空间上的小细节，一般边距是8px的倍数来变化。（在没有ui设计的情况下）

    3.是值的时候才用ref,是对象就用reative。但是，要注意reatvice赋值普通数据会失去响应式。

    4.分页的写法，既然分页一点就变化，但是我又要调用搜索方法，那么就直接把要传的值放在搜索里面，点击搜索之后，获取数据的值才赋值到，不然初始化的时候就问空，这样获取值又可以总是获取到全部。

    5.一些常用的js函数：

    string.replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串;

    字符串转为数字： Number(str); parseInt(12.312)//将任何内容为整数（小数、字符串等）

    把数字转换为字符串： num.toString()，num.toString(2||8||16 );//转换成对应的2、8、16进制

     Math.floor(123.2312)向下取整 ；Math.ceil( ) 向上取整；Math.round(2.60);//四舍五入取整数

    a.toFixed(2) 取两位小数 //进行四舍五入并保留固定小数位；a.toFixed() 这是取整

    Math.pow()方法将基数返回指数幂，即，基数指数。Math.pow(5, 3);// 125

    Math.abs(-7.25);//返回7.25   abs()取一个数的绝对值，感觉就是取正数。x 的绝对值。如果 x 不是数字返回 NaN,如果 x 为 null 返回 0。

    str.match(正则表达式) // 可以字符串中检索指定的值，或者是匹配一个或多个正则表达式

     array.indexOf(“检查的字符”)/lastIndexOf() 返回检索字符所在的位置

    array.concat(); //连接多个字符串，或者数组。var str1 = "Hello ";var str2 = "world!";
    var n = str1.concat(str2);

    array.every(函数判断) 方法用于检测数组所有元素是否都符合指定条件,返回false或者true（）。

    array.fill() 方法用于将一个固定值替换数组的元素。

    array.pop() 方法用于删除数组的最后一个元素并返回删除的元素 ;

    array.shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

    array.filter(函数判断)，用于过滤出一个新的数组，新数组中的每个元素是通过判断，符合条件的所有元素

    例子：array.filter((el) => userList.includes(el.id)) 

    filter((el)=>{   判断内容})就可以对元素的状态进行一个函数的判断，挑出你要的（过滤出你要），组成一个新的数组，不会影响原来的数组。

    Map的item和some的el是一样的都是单个的对象

    ps:如何把数组对象中的属性单独提取出来成为一个新的对象数组？

    给对象添加元素，直接  对象名.添加的元素名 = 添加的元素内容；

    删除对象里面的属性，也是直接，delete  对象名.属性名。

    ps:删除数组里面符合某个条件元素的对象。 先遍历循环，然后判断，slipce掉对应的数组。

    spaceList.value.splice(i, 1);

    str.slice(-1) 提取字符串的某个部分，并以新的字符串返回被提取的部分
    string.slice(start(1开始位置),end(结束位置))
    start如果为负数，则从尾部开始截取

    1.  for (let j = 0; j < props.judgeSelectDevice.length; j++) {
    2.       if (spaceList.value[i]?.id == props.judgeSelectDevice[i]?.id) {
    3.         spaceList.value.splice(i, 1);
    4.       }
    5.     }

    array.some():判断新添加的内容，是不是已存在的

    1. div:
    2. <a-input
    3.             v-model:value="denyIp"
    4.        
    5.           >a-input>
    6.           <a-button @click="handleAddDenyIp(denyIp)">添加a-button>
    7.  
    8. script:
    9. // 添加限制ip
    10. const handleAddDenyIp = (denyIp: string) => {
    11.   if (denyIp && !data.denyIp.includes(denyIp)) {
    12.     data.denyIp.unshift(denyIp);
    13.   }
    14. };

    JavaScript Array 对象 | 菜鸟教程 ：这是对象和数组的方法大全

    6.使用ant design 滑轮组件的时候，max不会渲染计算之后的值，加上max之后，v-model的值初始化的时候也不显示，原因是我渲染值的顺序有问题，一开始计算的max的值没有获取到。组件有时候也会有问题，但是属性一般都是可以动态获取的，所以要检查自己的代码，都打出来看看，或者百度。

    7.vue3模态框初始化数据，点击第一次没获取到，点击第二次才获取到，使用nextTick，实现异步获取的方法

    1. const showModal = async () => {
    2.   await nextTick();
    3.   visible.value = true;
    4.   getFusion();
    5. };

    8.值一直获取不到，可能是ref的类型，忘记加 .value， 所以赋值的时候没赋值到值。如果在渲染div的部分里面ref属性的值加了. value，可能会报渲染问题的错误

    9.VUE中computed 、created 、mounted 的先后顺序

    （1）.computed 、created 、mounted 的先后顺序

    created => computed => mounted

    （2）.父子组件生命周期执行顺序(子组件先挂载好，在进行父组件的挂载)

    ​ 页面初始化时： 父beforeCreate -> 父created -> 父beforeMount ->子beforeCreate -> 子created ->子beforeMount -> 子mounted-> 父mounted

    页面销毁时： 父beforeDestroy -> 子beforeDestroy ->子destroyed->父 destroyed

    销毁时也是子组件先销毁要先于父组件销毁

    （3）.页面跳转的生命周期执行顺序

    ​ 旧页面跳转到新页面： 新页面created > 新beforeMount > 旧beforeDestroy > 旧：destroyed > 新mounted

    （4）.computed 、watch、created 、mounted 的先后顺序

    immediate 为false时： created => computed => mounted => watch

    immediate 为true时： watch =>created=> computed => mounted

    昨天纠结了很久，以为是生命周期的问题，因为一开始是跳了个0，然后才出现真实的数字，但是，页面取到的还是原先的数字。但是计算器的属性就是有变化，它就会计算，后面发现原因是其实数字是获取到了，但是其他地方进行了一个计算，要不就是数字取值的时候就有问题，所以看起来有问题，以后遇到这种问题，要输出来看，然后再看看其他地方。

    10.v-model' directives require the attribute value which is valid as LHS.

         v-model的值必须是一个数据变量，而不是一个条件值或计算值。如果你需要用条件值或计算值，那么建议不要使用v-model，而是手动传递props并侦听change事件。

    11.Unhandled error during execution of render function 执行渲染函数期间出现未处理的错误

    有时候就是多了个value，在渲染div的时候，一些部分不应该有value

    12.下拉框，绑定多个值，两种方法：

    （1）:value="`${item.dev},$(item.path)`" 

    再通过split(",")以逗号分割，赋值。

     ps:但是太麻烦了，而且唯一命名里面有","   那就容易数据出错，所以用方法二。

    方法二：通过change变化监听获取到的值，:record="",

    13.ant design校验规则第二层，或者创建个新数组。

    14.判断数字转换成对应的文字:写方法，传值，进行if判断，return "内容"。

    15.ant.design Table组件点击一个选项框却把所有选项都选中了,因为要绑定一个唯一值，这样：rowKey="ipAddress"就可以了。

    要不就是没有点击的内容，那是因为没有绑定v-model值 

    16.calc() 函数用于动态计算长度值。

    需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);height:calc(100%-400px)

    17.上传文件代码：

    1. //div
    2.      
    3.             action="/v1/licence/download"
    4.             :customRequest="customRequest"
    5.             :fileList="[]"
    6.           >
    7.             <a-button type="primary"
    8.               ><CloudUploadOutlined />上传授权码
    9.             a-button>
    10.           
    11.  
    12.  
    13. //script
    14.  
    15. // 上传文件
    16. const customRequest = (data: any) => {
    17.   let { file } = data;
    18.   if (!file) return message.info("未选择上传文件");
    19.   if (file.size > 16 * 1024) return message.info("上传文件大小不得超过16KB");
    20.   let formData = new FormData(); //创建一个空对象
    21.   formData.append("licence.da", file); //添加数据.append(name,value)
    22.   upload(formData).then((res) => {
    23.     let result = res.data;
    24.     if (result && !result.code) {
    25.       getData();
    26.       message.success("文件上传成功");
    27.     }
    28.   });
    29. };
    30.

    导入文件，上传前判断是不是xls和xlsx类型的文件：

    1.   
    2.               action="/v1/log/import"
    3.               :customRequest="upLoad"
    4.               :fileList="[]"
    5.             >
    6.               <a-tooltip :title="$t('journal.journalList.xls_txtFarmot')">
    7.                 <a-button ghost type="primary" class="filter-search">
    8.                   <template #icon>
    9.                     <upload-outlined />
    10.                   template>
    11.                   {{ $t("journal.journalList.importBtn") }}
    12.                 a-button>
    13.               a-tooltip>
    14.             
    15.  
    16.  
    17. //script
    18.  
    19. // 导入文件大小判断
    20. const beforeUpLoad = (file: any) => {
    21.   if (!file) return false;
    22.   let { size, type } = file;
    23.   let typeList = ["application/vnd.ms-excel", "text/plain"]; //xls和xlsx的文件类型
    24.   let isType = typeList.includes(type); //判断是不是这两种文件类型
    25.   let isLimit = !(size / (1024 * 1024) > 64); //大小
    26.   if (!isType) message.error(t("journal.journalList.messageError1"));
    27.   if (!isLimit) message.error(t("journal.journalList.messageError2"));
    28.   return isType && isLimit; //返回判断的大小和文件类型的值
    29. };
    30.  
    31.  
    32. // 导入文件
    33. const upLoad = (file: { file: string | Blob }) => {
    34.   // 导入日志文件
    35.   Modal.confirm({
    36.     title: t("journal.journalList.hint"),
    37.     content: t("journal.journalList.importHint"),
    38.     onOk: () => {
    39.       if (!file) return;
    40.       let valid = beforeUpLoad(file.file); //判断文件大小
    41.       if (!valid) return;
    42.       let format = new FormData(); //创建一个空对象
    43.       format.append("importLog", file.file); //添加数据
    44.       upJournal(format).then((res) => {
    45.         if (!res.code) {
    46.           message.success(t("journal.journalList.logExpressSuccess"));
    47.         }
    48.         state.selectedRowKeys = [];
    49.       });
    50.     },
    51.     onCancel: () => {
    52.       message.info(t("journal.journalList.cancelOperation"));
    53.     },
    54.   });
    55. };

    18.下载文件代码：

    1.  
    2. //script
    3. // 下载:使用blob格式处理数据流进行下载
    4. const download = () => {
    5.   downLicence().then((res: any) => {
    6.     let { data } = res;
    7.     let filename =
    8.       res.headers["content-disposition"].match(/filename=(\S*)/)[1];
    9.     if (data) {
    10.       const blobContent = new Blob([data]); //处理文档流，字节大小
    11.       const blobUrl = URL.createObjectURL(blobContent); //通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
    12.       let a = document.createElement("a"); //获取下载的文件信息
    13.       a.download = filename;
    14.       a.style.display = "none";
    15.       a.href = blobUrl;
    16.       document.body.appendChild(a);
    17.       a.click();
    18.       URL.revokeObjectURL(blobUrl); // 释放URL 对象
    19.       document.body.removeChild(a); //下载完成移除
    20.       message.success("授权许可下载成功");
    21.     } else {
    22.       message.error("授权许可下载失败");
    23.     }
    24.   });
    25. };

    导出文件：

    1. // 导出日志
    2. const handleOut = () => {
    3.   // 导出日志
    4.   Modal.confirm({
    5.     title: t("journal.journalList.exportLog"),
    6.     content: t("journal.journalList.exportHint"),
    7.     onOk: () => {
    8.       let obj = Object.assign({}, { format }, searchList);
    9.       outJournal(obj).then((res) => {
    10.         let result = res.data;
    11.         let resHeaders: object | null | any = res.headers;
    12.         let { code } = result;
    13.         if (!code) {
    14.           let blob = new Blob([result], {
    15.             type: "application/json;charset=utf-8",
    16.           });
    17.           let url = window.URL.createObjectURL(blob);
    18.           let filename =
    19.             resHeaders["content-disposition"].match(/filename=(\S*)/)[1];
    20.           let aLink = document.createElement("a");
    21.           aLink.href = url;
    22.           aLink.download = filename;
    23.           aLink.style.display = "none";
    24.           document.body.appendChild(aLink);
    25.           aLink.click();
    26.           document.body.removeChild(aLink);
    27.           window.URL.revokeObjectURL(url);
    28.         }
    29.       });
    30.     },
    31.     onCancel: () => {
    32.       message.info(t("journal.journalList.cancelOperation"));
    33.     },
    34.   });
    35. };

  • 相关阅读:
    Java.lang.Class类 getTypeParameters()方法有什么功能呢？
    基于回溯搜索优化的BP神经网络（分类应用） - 附代码
    泛型的学习
    Inductive Representation Learning on Large Graphs 论文/GraphSAGE学习笔记
    在jupyter中更改、增加内核
    一起掌握String的用法
    [C#]vs2022安装后C#创建winform没有.net framework4.8
    1.4、计算机网络的定义和分类
    C++智能指针原理与实现
    SpringBoot项目本机和Linux环境部署
  • 原文地址：https://blog.csdn.net/m0_59214979/article/details/128151632