面壁人浮川 发布的文章 - 浮川的小窝

fetch封装 /** * @Author : Xiao Xiang Lun * @Date : 2023-11-15 15:57:06 * @LastEditors : snowlove xiaoxl@botech.com.cn * @LastEditTime : 2023-11-15 16:31:45 * @FilePath : /react/demo/src/views/DemoStoreTwo/fetchReq.js * @Environment : mac node v16.3.0 * @Description : * @关注作者请访问 https://snowlove.synology.me:5 * @备用地址:https://nas.snowlove.top:5 */ /* http([config]) + url 请求地址 + method 请求方式 *GET/DELETE/HEAD/OPTIONS/POST/PUT/PATCH + credentials 携带资源凭证 *include/same-origin/omit + headers:null 自定义的请求头信息「格式必须是纯粹对象」 + body:null 请求主体信息「只针对于POST系列请求，根据当前服务器要求，如果用户传递的是一个纯粹对象，我们需要把其变为urlencoded格式字符串(设定请求头中的Content-Type)...」 + params:null 设定问号传参信息「格式必须是纯粹对象，我们在内部把其拼接到url的末尾」 + responseType 预设服务器返回结果的读取方式 *json/text/arrayBuffer/blob + signal 中断请求的信号 ----- */ // import qs from 'https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.min.js'; const class2type = , toString = class2type.toString, hasOwn = class2type.hasOwnProperty, isPlainObject = function isPlainObject(obj) { let proto, Ctor; if (!obj || toString.call(obj) !== "[object Object]") return false; proto = Object.getPrototypeOf(obj); if (!proto) return true; Ctor = hasOwn.call(proto, "constructor") && proto.constructor; return typeof Ctor === "function" && Ctor === Object; }, qsStringify = function qsStringify(obj) { const params = []; for (const key in obj) { if (obj.hasOwnProperty(key)) { const value = obj[key]; const encodedKey = encodeURIComponent(key); const encodedValue = encodeURIComponent(value); params.push(`$=$`); } } return params.join('&'); } /* 核心方法 */ const http = function http(config) { if (!isPlainObject(config)) config = ; const controller = new AbortController(); config = Object.assign({ url: '', method: 'GET', credentials: 'include', headers: null, body: null, params: null, responseType: 'json', signal: (controller && controller.signal) || null, }, config); if(config.abort || config.abort instanceof Promise) { config.abort().then((_)=>controller.abort()) } if (!config.url) throw new TypeError('url must be required'); if (!isPlainObject(config.headers)) config.headers = ; if (config.params !== null && !isPlainObject(config.params)) config.params = null; let = config; // 处理问号传参 if (params) { url += `$$`; } // 处理请求主体信息：按照我们后台要求，如果传递的是一个普通对象，我们要把其设置为urlencoded格式「设置请求头」？ if (isPlainObject(body)) { body = qsStringify(body); headers['Content-Type'] = 'application/x-www-form-urlencoded'; } // 发送请求 method = method.toUpperCase(); config = { method, credentials, headers, cache: 'no-cache', signal }; if (/^(POST|PUT|PATCH)$/i.test(method) && body) config.body = body; return fetch(url, config) .then(response => { let = response; if (/^(2|3)\d$/.test(status)) { // 请求成功:根据预设的方式，获取需要的值 let result; switch (responseType.toLowerCase()) { case 'text': result = response.text(); break; case 'arraybuffer': result = response.arrayBuffer(); break; case 'blob': result = response.blob(); break; default: result = response.json(); } return result; } // 请求失败：HTTP状态码失败 return Promise.reject({ code: -100, status, statusText }); }) .catch(reason => { return Promise.reject(reason); //统一处理完提示后，在组件中获取到的依然还是失败 }); }; /* 快捷方法 */ ["GET", "HEAD", "DELETE", "OPTIONS"].forEach(item => { http[item.toLowerCase()] = function (url, config) { if (!isPlainObject(config)) config = ; config['url'] = url; config['method'] = item; return http(config); }; }); ["POST", "PUT", "PATCH"].forEach(item => { http[item.toLowerCase()] = function (url, body, config) { if (!isPlainObject(config)) config = ; config['url'] = url; config['method'] = item; config['body'] = body; return http(config); }; }); export default http;调用方法 如需中断链接 传入abort回调 在其中重写逻辑 注意返回一个promisehttp.get(' https://snowlove.synology.me:6002/mock/6553259ddb7e05001d99be09/example/query',{ abort:()=>new Promise((reslove)=>{ console.log("abort1") reslove(true) }) }).then(res=>{ console.log(res) }).catch(err=>{ console.log("捕捉主动终止错误") }) http.get(' https://snowlove.synology.me:6002/mock/6553259ddb7e05001d99be09/example/query',{ abort:()=>new Promise((reslove)=>{ console.log("abort2") setTimeout(() => { reslove(true) }, 1000); }) }).then(res=>{ console.log(res) }).catch(err=>{ console.log("捕捉错误2") }) /** * abort1 * abort2 * 捕捉错误 */

二次封装省市区组件 最新正在搭一个系统，用的h5纯原生开发的就没使用框架 也不想引用现成的ui框架 踌躇满志 :@(坐等) 磨拳擦掌 :@(欢呼) 力排众议 :@(深思) 直接选择自己手写 然后完犊子了 :@(脸红) :@(脸红) :@(脸红) 工期赶任务中 有思路知道怎么实现但是这个手啊就是敲不下去 遂又 垂头丧气 :@(小怒) 不自量力 :@(吐血倒地) 唯唯诺诺 :@(喜极而泣) 的光速打脸 遇到下拉框联动省市区的时候傻眼了麻爪了 网上一顿搜 没有合适的组件库 一度想要引入element然后直接vue完事了 但是最终还是选择了multiple-select.js 不过这个库依赖jquery 退而求其次 那就原生 jquery混写呗 下面是代码 处理过的省市区数据CITY_CODE.js<link rel="stylesheet" href="https://unpkg.com/multiple-select@1.6.0/dist/multiple-select.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://unpkg.com/multiple-select@1.6.0/dist/multiple-select.min.js"></script> <script src="https://snowlove.synology.me:5106/usr/uploads/2023/11/1528140937.js"></script> <style> .city-code_wapper.city-code_wapper_citycode .multiple-select.city-code_wapper_citycode .multiple-select:last-child.city-code_wapper_citycode button.city-code_wapper_citycode button span.city-code_wapper_address.city-code_wapper_address label.city-code_wapper_address input.city-code_wapper .area,.city-code_wapper .city.city-code_wapper .ms-drop.from_input.from_input:focus </style> <div class="city-code_wapper"> <div class="city-code_wapper_citycode"> <select class="province multiple-select" placeholder="省"></select> <select class="city multiple-select" placeholder="市"> <option>市</option> </select> <select class="area multiple-select" placeholder="区"> <option>区</option> </select> </div> <div class="city-code_wapper_address"> <label>详细地址:</label> <input type="text"class="from_input detailed-address" name="address"/> </div> </div> <script> // 模板解析有问题 无发放到template中 只能抽出js单独引入 var selectParams = [] // 根据parentId获取所有子元素 const getDataByParentId = (data,parentId) => { return data.filter(item => item.parentId === parentId) } // 设置省市区数据 const updateCityCodeData = () => { window.postMessage({ type:'cityCodeMsg', newCityCode:selectParams.map(item=>item.text || item), cityCodeOriginal:selectParams }) } // 清空省市下拉数据 const clearCityOrArea = (type) => { const cityEle = $('.city'), areaEle = $('.area'), addressEle = $('.detailed-address') switch (type) { case 'city': cityEle.multipleSelect('refreshOptions', { data:[] }) break; case 'area': areaEle.multipleSelect('refreshOptions', { data:[] }) break; case 'address': addressEle.val('') break; default: cityEle.multipleSelect('refreshOptions', { data:[] }) areaEle.multipleSelect('refreshOptions', { data:[] }) addressEle.val('') break; } } // 加载jqery 多选框元素 $(function() { const provinceEle = $('.province') let initFlag = [1,0,0] provinceEle.multipleSelect({ selectAll: false, name:'province', data:Province, placeholder:'省', showClear:true, onClick: function (province) { // 清空市区数据 const cityEle = $('.city') if(!initFlag[1]){ cityEle.multipleSelect({ selectAll: false, name:'city', placeholder:'市', data:getDataByParentId(City,province.value), onClick: function (city) { const areaEle = $('.area') // console.log('areaEle',areaEle) if(!initFlag[2]){ areaEle.multipleSelect({ selectAll: false, name:'area', placeholder:'区', data:getDataByParentId(Area,city.value), onClick: function (area) { // console.log('areaEle onClick',areaEle) selectParams[2] = area updateCityCodeData() }, }) initFlag[2] = 1 } else areaEle.multipleSelect('refreshOptions', { data:getDataByParentId(Area,city.value), }) // console.log('areaEle',areaEle) selectParams[1] = city clearCityOrArea('address') updateCityCodeData() }, }) initFlag[1] = 1 } else cityEle.multipleSelect('refreshOptions', { data:getDataByParentId(City,province.value), }) selectParams = [province] if(initFlag[2]) clearCityOrArea('area') clearCityOrArea('address') // 发送消息到上层 清空已选择数据 updateCityCodeData() }, onClear: function () { selectParams = [] if(initFlag[1]) clearCityOrArea('city') if(initFlag[2]) clearCityOrArea('area') clearCityOrArea('address') updateCityCodeData() // console.log('clear') } }) // 每次组件创建 初始化数据 provinceEle.multipleSelect('setSelects', []) updateCityCodeData() // 获取详细地址 $('.detailed-address').blur(function(){ selectParams[3] = $(this).val() || '' updateCityCodeData() }) }) </script> .city-code_wapper.city-code_wapper_citycode .multiple-select.city-code_wapper_citycode .multiple-select:last-child.city-code_wapper_citycode button.city-code_wapper_citycode button span.city-code_wapper_address.city-code_wapper_address label.city-code_wapper_address input.city-code_wapper .area,.city-code_wapper .city.city-code_wapper .ms-drop .from_input{ width: 100%; border: 1px solid #c8c9cc; border-radius: 4px; padding: 5px 10px; box-sizing: border-box; outline: none; /* 去掉描边 */ color: #606266; } .from_input:focus { color: #303133; } 市 区 详细地址: // 模板解析有问题 无发放到template中 只能抽出js单独引入 var selectParams = [] // 根据parentId获取所有子元素 const getDataByParentId = (data,parentId) => { return data.filter(item => item.parentId === parentId) } // 设置省市区数据 const updateCityCodeData = () => { window.postMessage({ type:'cityCodeMsg', newCityCode:selectParams.map(item=>item.text || item), cityCodeOriginal:selectParams }) } // 清空省市下拉数据 const clearCityOrArea = (type) => { const cityEle = $('.city'), areaEle = $('.area'), addressEle = $('.detailed-address') switch (type) { case 'city': cityEle.multipleSelect('refreshOptions', { data:[] }) break; case 'area': areaEle.multipleSelect('refreshOptions', { data:[] }) break; case 'address': addressEle.val('') break; default: cityEle.multipleSelect('refreshOptions', { data:[] }) areaEle.multipleSelect('refreshOptions', { data:[] }) addressEle.val('') break; } } // 加载jqery 多选框元素 $(function() { const provinceEle = $('.province') let initFlag = [1,0,0] provinceEle.multipleSelect({ selectAll: false, name:'province', data:Province, placeholder:'省', showClear:true, onClick: function (province) { // 清空市区数据 const cityEle = $('.city') if(!initFlag[1]){ cityEle.multipleSelect({ selectAll: false, name:'city', placeholder:'市', data:getDataByParentId(City,province.value), onClick: function (city) { const areaEle = $('.area') // console.log('areaEle',areaEle) if(!initFlag[2]){ areaEle.multipleSelect({ selectAll: false, name:'area', placeholder:'区', data:getDataByParentId(Area,city.value), onClick: function (area) { // console.log('areaEle onClick',areaEle) selectParams[2] = area updateCityCodeData() }, }) initFlag[2] = 1 } else areaEle.multipleSelect('refreshOptions', { data:getDataByParentId(Area,city.value), }) // console.log('areaEle',areaEle) selectParams[1] = city clearCityOrArea('address') updateCityCodeData() }, }) initFlag[1] = 1 } else cityEle.multipleSelect('refreshOptions', { data:getDataByParentId(City,province.value), }) selectParams = [province] if(initFlag[2]) clearCityOrArea('area') clearCityOrArea('address') // 发送消息到上层 清空已选择数据 updateCityCodeData() }, onClear: function () { selectParams = [] if(initFlag[1]) clearCityOrArea('city') if(initFlag[2]) clearCityOrArea('area') clearCityOrArea('address') updateCityCodeData() // console.log('clear') } }) // 每次组件创建 初始化数据 provinceEle.multipleSelect('setSelects', []) updateCityCodeData() // 获取详细地址 $('.detailed-address').blur(function(){ selectParams[3] = $(this).val() || '' updateCityCodeData() }) })

上古技术也还是很能打的 闲来无事搭了个门户网站的demo架子 因为seo的缘故不能使用框架(因为追求简单的几个业务面 感觉搭个架子太沉了) 所以用了挺老的技术 :@(害羞) :@(害羞) :@(害羞)gulp + art-template + web-template + js原生感觉比较符合我的需求 因为咩去找现成的门户网站参照做案例 就随便写写画画 封装了一些基础组件(我肖某人今生最爱的事情之一就是封装封装封装组件!!)下面偷懒做的适配(就根本没做骗谁呢? :@(中指):@(中指):@(中指) )移动端兼容我贼垃圾就没做 过阵子好好学学 :@(脸红) :@(脸红) .box{ position: relative; overflow: auto; margin-bottom: 30px; } .box > div{ background: url(https://snowlove.synology.me:5106/usr/uploads/2023/10/2416764179.jpg); width: 768px; height: 1024px; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 1; } .box > iframe{ position: absolute; top: 210px; left: 185px; z-index: 2; border-radius: 16px; } @media screen and (max-width: 1000px) { .box{ position: relative; overflow: hidden; margin-bottom: 30px; } .box > div{ background: url(https://snowlove.synology.me:5106/usr/uploads/2023/10/2416764179.jpg); width: 85vw; height: 50vh; transform: scale3d(1.6, 1.3, 1.8); background-size: 100% 100%; background-repeat: no-repeat; position: relative; z-index: 1; top: -5vw; } .box > iframe{ position: absolute; top: 6vw; left: 5vw; z-index: 2; border-radius: 16px; width: 75vw; } } let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']; let getArr = Agents.filter(i => window.navigator.userAgent.includes(i)) let iframe = document.querySelector('.box>iframe') if(getArr[0]){ iframe.style.height = `$px` } iframe.onload = function(){ //iframe加载完立即发送一条消息 iframe.contentWindow.postMessage(,'*'); }

gitlab自动化部署脚本 记录下自动化部署脚本.gitlab-ci.yml image: maven:latest # 设置触发条件 workflow: rules: - if: '$CI_COMMIT_MESSAGE =~ /^publish/ && $CI_COMMIT_BRANCH == "pro"' when: always - if: '$CI_COMMIT_MESSAGE =~ /^publish/ && $CI_COMMIT_BRANCH == "pro-dalian"' when: always - if: '$CI_COMMIT_MESSAGE =~ /^publish/ && $CI_COMMIT_BRANCH == "test"' when: always - if: '$CI_COMMIT_MESSAGE =~ /^publish/ && $CI_COMMIT_BRANCH == "fac"' when: always - when: never # 设置一个缓存路径 cache: paths: - target/ # 本次构建的阶段：build package deploy stages: - init - package - deploy # 初始化 初始化: stage: init tags: - ZZTJJARM script: - echo "=============== 检查必要工具 ===============" - node -v - npm -v - nvm -v - nvm ls - git --version # 打包 打包: stage: package tags: - ZZTJJARM script: - echo "=============== 开始打包任务 ===============" - rm -rf node_modules - nvm use 11.0.0 - npm i --unsafe -perm - npm run build - server_name="ZZTJJARM" - tar cvf $server_name.tar $server_name - chmod 777 $server_name.tar - rm -if /home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH/$server_name.tar - if [ ! -d "/home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH" ];then mkdir /home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH; echo '文件夹不存在,创建:'$CI_COMMIT_BRANCH; else echo '文件夹已存在:'$CI_COMMIT_BRANCH;fi - cp -i $server_name.tar /home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH/$server_name.tar # 部署 部署: stage: deploy tags: - ZZTJJARM script: - echo "=============== 开始部署任务 ===============" - server_name="ZZTJJARM" - REMOTE_IPS='172.16.1.144' - REMOTE_PORT=22 - |+ if [[ $CI_COMMIT_BRANCH == 'pro' ]]; then REMOTE_IPS='XX.XX.XX.XX' fi if [[ $CI_COMMIT_BRANCH == 'pro-dalian' ]]; then REMOTE_IPS='XX.XX.XX.XX' fi if [[ $CI_COMMIT_BRANCH == 'fac' ]]; then REMOTE_IPS='XX.XX.XX.XX' fi - echo $REMOTE_IPS - IFS=',' read -ra ip_array <<< "$REMOTE_IPS" - echo $ip_array - |+ for REMOTE_IP in "$" do echo "scp -o StrictHostKeychecking=no -P $REMOTE_PORT /home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH/$server_name.tar root@$REMOTE_IP:/usr/local/nginx/html/" scp -o StrictHostKeychecking=no -P $REMOTE_PORT /home/gitlab-runner/gitlabPro/$CI_COMMIT_BRANCH/$server_name.tar root@$REMOTE_IP:/usr/local/nginx/html/ echo "source /etc/profile && mv /usr/local/nginx/html/$server_name /usr/local/nginx/html/bak/$server_name$(date +%Y%m%d%H%M%S)" ssh -o StrictHostKeychecking=no root@$REMOTE_IP -p 22 "source /etc/profile && if [ ! -d "/usr/local/nginx/html/$server_name" ];then mkdir /usr/local/nginx/html/$server_name;mkdir /usr/local/nginx/html/bak; echo '文件夹不存在,创建:'$server_name $bak; else echo '文件夹已存在:'$server_name $bak;fi && mv /usr/local/nginx/html/$server_name /usr/local/nginx/html/bak/$server_name$(date +%Y%m%d%H%M%S)" sleep 10s ssh -o StrictHostKeychecking=no root@$REMOTE_IP -p 22 "chmod 777 /usr/local/nginx/html/$.tar && tar xvf /usr/local/nginx/html/$.tar -C /usr/local/nginx/html" ssh -o StrictHostKeychecking=no root@$REMOTE_IP -p 22 "rm -rf /usr/local/nginx/html/$.tar" ssh -o StrictHostKeychecking=no root@$REMOTE_IP -p 22 "/usr/local/nginx/sbin/nginx -s reload" done

子网掩码作用及其使用 作用子网掩码不能单独存在，它必须结合IP地址一起使用。IP地址我们都知道是计算机在网络内的唯一标识，而子网掩码顾名思义是用于划分子网的子网掩码只有一个作用，就是将某个IP地址划分成网络地址和主机地址两部分。子网掩码是一个32位地址，用于屏蔽IP地址的一部分以区别网络标识和主机标识，并说明该IP地址是在局域网上，还是在远程网上。例子1、255.255.255.0子网掩码由连续的1和0组成，连续的1表示网络地址，连续的0表示主机地址，通过0的个数可以计算出子网的容量（子网中主机的IP地址范围）。首先来看看默认的子网掩码255.255.255.0是怎么划分子网的，将该子网掩码的二进制由24个1和8个0组成，8个0表示该子网掩码划分出的子网容量为256（2的8次方），也就是说192.168.1.0-255都在同一个子网中，这256个地址中可用地址只有254个，因为规定每个子网的第一个IP地址为网段地址，最后一个IP地址为广播地址，都不可用。举例说明：对于网段192.168.1.0，如果子网掩码设置255.255.255.0，192.168.1.1-192.168.1.254为可用IP地址，设置这个范围内的IP地址，计算机之间能正常联网。2、255.255.255.252当然上面是默认的情况，也是最简单的情况。下面我们分析子网掩码255.255.255.252是怎么划分子网的。将该子网掩码转换成二进制为30个1和2个0，表示每个子网中只有4个IP地址（2的2次方），192.168.1.0-255的地址段共可划分64个子网，第一个子网的地址范围是192.168.1.0-192.168.1.3，第二个子网的地址范围是192.168.1.4-192.168.1.7，依次类推。其中每个子网第一个和最后一个IP地址不可用，可用的只有2个IP地址。也就是说：如果子网掩码设置为255.255.255.252，那么该子网只能容纳两台电脑，而且这两台电脑的IP必须在一个子网内才能正常联网，例如一台电脑的IP设为192.168.1.10，另外一台电脑的IP必须设置为192.168.1.9。子网划分实战通过以上两个例子读者应该明白子网掩码的作用了，下面通过一个实际的例子检验刚才的学习成果。某个小型公司有四个部门：行政、研发、营销、售后，每个部门各40台计算机接入公司局域网交换机，如果要在192.168.1.0网段为每个部门划分子网，子网掩码应该怎么设置，每个子网的地址范围分别是什么？192.168.1.0网段共256个地址，划分4个子网，每个子网需要64个地址；64是2的6次方，子网掩码应该以6个0结尾，剩下的用1补齐，由26个1和6个0组成，转换成十进制是255.255.255.192；每个子网共64个IP地址，掐头去尾后可用地址只有62个，第1个子网的可用IP地址范围是：192.168.1.1-62，第2个子网可用IP地址范围是192.168.1.65-126，第3个子网的可用IP地址范围是：192.168.1.129-190，第4个子网可用IP地址范围是192.168.1.193-254；该公司各部门计算机按照3中的IP地址范围进行设置，所有计算机的子网掩码都必须设置为255.255.255.192，设置完毕后各部门内的计算机能正常联网，不同部门间的计算机无法直接联通。划分数量: function returnArr(lastSubStr) { return `$,${lastSubStr .slice(4) .join('')}` } function subnet(subnetMask = 0) { if (subnetMask === 0) return `255.255.255.0` const section = parseInt(256 / subnetMask) const oneSubNum = Math.log2(section) if (Number.isInteger(oneSubNum)) { let lastSubStr = new Array(8).fill(1) lastSubStr.splice(8 - oneSubNum, 8, ...new Array(oneSubNum).fill(0)) const lastSub = returnArr(lastSubStr) let decimalism = 0 for (let i = 8; i--; i > 0) { if (i >= oneSubNum) decimalism += Math.pow(2, i) else break } return `子网掩码最后一段二进制:(${returnArr( new Array(8).fill(1), )}) . ($) . (${returnArr( new Array(8).fill(1), )}) . ($)\n此ip会分为$段:\n开头的ip为xxx.xxx.xxx.1-${ section - 2 }\n最后的ip为xxx.xxx.xxx.${ 256 - section }-254\n您最终的子网掩码:255.255.255.$ ` } else alert('您填入的分区数并不是2的次方数') } window.onload = () => { const subEle = document.getElementById('sub-show') document.getElementById('sub-num').onchange = (e) => { console.log(e.target.value) const value = e.target.value Number.isInteger(+value) ? (subEle.innerHTML = subnet(+value)) : alert('请输入整数') } } 文章来源，感谢原作者的无私分享:https://zhuanlan.zhihu.com/p/371400090