第一页 上页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式: 摘要 | 列表 ]

Blob是什么

在JavaScript中,Blob(二进制大对象)对象是一种用于表示原始数据的类文件对象,它存储了任意类型的数据,通常是二进制数据,但也可以包含文本数据或其他格式的数据。Blob对象通常用于在客户端浏览器中处理二进制数据,比如文件上传、数据传输等场景。(Blob对象可以将任意类型的数据转换为二进制形式进行存储和处理。这使得Blob对象成为处理各种数据类型的有效工具,包括文本、图像、音频、视频等。在JavaScript中,Blob对象提供了一种统一的接口来处理这些数据,无论是从用户上传的文件中获取数据,还是从其他来源获取数据,都可以使用Blob对象来进行二进制处理。)

Blob的用途

Blob对象常见的使用情况包括:

  • 文件上传:当用户通过网页上传文件时,浏览器会创建一个Blob对象来表示上传的文件数据,然后可以将该Blob对象发送到服务器端进行处理。

  • 数据传输:在客户端与服务器端进行数据交互时,可以使用Blob对象来存储和传输二进制数据,例如通过XMLHttpRequest或Fetch API发送Blob对象。

  • 图像处理:在客户端对图像进行处理时,可以将图像数据存储在Blob对象中,并通过Canvas API等技术进行操作和显示。

  • 媒体处理:在处理音频或视频等媒体数据时,可以使用Blob对象来存储和处理媒体数据。

和file文件流的关系

以下是Blob对象和File对象之间的联系和区别:

  • Blob对象:
    Blob对象是二进制数据的容器,可以包含任意类型的数据,如文本、图像、音频或视频等。
    可以通过构造函数 new Blob(data, options) 创建 Blob 对象,其中 data 是包含数据的数组或数组缓冲区,options 是一个可选对象,用于指定 Blob 的 MIME 类型和结束符等信息。

  • File对象:
    File对象是Blob对象的一种扩展,通常用于表示用户系统中的文件,具有文件名和最后修改日期等属性。
    可以通过 new File(data, name, options) 构造函数创建 File 对象,其中 data 是包含数据的数组或数组缓冲区,name 是文件名,options 是一个可选对象,用于指定文件的 MIME 类型和最后修改日期等信息。

联系与区别:
File对象是Blob对象的子类,因此所有可以对Blob对象执行的操作也同样适用于File对象。
File对象在表示文件时具有额外的元数据,如文件名和最后修改日期等。
在实际使用中,Blob对象通常用于处理二进制数据,而File对象则用于处理用户系统中的文件,如文件上传和操作。

因此,可以说File对象是Blob对象的一种特殊情况,用于在JavaScript中表示用户系统中的文件,并提供了额外的文件相关的属性。

Blob和File文件流,base64的转化

Blob对象转文件: 可以使用File构造函数将Blob对象转换为文件对象。File构造函数接受一个Blob对象和一个文件名作为参数,然后返回一个文件对象。

JavaScript代码
  1. var blob = new Blob(["blob data"], { type: "text/plain" });  
  2. var file = new File([blob], "filename.txt");  

Blob对象转Base64: 可以使用FileReader对象将Blob对象转换为Base64编码的字符串。FileReader对象可以读取Blob对象中的数据,并以指定的编码格式输出。

JavaScript代码
  1. var blob = new Blob(["blob data"], { type: "text/plain" });  
  2. var reader = new FileReader();  
  3. reader.readAsDataURL(blob);  
  4. reader.onload = function () {  
  5.   var base64String = reader.result;  
  6. };  

Base64转Blob对象: 可以将Base64编码的字符串转换回Blob对象。这可以通过创建一个新的Blob对象并指定Base64字符串的数据类型完成。

JavaScript代码
  1. var base64String = "base64 data";  
  2. var byteCharacters = atob(base64String);  
  3. var byteNumbers = new Array(byteCharacters.length);  
  4. for (var i = 0; i < byteCharacters.length; i++) {  
  5.   byteNumbers[i] = byteCharacters.charCodeAt(i);  
  6. }  
  7. var byteArray = new Uint8Array(byteNumbers);  
  8. var blob = new Blob([byteArray], { type: "image/jpeg" });  

golang time类型格式默认序列化为json的时候,是iso 8601格式

比如:2023-03-09T23:43:43+08:00

ISO 8601 格式的时间表示法,常用于表示世界范围内的时间和日期。ISO 8601 格式使用连字符 "-" 分隔日期和时间部分,并以字母 "T" 分隔日期和时间部分,其中 "T" 后面跟着时间部分。在这个时间表示中,"2023-03-09" 表示日期部分,"23:43:43+08:00" 表示时间部分和时区偏移量。其中,"+08:00" 表示相对于 UTC 时间偏移了 8 个小时,也就是北京时间。

//[ISO 8601标准中的日期和时间格式解析]

//2024-07-24T15:36:00+08:00 (要使用"+08:00",UTC时间偏移了8个小时,也就是北京时间:表示东八区)

//2024-07-24T15:36:00-05:00 (而"-05:00"则表示西五区的美国东部时间)

//其中"T"用来分割日期和时间,时间后面跟着的"-07:00"表示西七区,注意"-"是连字符,不是减号

//其中"Z"为UTC时区标识

JS - ISO 8601格式时间,转换时间戳方法

JavaScript代码
  1. /*** ISO日期时间戳转时间对象 ***/  
  2. const isoString = '2021-03-25T15:00:00Z';  
  3. const date = new Date(isoString);  
  4.   
  5. /*** 时间对象转ISO日期时间戳字符串 ***/  
  6. const date = new Date();  
  7. const isoString = date.toISOString();  

 

JS时区转换方法

JavaScript代码
  1. //UTC时区时间  
  2. var iso8601String = "2022-01-01T12:00:00.000Z";  
  3. var date = new Date(iso8601String);  
  4. console.log('date', date)  
  5.   
  6. //打印转换的时间戳  
  7. var utcStr = date.toUTCString(); //转换为UTC字符串  
  8. var ut_localTimeString = date.toLocaleString("en-US", {timeZone: "UTC", hour12: false});                //UTC等于伦敦0时区  
  9. var uk_localTimeString = date.toLocaleString("en-US", {timeZone: "Europe/London", hour12: false});      //欧洲-伦敦  
  10. var us_localTimeString = date.toLocaleString("en-US", {timeZone: "America/New_York", hour12: false});   //北美-纽约  
  11. var cn_localTimeString = date.toLocaleString("en-US", {timeZone: "Asia/Shanghai", hour12: false});      //亚洲-上海  
  12. //console.log('utcStr', utcStr)  
  13. console.log('ut_localTimeString(UTC)', ut_localTimeString);  
  14. console.log('uk_localTimeString(UK)', uk_localTimeString);  
  15. console.log('us_localTimeString(US)', us_localTimeString);  
  16. console.log('cn_localTimeString(CN)', cn_localTimeString);  

 

如下JS格式化时间方法

JavaScript代码
  1. function formatDate(dateString, format = 'yyyy-MM-dd HH:mm:ss') {  
  2.   const date = new Date(dateString);  
  3.   
  4.   const year = date.getFullYear();  
  5.   const month = String(date.getMonth() + 1).padStart(2, '0');  
  6.   const day = String(date.getDate()).padStart(2, '0');  
  7.   const hour = String(date.getHours()).padStart(2, '0');  
  8.   const minute = String(date.getMinutes()).padStart(2, '0');  
  9.   const second = String(date.getSeconds()).padStart(2, '0');  
  10.   
  11.   const formattedDate = format  
  12.     .replace(/yyyy/g, year)  
  13.     .replace(/MM/g, month)  
  14.     .replace(/dd/g, day)  
  15.     .replace(/HH/g, hour)  
  16.     .replace(/mm/g, minute)  
  17.     .replace(/ss/g, second);  
  18.   
  19.   return formattedDate;  
  20. }  
  21.   
  22. // 示例用法  
  23. console.log(formatDate('2022-03-09 23:43:43')); // 输出:2022-03-09 23:43:43  
  24. console.log(formatDate('03/09/2022', 'yyyy年MM月dd日')); // 输出:2022年03月09日  
  25. console.log(formatDate('09 Mar 2022 23:43:43 GMT', 'yyyy-MM-dd HH:mm:ss')); // 输出:2022-03-09 23:43:43  

 

JS中小数相加存在的精度问题

首先来看一段示例:

JavaScript代码
  1. console.log(0.1+0.2);//0.30000000000000004  
  2. console.log(0.2+0.7);//0.8999999999999999  

JS中两数小数相加产生精度问题的原因:

1、js中的数字类型只有number类型,不区分浮点型和整形,直接以浮点型double类型(双精度浮点类型)参与运算。

2、十进制数在做加减法运算前,首先转换为二进制类型再做相加减运算。

3、一些浮点数在转换为二进制数是会出现无线循环的情况,但由于double数据类型是以64位存储表示一个数据,其中第1位为符号位,第2位到第12位为指数位,其余52位为小数位,如此一来,一些浮点数转换为二进制产生无限循环的情况下,double类型数据只能存储64位,所以产生精度缺失问题。

解决办法

该方法仅为其中一个办法:

JavaScript代码
  1. <script>  
  2.         // 精确乘法计算  
  3.         function FloatMul(arg1, arg2) {  
  4.             var m = 0,  
  5.             s1 = arg1.toString(),//将第一个数据转换成字符出类型  
  6.             s2 = arg2.toString();//将第二个数据转换成字符出类型  
  7.             try {  
  8.             m += s1.split(".")[1].length;//截取数据的小数部分,得到小数位数  
  9.             } catch (e) {}  
  10.             try {  
  11.             m += s2.split(".")[1].length;//截取数据的小数部分,得到小数位数  
  12.             //将两个数据的小数位数长度相加  
  13.             } catch (e) {}  
  14.             var result = (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) / Math.pow(10, m);//将两个数扩大对应的小数位数倍转换成数字类型在相乘,乘完再除于对应的扩大倍数得到最终结果  
  15.             return isNaN(result) ? 0 : result;  
  16.         }  
  17.   
  18.         //获得两个小数相加的精确值  
  19.         const accountAdd = (arg1, arg2) => {  
  20.             let r1, r2, m;  
  21.             try {  
  22.             r1 = arg1.toString().split(".")[1].length;//将第一个数据转换成字符出类型,截取数据的小数部分,得到小数位数  
  23.             } catch (e) {  
  24.             r1 = 0;  
  25.             }  
  26.             try {  
  27.             r2 = arg2.toString().split(".")[1].length;//将第一个数据转换成字符出类型,截取数据的小数部分,得到小数位数  
  28.             } catch (e) {  
  29.             r2 = 0;  
  30.             }  
  31.             m = Math.pow(10, Math.max(r1, r2));//取出得到的最长位数,将10扩大最长位数倍  
  32.             return (FloatMul(arg1, m) + FloatMul(arg2, m)) / m;  
  33.         };  
  34.   
  35.         let sum = accountAdd(2.3443, -1.987);  
  36.         console.log(sum);//0.3573  
  37.     </script>  

思路:

1、先将两个小数数据用精确乘法扩大相同倍数,扩大后相加再处于扩大倍数得到最后结果。

 

解决方法一:

首先清理一下缓存。三个点->设置->清除浏览数据,即可。

如果还解决不了,因为Chrome是默认使用HSTS传输,严格的http传输方式。

解决方法二:

 

①在Chrome浏览框输入
chrome://net-internals/#hsts
查询域名google.com的内容

②删除安全证书

完美解决。

总结

这是因为https网站被劫持了,然后Chrome又默认使用HSTS,才导致无法访问。通过上述方法可以解决网站被劫持现象,像之前那些在该浏览器直接敲打thisisunsafe的方法,不怎么见效。

Tags: ,

MD5 加密之 java 与 js 实现

[不指定 2024/01/09 16:45 | by 刘新修 ]

MD5 加密算法实际是一种信息摘要算法,其加密不可逆向解密;

其一般用作数据签名,来确保信息传输的完整性与安全性;

  • 完整性:传输数据完整未丢失
  • 安全性:数据未被恶意篡改

一、java 实现 MD5 加密

Java代码
  1. public class MD5Util {  
  2.   
  3.     /**
  4.      * 对字符串md5加密
  5.      *
  6.      * @param str 传入要加密的字符串
  7.      * @return MD5加密后的字符串(小写+字母)
  8.      */  
  9.     public static String getMD5LowerCase(String str) {  
  10.         try {  
  11.             // 生成一个MD5加密计算摘要  
  12.             MessageDigest md = MessageDigest.getInstance("MD5");  
  13.             // 计算md5函数  
  14.             md.update(str.getBytes());  
  15.             // digest()最后确定返回md5 hash值,返回值为8为字符串。因为md5 hash值是16位的hex值,实际上就是8位的字符  
  16.             // BigInteger函数则将8位的字符串转换成16位hex值,用字符串来表示;得到字符串形式的hash值  
  17.             return new BigInteger(1, md.digest()).toString(16);  
  18.         } catch (Exception e) {  
  19.             e.printStackTrace();  
  20.             return null;  
  21.         }  
  22.     }  
  23.   
  24.     /**
  25.      * 对字符串md5加密
  26.      *
  27.      * @param str 传入要加密的字符串
  28.      * @return MD5加密后的字符串(大写+数字)
  29.      */  
  30.   
  31.     public static String getMD5UpperCase(String s) {  
  32.         char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',  
  33.                 'A', 'B', 'C', 'D', 'E', 'F' };  
  34.         try {  
  35.             byte[] btInput = s.getBytes();  
  36.             // 获得MD5摘要算法的 MessageDigest 对象  
  37.             MessageDigest mdInst = MessageDigest.getInstance("MD5");  
  38.             // 使用指定的字节更新摘要  
  39.             mdInst.update(btInput);  
  40.             // 获得密文  
  41.             byte[] md = mdInst.digest();  
  42.             // 把密文转换成十六进制的字符串形式  
  43.             int j = md.length;  
  44.             char str[] = new char[j * 2];  
  45.             int k = 0;  
  46.             for (int i = 0; i < j; i++) {  
  47.                 byte byte0 = md[i];  
  48.                 str[k++] = hexDigits[byte0 >>> 4 & 0xf];  
  49.                 str[k++] = hexDigits[byte0 & 0xf];  
  50.             }  
  51.             return new String(str);  
  52.         } catch (Exception e) {  
  53.             e.printStackTrace();  
  54.             return null;  
  55.         }  
  56.     }  
  57.   
  58.     public static void main(String[] args) {  
  59.         String str = "\"我+Admin1234~!@#¥%……&*()\"";  
  60.         System.out.println(str);  
  61.         //"我+Admin1234~!@#¥%……&*()"  
  62.           
  63.         String s1 = getMD5LowerCase(str);  
  64.         System.out.println(s1);  
  65.         //6bb6f83c026357a15cdf12e5d6b2b310  
  66.           
  67.         String s2 = getMD5UpperCase(str);  
  68.         System.out.println(s2);  
  69.         //6BB6F83C026357A15CDF12E5D6B2B310  
  70.     }  
  71. }  

测试

db06c78d1e24cf708a14ce81c9b617ec

DB06C78D1E24CF708A14CE81C9B617EC

二、js 实现 MD5 加密

使用第三方库 crypto-js,示例代码如下:

XML/HTML代码
  1. <!DOCTYPE html>  
  2. <html lang="zh-CN">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>111</title>  
  6.     <style type="text/css">  
  7.         body{background:#2C91AE;}  
  8.     </style>  
  9. </head>  
  10. <body>  
  11.   
  12. </body>  
  13. <script src="http://172.16.102.156/public/crypto/crypto-js.min.js"></script>  
  14.   
  15. <!-- 中国文书网MD5加密封装方法调用 -->  
  16. <script type="text/javascript" src="md5.js"></script>  
  17. <script type="text/javascript">  
  18. /*** 刘新修本地md5加密方法封装(大写) ***/  
  19. // function md5(string) {  
  20. //     function rotateLeft(lValue, iShiftBits) {  
  21. //         return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));  
  22. //     }  
  23. //     function addUnsigned(lX, lY) {  
  24. //         var lX4, lY4, lX8, lY8, lResult;  
  25. //         lX8 = (lX & 0x80000000);  
  26. //         lY8 = (lY & 0x80000000);  
  27. //         lX4 = (lX & 0x40000000);  
  28. //         lY4 = (lY & 0x40000000);  
  29. //         lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);  
  30. //         if (lX4 & lY4) {  
  31. //             return (lResult ^ 0x80000000 ^ lX8 ^ lY8);  
  32. //         }  
  33. //         if (lX4 | lY4) {  
  34. //             if (lResult & 0x40000000) {  
  35. //                 return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);  
  36. //             } else {  
  37. //                 return (lResult ^ 0x40000000 ^ lX8 ^ lY8);  
  38. //             }  
  39. //         } else {  
  40. //             return (lResult ^ lX8 ^ lY8);  
  41. //         }  
  42. //     }  
  43.   
  44. //     function f(x, y, z) {  
  45. //         return (x & y) | ((~x) & z);  
  46. //     }  
  47.   
  48. //     function g(x, y, z) {  
  49. //         return (x & z) | (y & (~z));  
  50. //     }  
  51.   
  52. //     function h(x, y, z) {  
  53. //         return (x ^ y ^ z);  
  54. //     }  
  55.   
  56. //     function i(x, y, z) {  
  57. //         return (y ^ (x | (~z)));  
  58. //     }  
  59.   
  60. //     function FF(a, b, c, d, x, s, ac) {  
  61. //         a = addUnsigned(a, addUnsigned(addUnsigned(f(b, c, d), x), ac));  
  62. //         return addUnsigned(rotateLeft(a, s), b);  
  63. //     }  
  64.   
  65. //     function GG(a, b, c, d, x, s, ac) {  
  66. //         a = addUnsigned(a, addUnsigned(addUnsigned(g(b, c, d), x), ac));  
  67. //         return addUnsigned(rotateLeft(a, s), b);  
  68. //     }  
  69.   
  70. //     function HH(a, b, c, d, x, s, ac) {  
  71. //         a = addUnsigned(a, addUnsigned(addUnsigned(h(b, c, d), x), ac));  
  72. //         return addUnsigned(rotateLeft(a, s), b);  
  73. //     }  
  74.   
  75. //     function II(a, b, c, d, x, s, ac) {  
  76. //         a = addUnsigned(a, addUnsigned(addUnsigned(i(b, c, d), x), ac));  
  77. //         return addUnsigned(rotateLeft(a, s), b);  
  78. //     }  
  79.   
  80. //     function convertToWordArray(string) {  
  81. //         var lWordCount;  
  82. //         var lMessageLength = string.length;  
  83. //         var lNumberOfWords_temp1 = lMessageLength + 8;  
  84. //         var lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64;  
  85. //         var lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16;  
  86. //         var lWordArray = new Array(lNumberOfWords - 1);  
  87. //         var lBytePosition = 0;  
  88. //         var lByteCount = 0;  
  89. //         while (lByteCount < lMessageLength) {  
  90. //             lWordCount = (lByteCount - (lByteCount % 4)) / 4;  
  91. //             lBytePosition = (lByteCount % 4) * 8;  
  92. //             lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));  
  93. //             lByteCount++;  
  94. //         }  
  95.   
  96. //         lWordCount = (lByteCount - (lByteCount % 4)) / 4;  
  97. //         lBytePosition = (lByteCount % 4) * 8;  
  98. //         lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);  
  99. //         lWordArray[lNumberOfWords - 2] = lMessageLength << 3;  
  100. //         lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;  
  101. //         return lWordArray;  
  102. //     }  
  103.   
  104. //     function wordToHex(lValue) {  
  105. //         var WordToHexValue = "", WordToHexValue_temp = "", lByte, lCount;  
  106. //         for (lCount = 0; lCount <= 3; lCount++) {  
  107. //             lByte = (lValue >>> (lCount * 8)) & 255;  
  108. //             WordToHexValue_temp = "0" + lByte.toString(16);  
  109. //             WordToHexValueWordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);  
  110. //         }  
  111. //         return WordToHexValue;  
  112. //     }  
  113.   
  114. //     function utf8Encode(string) {  
  115. //         stringstring = string.replace(/\r\n/g, "\n");  
  116. //         var utftext = "";  
  117.   
  118. //         for (var n = 0; n < string.length; n++) {  
  119.   
  120. //             var c = string.charCodeAt(n);  
  121.   
  122. //             if (c < 128) {  
  123. //                 utftext += String.fromCharCode(c);  
  124. //             }  
  125. //             else if ((c > 127) && (c < 2048)) {  
  126. //                 utftext += String.fromCharCode((c >> 6) | 192);  
  127. //                 utftext += String.fromCharCode((c & 63) | 128);  
  128. //             }  
  129. //             else {  
  130. //                 utftext += String.fromCharCode((c >> 12) | 224);  
  131. //                 utftext += String.fromCharCode(((c >> 6) & 63) | 128);  
  132. //                 utftext += String.fromCharCode((c & 63) | 128);  
  133. //             }  
  134.   
  135. //         }  
  136.   
  137. //         return utftext;  
  138. //     }  
  139.   
  140. //     var x = [],  
  141. //         k, AA, BB, CC, DD, a, b, c, d,  
  142. //         S11 = 7, S12 = 12, S13 = 17, S14 = 22,  
  143. //         S21 = 5, S22 = 9 , S23 = 14, S24 = 20,  
  144. //         S31 = 4, S32 = 11, S33 = 16, S34 = 23,  
  145. //         S41 = 6, S42 = 10, S43 = 15, S44 = 21;  
  146.   
  147. //     string = utf8Encode(string);  
  148.   
  149. //     x = convertToWordArray(string);  
  150. //     // console.log(JSON.stringify(x))  
  151. //     // console.log(x.length)  
  152.   
  153. //     a = 0x67452301;  
  154. //     b = 0xEFCDAB89;  
  155. //     c = 0x98BADCFE;  
  156. //     d = 0x10325476;  
  157.   
  158. //     for (k = 0; k < x.length; k += 16) {  
  159. //         AA = a;  
  160. //         BB = b;  
  161. //         CC = c;  
  162. //         DD = d;  
  163. //         a = FF(a, b, c, d, x[k + 0], S11, 0xD76AA478);  
  164. //         d = FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756);  
  165. //         c = FF(c, d, a, b, x[k + 2], S13, 0x242070DB);  
  166. //         b = FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE);  
  167. //         a = FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF);  
  168. //         d = FF(d, a, b, c, x[k + 5], S12, 0x4787C62A);  
  169. //         c = FF(c, d, a, b, x[k + 6], S13, 0xA8304613);  
  170. //         b = FF(b, c, d, a, x[k + 7], S14, 0xFD469501);  
  171. //         a = FF(a, b, c, d, x[k + 8], S11, 0x698098D8);  
  172. //         d = FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF);  
  173. //         c = FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1);  
  174. //         b = FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE);  
  175. //         a = FF(a, b, c, d, x[k + 12], S11, 0x6B901122);  
  176. //         d = FF(d, a, b, c, x[k + 13], S12, 0xFD987193);  
  177. //         c = FF(c, d, a, b, x[k + 14], S13, 0xA679438E);  
  178. //         b = FF(b, c, d, a, x[k + 15], S14, 0x49B40821);  
  179. //         a = GG(a, b, c, d, x[k + 1], S21, 0xF61E2562);  
  180. //         d = GG(d, a, b, c, x[k + 6], S22, 0xC040B340);  
  181. //         c = GG(c, d, a, b, x[k + 11], S23, 0x265E5A51);  
  182. //         b = GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA);  
  183. //         a = GG(a, b, c, d, x[k + 5], S21, 0xD62F105D);  
  184. //         d = GG(d, a, b, c, x[k + 10], S22, 0x2441453);  
  185. //         c = GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681);  
  186. //         b = GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8);  
  187. //         a = GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6);  
  188. //         d = GG(d, a, b, c, x[k + 14], S22, 0xC33707D6);  
  189. //         c = GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87);  
  190. //         b = GG(b, c, d, a, x[k + 8], S24, 0x455A14ED);  
  191. //         a = GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905);  
  192. //         d = GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8);  
  193. //         c = GG(c, d, a, b, x[k + 7], S23, 0x676F02D9);  
  194. //         b = GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A);  
  195. //         a = HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942);  
  196. //         d = HH(d, a, b, c, x[k + 8], S32, 0x8771F681);  
  197. //         c = HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122);  
  198. //         b = HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C);  
  199. //         a = HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44);  
  200. //         d = HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9);  
  201. //         c = HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60);  
  202. //         b = HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70);  
  203. //         a = HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6);  
  204. //         d = HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA);  
  205. //         c = HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085);  
  206. //         b = HH(b, c, d, a, x[k + 6], S34, 0x4881D05);  
  207. //         a = HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039);  
  208. //         d = HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5);  
  209. //         c = HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8);  
  210. //         b = HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665);  
  211. //         a = II(a, b, c, d, x[k + 0], S41, 0xF4292244);  
  212. //         d = II(d, a, b, c, x[k + 7], S42, 0x432AFF97);  
  213. //         c = II(c, d, a, b, x[k + 14], S43, 0xAB9423A7);  
  214. //         b = II(b, c, d, a, x[k + 5], S44, 0xFC93A039);  
  215. //         a = II(a, b, c, d, x[k + 12], S41, 0x655B59C3);  
  216. //         d = II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92);  
  217. //         c = II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D);  
  218. //         b = II(b, c, d, a, x[k + 1], S44, 0x85845DD1);  
  219. //         a = II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F);  
  220. //         d = II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0);  
  221. //         c = II(c, d, a, b, x[k + 6], S43, 0xA3014314);  
  222. //         b = II(b, c, d, a, x[k + 13], S44, 0x4E0811A1);  
  223. //         a = II(a, b, c, d, x[k + 4], S41, 0xF7537E82);  
  224. //         d = II(d, a, b, c, x[k + 11], S42, 0xBD3AF235);  
  225. //         c = II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB);  
  226. //         b = II(b, c, d, a, x[k + 9], S44, 0xEB86D391);  
  227. //         a = addUnsigned(a, AA);  
  228. //         b = addUnsigned(b, BB);  
  229. //         c = addUnsigned(c, CC);  
  230. //         d = addUnsigned(d, DD);  
  231. //     }  
  232.   
  233. //     var temp = wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d);  
  234. //     return temp.toUpperCase();  
  235. // };  
  236.   
  237. // console.log('刘新修本地封装/md5加密(--测试--)', md5('测试'))  
  238. //"DB06C78D1E24CF708A14CE81C9B617EC"  
  239.   
  240.   
  241. /*** 第三方类库CryptoJS.MD5()方法 || 和中国文书网测试结果一致(小写) ***/  
  242. console.log('刘新修/CryptoJS.MD5()-加密(--测试--)\n', CryptoJS.MD5('测试').toString())  
  243. </script>  
  244. </html>  

中网文书网/MD5加密(--测试--) db06c78d1e24cf708a14ce81c9b617ec

刘新修/CryptoJS.MD5()-加密(--测试--) db06c78d1e24cf708a14ce81c9b617ec

 

下载文件
这个文件只能在登入之后下载。请先 注册登入

发布专属环境SHELL脚本

[不指定 2023/10/13 17:06 | by 刘新修 ]
C#代码
  1. #ifconfig  
  2. echo $projectPath  
  3. echo $developer  
  4. echo $rebuildBranch  
  5. ### 获取最后一层的项目名称  
  6. las_dir=$(basename "$projectPath")  
  7. ### 提取上一层目录的全路径  
  8. cur_dir=$(dirname $projectPath)  
  9. ### 获取业务线的名称第二层  
  10. pat_dir=$(basename "$cur_dir")  
  11.   
  12. echo $las_dir  
  13. echo $cur_dir  
  14. echo $pat_dir  
  15. ### 通用前端发布脚本( 从本地同步来取 dist.tar.gz 文件包 )  ###  
  16. wwwroot=/data/apps/nginx/htdocs/public/frontend$projectPath &&  
  17. cd $wwwroot && pwd && git fetch && git checkout dev-$developer &&  
  18. git pull origin dev-$developer &&  
  19. bash /sh/downdist.sh /data/apps/nginx/htdocs/public/frontend$projectPath/upload/dynamicAssets.json /data/apps/nginx/htdocs/public/tarfile/XXX/$developer$projectPath http://dl.ktm1234.com/XXX/$developer$projectPath  
  20. ### 通用前端发布脚本( 从本地同步来取 dist.tar.gz 文件包 )  ###  
  21. wwwroot=/data/apps/nginx/htdocs/public/frontend$projectPath &&  
  22. cd $wwwroot && pwd  
  23.   
  24. if [[ $rebuildBranch == true ]] ;then  
  25.     echo '---- 全新构建分支 ------'  
  26.     git checkout . && git checkout master &&  
  27.     git branch -D dev-$developer && git fetch &&  
  28.     git checkout -b dev-$developer origin/dev-$developer &&  
  29.     bash /sh/downdist.sh /data/apps/nginx/htdocs/public/frontend$projectPath/upload/dynamicAssets.json /data/apps/nginx/htdocs/public/tarfile/XXX/$developer$projectPath http://dl.ktm1234.com/XXX/$developer$projectPath  
  30. else  
  31.     echo '---- 更新新版本 ------'  
  32.     git fetch && git checkout dev-$developer &&  
  33.     git checkout . && git pull origin dev-$developer &&  
  34.     bash /sh/downdist.sh /data/apps/nginx/htdocs/public/frontend$projectPath/upload/dynamicAssets.json /data/apps/nginx/htdocs/public/tarfile/XXX/$developer$projectPath http://dl.ktm1234.com/XXX/$developer$projectPath  
  35. fi  

 1. 防暴点(preventReClick)

快速点击按钮时会频繁重复调用接口,为了防止这种情况,要对相应的按钮进行防暴力重复点击处理,最好是使用函数防抖或者函数截流来处理,但是现在已经要修改的按钮太多了,于是换一种方法,用指令的方式来达到相识的效果。
1.创建utils文件夹,在该文件夹下创建preventReClick.js文件
JavaScript代码
  1. export default {  
  2.     install(Vue) {  
  3.         Vue.directive('preventReClick', {  
  4.             inserted: function (el, binding) {  
  5.                 console.log(el.disabled)  
  6.                 el.addEventListener('click', (e) => {  
  7.                     if (!el.disabled) {  
  8.                         el.disabled = true  
  9.                         setTimeout(() => {  
  10.                             el.disabled = false  
  11.                         }, binding.value || 3000)  
  12.                         //binding.value可以自行设置。如果设置了则跟着设置的时间走  
  13.                         //例如:v-preventReClick='500'  
  14.                     } else { // disabled为true时,阻止默认的@click事件  
  15.                         e.preventDefault()  
  16.                         e.stopPropagation()  
  17.                     }  
  18.                 })  
  19.             }  
  20.         }),  
  21.     }  
2.在main.js中全局引用
JavaScript代码
  1. // 防止多次点击  
  2. import preventReClick from '@/util/preventReClick '  
  3. Vue.use(preventReClick);  
3.在触发事件的按钮上就可以直接使用指令(button按钮和其他元素都可)
JavaScript代码
  1. <div class="comment-btn" @click="submitMes()" v-preventReClick="3000">发送</div>  
  2. <el-button @click="submitMes()" v-preventReClick="3000">发送</el-button>  

2. 防抖(debounce)

用户停下操作,就执行函数;只要不停止操作,永远不会执行函数内的操作
使用场景:防抖常应用于用户进行搜索输入节约请求资源,
eg:原来watch用户输入值改变马上请求接口 ,加入防抖,停止输入操作才会对接口进行访问

JavaScript代码
  1. /** 
  2.  * @description 函数防抖 触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。 
  3.  * @param {Function} func 需要执行的函数 
  4.  * @param {Number} wait 间隔时间 默认200ms 
  5.  * @param {Boolean} immediate  是否立即执行 true(默认) 表立即执行,false 表非立即执行 
  6.  * @return {*} 
  7.  */  
  8. export function VueDebounce(func, wait = 200, immediate = true) {  
  9.     let timeout = null;  // 定时器  
  10.     return function () {  
  11.         let that = this// this对象  
  12.             args = arguments; // 参数  
  13.         if (timeout) clearTimeout(timeout);  
  14.         if (immediate === true) { // 立即执行  
  15.             var callNow = !timeout;  
  16.             timeout = setTimeout(() => {  
  17.                 timeout = null;  
  18.             }, wait)  
  19.             if (callNow) {  
  20.                 // func.apply(that, args); // 普通用法  
  21.                 that[func](...args); // vue用法  
  22.             }  
  23.         }  
  24.         else { // 非立即执行  
  25.             timeout = setTimeout(() => {  
  26.                 // func.apply(this, args); // 普通用法  
  27.                 that[func](...args); // vue用法  
  28.             }, wait);  
  29.         }  
  30.     }  
  31. }  

用法:

JavaScript代码
  1. import {VueDebounce} from "@/util/index"  
  2. methods: {  
  3.     /** 
  4.      * 点击事件 函数防抖 
  5.      * 用法:<el-button @click="debounceHandel">点击测试</el-button> 
  6.      */  
  7.     debounceHandel: VueDebounce("handlerFunc"),  
  8.    
  9.     /** 
  10.      * 点击事件:真正执行的函数 
  11.      */  
  12.     handlerFunc(type) {  
  13.       console.log("测试防抖事件");  
  14.       this.$emit("click","这是参数"); // 如果用普通用法,则这里会找不到$emit,因为this还往上继承了vue的对象  
  15.     },  
  16.   }  
  17.    

3. 节流(throttle)

高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率,是个固定的过程 ,如限制1s,则1s内只执行一次,无论怎样,都在会1s内执行相应的操作

使用场景:和防抖使用场景差不多,关键看固定时间内(1s)需要反馈,需要反馈使用节流,即:无论用户是否停下操作,都会固定时间执行函数操作

JavaScript代码
  1. * @description 函数节流  
  2. * @param {Function} func 函数  
  3. * @param {Number} wait 延迟执行毫秒数,默认200  
  4. * @param {Number} type 1 表时间戳版,2 表定时器版  
  5. */  
  6. xport function VueThrottle(func, wait=200 ,type) {  
  7.    if(type===1){  
  8.        let previous = 0;  
  9.    }else if(type===2){  
  10.        let timeout;  
  11.    }  
  12.    return function() {  
  13.        let that= this;  
  14.        let args = arguments;  
  15.        if(type===1){  
  16.            let now = Date.now();  
  17.   
  18.            if (now - previous > wait) {  
  19.                // func.apply(that, args); // 普通用法  
  20.                that[func](...args); // vue用法  
  21.                previous = now;  
  22.            }  
  23.        }else if(type===2){  
  24.            if (!timeout) {  
  25.                timeout = setTimeout(() => {  
  26.                    timeout = null;  
  27.                    // func.apply(that, args)  
  28.                    that[func](...args); // vue用法  
  29.                }, wait)  
  30.            }  
  31.        }  
  32.    }  

用法:

JavaScript代码
  1. import {VueThrottle} from "@/util/index"  
  2. methods: {  
  3.     /** 
  4.      * 点击事件 函数防抖 
  5.      * 用法:<el-button @click="throttleHandel">点击测试</el-button> 
  6.      */  
  7.     throttleHandel: VueThrottle("handlerFunc"),  
  8.    
  9.     /** 
  10.      * 点击事件:真正执行的函数 
  11.      */  
  12.     handlerFunc(type) {  
  13.       console.log("测试防抖事件");  
  14.       this.$emit("click","这是参数"); // 如果用普通用法,则这里会找不到$emit,因为this还往上继承了vue的对象  
  15.     },  
  16.   }  
  17.    
C#代码
  1. output(normal): BK_CI_GIT_REPO_HEAD_COMMIT_AUTHOR=刘新修  
  2. output(normal): BK_CI_GIT_REPO_URL=http://172.16.101.177/health-product/health-front/health-manage-front.git  
  3. output(except): bk_repo_type_e-9937698f8027470f86c86096e78e8940=GIT  
  4. output(normal): BK_CI_GIT_REPO_NAME=health-product/health-front/health-manage-front  
  5. output(except): git.health-product.health-front.health-manage-front.new.commit=c3084bed035f479b0e4419b20c00fe4cd25f0bac  

Mock的基本语法及使用

[不指定 2023/09/08 15:17 | by 刘新修 ]
JavaScript代码
  1. //定义/mock/index.js  
  2.   
  3. import Mock from 'mockjs'  
  4. Mock.mock("/api/login", {  
  5.     code: 200,  
  6.     msg: "登陆成功",  
  7.     user: {  
  8.         name: "zeng8",  
  9.         score: 2048,  
  10.         rank: 10  
  11.     },  
  12.     token: "kjkjalsdiiuioayeuryqowierqiwerqowiery"  
  13. })  
  14. // url可以使用正则匹配  
  15. // 拦截get请求,返回评论数据  
  16. Mock.mock(/\/api\/feed/, "get", function(config) {  
  17.     //console.log("config" , config );  
  18.     //通过config可以获取到前端发给服务器的数据  
  19.     var po = config.url.indexOf("?"); //获取问号的位置  
  20.     if (po != -1) {  
  21.         var query = config.url.slice(po + 1); //获取到查询参数current=4转换为{current: 4}  
  22.         var arr = query.split("&"); //按&分割为数组  
  23.         var search = {}; //定义个对象  
  24.         arr.forEach(item => {  
  25.             var temp = item.split("="); //把数组每个元素按等于分割[current,4]  
  26.             search[temp[0]] = temp[1]; //search[ "current"] =4  
  27.   
  28.         })  
  29.     }  
  30.   
  31.     // 返回一个随机数据  
  32.     return Mock.mock({  
  33.         "code": 0,  
  34.         "data|4": [{  
  35.             id: "@id",  
  36.             msg: "@cparagraph(2,3)", //段落2-3行  
  37.             name: "@cname", //随机中文名  
  38.             date: "@datetime" //随机日期  
  39.         }],  
  40.         "pagnation": {  
  41.             "total|10-25": 1,  
  42.             "size": 4,  
  43.             "pageTotal|4-10": 1,  
  44.             "current": search.current,  
  45.         }  
  46.     })  
  47. })  
  48.   
  49. Mock.mock("/api/test", Mock.mock({  
  50.     name: "@cname", //随机中文名  
  51.     "age|100-200": 1, //100-200的随机数  
  52.     "price|10-50.2-5": 1, //10-50随机数 小数点2-5位  
  53.     "live|1-2": true, //随机true或false  
  54.     "start|1-5": "⭐", //把字符串重复1-5次  
  55.     "friend|2": ["小红", "小明", "小刚", "小白", "小蓝"], //1是挑一个大于1是重复n次  
  56.     "props|1-3": {  
  57.         name: "mm",  
  58.         age: 22,  
  59.         leg: 2,  
  60.         job: "web",  
  61.         eye: 2  
  62.     },  
  63.     "tel": /13\d{9}/,  
  64.     "des": function() {  
  65.         return `大家好,我的名字是${this.name},今年${this.age}岁`  
  66.     },  
  67.     "data|10": [{  
  68.         "id|+1": 1024,  
  69.         "ID": "@id",  
  70.         date: "@date",  
  71.         time: "@time",  
  72.         datetime: "@datetime",  
  73.         name: "@cname",  
  74.         pic: "@dataImage('200x100')",  
  75.         description: "@cparagraph(1,3)",  
  76.         title: "@ctitle(8,12)",  
  77.         url: /http:\/\/www\.[a-z]{2,8}\.(com|cn|org)/,  
  78.         email: /[4-8]@\.(126|qq|163)\.(com|cn|org)/,  
  79.         address: "@county(true)", //省市区地址  
  80.     }]  
  81. }))  

vue封装定时器

[不指定 2023/09/07 13:29 | by 刘新修 ]

main.js 文件

JavaScript代码
  1. /*** sleep ***/  
  2. Vue.prototype.$sleep = time => {  
  3.   return new Promise((resolve, reject) => {  
  4.     window.setTimeout(() => {  
  5.       resolve(true)  
  6.     }, time)  
  7.   })  
  8. }  

增加测试页面

XML/HTML代码
  1. <!--  
  2. * @Description: npage.vue  
  3. * @Version: 1.0  
  4. * @Author: Jesse Liu
  5. * @Date: 2022-08-01 20:32:06  
  6. * @LastEditors: Jesse Liu  
  7. * @LastEditTime: 2023-09-07 13:24:11  
  8. -->  
  9. <template>  
  10.   <div class="wscn-http404-container">  
  11.       <h2 style="font-weight: normal; line-height: 160%;">userInfo ========= {{ userInfo }}</h2>  
  12.       <h2 style="font-weight: normal; line-height: 160%;">configInformation ========= {{ configInformation }}</h2>  
  13.       <h1 style="line-height:300px; text-align:center">npage.vue (新测试文件)</h1>  
  14.       <div>time:</div>  
  15.   </div>  
  16. </template>  
  17.   
  18. <script>  
  19. import { mapState } from "vuex";  
  20. import { parseTime } from '@/utils'  
  21. import { downloadFile } from "@/utils/getFile";  
  22. export default {  
  23.   name: 'PageTest',  
  24.   computed: {  
  25.     ...mapState("user", ["userInfo","configInformation"]),  
  26.     message() {  
  27.       return 'PageTest'  
  28.     },  
  29.     parseTime: parseTime  
  30.   },  
  31.   mounted() {  
  32.   
  33.     this.$store.dispatch("case/casesList/downloadFile",{}).then((res)=>{  
  34.         // let data = res.data;  
  35.         // let headers = res.headers;  
  36.           
  37.         // /*** 调用下载文件 ***/  
  38.         // downloadFile(data, headers)  
  39.     })  
  40.   
  41.     /*** 多定时器同时调用 ***/  
  42.     this.getStateA();  
  43.     this.getStateB();  
  44.   
  45.     /*** 业务请求接口调用示例 ***/  
  46.     this.casePage();  
  47.   },  
  48.   methods: {  
  49.     /*** 定时器演示方法 ***/  
  50.     async getStateA(){  
  51.   
  52.         /*** 定时器只管计算时间钩子标记 ***/  
  53.         console.log('sleepStateA ~~~ 开始')  
  54.   
  55.         /*** 多定时处理任务A ***/  
  56.         console.time('sleepStateA');  
  57.         let sleepStateA = await this.$sleep(5000);  
  58.         console.log('sleepStateA ~~~ 结束', sleepStateA)  
  59.         console.timeEnd('sleepStateA');  
  60.   
  61.         return sleepStateA;  
  62.     },  
  63.     /*** 定时器演示方法 ***/  
  64.     async getStateB(){  
  65.   
  66.         /*** 定时器只管计算时间钩子标记 ***/  
  67.         console.log('sleepStateB ~~~ 开始')  
  68.   
  69.         /*** 多定时处理任务B ***/  
  70.         console.time('sleepStateB');  
  71.         let sleepStateB = await this.$sleep(10000);  
  72.         console.log('sleepStateB ~~~ 结束', sleepStateB)  
  73.         console.timeEnd('sleepStateB');  
  74.   
  75.         return sleepStateB;  
  76.     },  
  77.   
  78.     /*** 模拟示例业务的状态 ***/  
  79.     async getCaseState(){  
  80.   
  81.         /*** 定时器只管计算时间钩子标记 ***/  
  82.         let sleepStateCase = await this.$sleep(10000);  
  83.         return sleepStateCase;  
  84.     },  
  85.     /*** 模拟示例业务主方法 ***/  
  86.     async casePage(state = true, n = 0){  
  87.   
  88.         /*** 定义及获取数据状态 ***/  
  89.         let runling = true;  
  90.         let getCaseState = await this.getCaseState();  
  91.   
  92.         /*** 业务逻辑处理及使用 ***/  
  93.         if(state && getCaseState) {  
  94.             /*** 请求接口拿状态和后端约定状态码(根据状态码去更改runling的布尔值) ***/  
  95.             // 写你的vuex调用方法,如:this.$store.dispatch('user/record', {})  
  96.   
  97.   
  98.             /*** 以下代码是为了演示模拟3次请求后,状态变更,供参考 ***/  
  99.             /*** 假设后端接口告诉你可以终止执行调用的状态 (比如后端调用3次后就更改了状态) ***/  
  100.             let index = n;  
  101.                 index +=1;  
  102.                 console.log('第['+ index + ']次调用后端接口~~');  
  103.   
  104.                 if(index >= 3) {  
  105.                   runling = false;  
  106.                 }  
  107.             this.casePage(runling, index);  
  108.         }  
  109.         else{  
  110.             console.log('===========================================\n定时器已经结束关停,累计调用共: ' + n + '次~~');  
  111.         }  
  112.     }  
  113.   
  114.   }  
  115. }  
  116. </script>  
  117.   
  118.   
  119. <style lang="scss" scoped>  
  120. </style>  

 

第一页 上页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式: 摘要 | 列表 ]