- 博客(131)
- 收藏
- 关注
RSS订阅
转载 跨页面通信、如何监听 LocalStorage 的变化【storage 事件】
场景：当涉及到同时打开多个tab页，操作一个tab，希望其他的tab也会同时进行更新状态。原理就是前度的跨页面通信一、当 LocalStorage 变化时，会触发storage事件。在需要改变的页面增加时间监听：window.addEventListener('storage', function (e) { if (e.key === 'ctc-msg') { const data = JSON.parse(e.newValue); const text =
2022-04-02 16:44:00
3914
2
原创 git nrm 切换镜像
1.利用npm 下载nrm：sudo npm install -g nrm2.查看可切换的镜像源：nrm ls3.切换镜像源（如淘宝）：nrm use taobao4.直接使用npm 下载包： npm install **** 或 yarn
2022-01-10 20:49:32
1405
转载 CSS相关的学习网站、JavaScript相关的学习网站、其它学习网站【转 技术胖学程序】
一、CSS学习网站1. Flex Box 冒险游戏网址：Flex Box 冒险游戏 https://codingfantasy.com/games/flexboxadventure简介：这是一个通过使用 flex box 相关知识来完成闯关的冒险游戏，一共24个关卡，更生动地带你体验 Flex 的真实应用场景2. Flexbox 格子骑士网址：Flexbox 格子骑士 https://knightsoftheflexboxtable.com/简介：这个游戏能帮助你学习不同层面的Fle
2021-12-29 10:48:40
385
转载 转载 最全前端资源汇总
最全前端资源汇总一、概要这份汇总整理，很程度上参考了GitHub最全前端资源汇总；云集前端教程、开发资源、免费书籍、手册规范、求职面试等等，旨在为前端学习 & 技能提升提供方便。当然，并不期望这成为一个前端武学收藏夹；毕竟，只有自己掌握，才是真正拥有；况且前端发展如火如荼，日新月异。这里会尽量保持探索 & 学习 & 更新。欢迎大家推荐，反馈，谢谢！二、优秀的网站JS前端开发群月报 前端开源资源库 国内老牌技术社区：OSChina、博客园、CSDN、51...
2021-05-24 17:34:32
2268
原创 简简单单的一个上传文件、react、input file、利用事件获取本地文件
一、场景我需要点击一个按钮，来选取本地的文件；获取到文件的对象后，再去处理或者上传；二、思路1、利用 H5 input 的 file 属性来选取文件；2、但是我不要展示这个控件，所以需要用一个【dom节点：比如按钮】来模拟这个 input 的 click 点击事件； 这个 input 需要隐藏：dispaly:none;3、选取文件之后、监听 onchange 事件就可以获取到文件了；input - accept 类型参考：MDN - 常见 MIME 类型列表三、实现import
2021-05-18 16:05:57
6123
原创 flex布局
一、垂直结构 display: flex; flex-direction: column;二、自动补齐剩余空间左中右结构，左右固定宽度，中间自动补齐宽度；.omni-warpper{ display: flex;}.content-left{ width: 150rpx;}.content-center{ flex-grow: 1; // 设置 flex-grow}.content-right{ width: 55rpx;}...
2021-05-17 16:04:58
370
原创 github 主分支如何阻止直接提交，只允许其他分支合并
在 Github 上，可以通过保护主分支的设置来阻止直接提交，只允许其他分支合并。具体步骤如下：进入 Github 仓库的设置页面，点击 “Branches”（分支）选项卡。在 “Branch protection rules”（分支保护规则）部分，点击 “Add rule”（添加规则）按钮。在 “Branch name pattern”（分支名称模式）输入框中，输入主分支的名称（如 master）。在 “Require pull request reviews before merging”（要
2023-05-04 10:55:35
4572
1
原创 如何阻止 beforeunload 弹窗的弹出时机？
全局定义一个变量 window.isCloseHint。在执行下载任务时，先将。用于控制是否返回弹窗。
2023-01-19 11:04:25
1965
原创 Vue2 slot 内容展示为 undefind 解决办法。
要注意 vue 与 vue-template-compiler 版本一致，主要原因是 vue 中 renderSlot 方法 调整，在 v2.6.13 版本，renderSlot 第二个参数支持 函数类型，同时 vue-template-compiler 编译slot 返回一个函数，但是v2.6.12 版本，renderSlot 第二个参数只是VNode，同时 vue-template-compiler 编译slot 直接返回一个VNode。，或者更低版本即可。
2023-01-16 14:21:36
949
原创 如何禁用elementUI2 tabs组件使用方向键切换。
添加事件 @keydown.native.capture.stop.prevent。elementUI 页面涉及到左右键切换，会有对应的操作。
2022-11-08 15:10:08
1119
转载 nginx 因POST请求体内容过大导致500，设置 client_max_body_size，client_body_buffer_size
设置 client_max_body_size 和 client_body_buffer_size。
2022-11-04 16:52:24
4570
原创 js-base64 的转码和解码
// js-base64官网： https://github.com/dankogai/js-base64用法import { Base64 } from 'js-base64';Base64.encode('你好') // 转码Base64.decode("text") // 解码
2022-08-31 15:48:58
548
原创 关解决windows报错 Use `--location=global` instead. 和 found 0 vulnerabilities
npm报错npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.found 0 vulnerabilities
2022-06-14 12:51:22
10864
原创 文字滚动左出右进，纯css操作
注意点一、使用 white-space: nowrap; 阻止文字换行；二、需要滚动的 标签必须要有width属性。三、keyfrom 初始值 需要从 100% 开始。这样才会有从右进入的效果。以下是 具体实现codehtml：<div className={style.banner_textscroll}> <div>滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字</div></div>css:/* 文字滚动 *
2022-05-10 15:33:01
2187
原创 为什么高德地图 Polygon 多边形 放大就消失了？
当我们需要同时渲染多个多边形时，尽量逐个渲染，而不是将所有的渲染路径统一放到数组中渲染。问题代码： 一次性渲染多个多边形const data = [ [...], [...] ...// 假设这里有很多子元素]const polygon = new AMap.Polygon({ path: data, fillColor: color, strokeOpacity: 0.8, fillOpacity: fillOpacity ? fillOpacity: 0
2022-05-07 15:52:15
620
原创 解决Vue报错：[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘: T
解决Vue报错：[Vue warn]: Error in nextTick: “NotFoundError: Failed toexecute ‘insertBefore’ on ‘Node’: The node before which the new nodeis to be inserted is not a child of this node.”一、问题产生原因因为是在template 包裹的最外层div 上使用了v-if、当不渲染时、不符合VUE语法。<template>.
2022-04-29 15:17:53
8273
1
原创 Mac 解决控制台报错 nvm is not compatible with the npm
输入npm config delete prefixnpm config set prefix $NVM_DIR/versions/node/v6.11.1
2022-04-26 22:52:11
485
原创 项目中使用 CSS Modules 用法
CSS Modules 用法 地址：阮一峰博客教程一、案例 https://github.com/ruanyf/css-modules-demos$ git clone https://github.com/ruanyf/css-modules-demos.git二、配置 webpack.config.js。module.exports = { entry: __dirname + '/index.js', output: { publicPath: '/', filen
2022-04-14 11:06:52
712
原创 antd 时间框组件如何修改默认中文？
antd 官方文档方案：https://ant.design/docs/react/faq-cn#/import moment from 'moment'import locale from 'antd/lib/date-picker/locale/zh_CN'import 'moment/locale/zh-cn'moment.locale('zh-cn')<RangePicker locale={locale}/>改之前改之后...
2022-04-11 10:09:46
865
原创 在微信小程序中使用自定义字体【font-family】、同时在canvas
一、本地准备字体文件例如 otf文件二、上传通过网站转换成base64格式 css文件网站传送门：https://transfonter.org/用法如下三、在【app.wxss】文件中引入四、遇到的问题想在文件 canvas 中使用的话，必须在当前的文件中引入一次，才可以使用；参考链接：https://www.deanhan.cn/wx-app-add-fonts.html...
2022-03-15 20:46:57
2438
原创 react-router-dom v6版本常用功能小计
github地址：https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.mddemo地址：https://stackblitz.com/edit/github-agqlf5一、安装npm install react-router-dom@6二、使用 BrowserRouter, Routes, Route这里注意与 v5 的区别Routes 组件替换 v5 的 Switch 组件；
2022-03-02 10:12:15
1061
原创 https协议原理、中间人问题
一、数据传输类型（中间人问题）1 明文传输：【问题】相当于裸奔、任何第三方都可拦截数据。2 对称加密：【特点】传输的数据是通过加密之后的密文。【问题】当第三方（中间人） 可以充当客户端、获取到服务器的的加密算法、通过转发的方式来给 真正的客户端 传送数据。同样不安全。【缺点】key只有一个3 非对称加密：服务器有唯一私钥 - 客户端有公钥【特点】数据流转如下：私钥对数据加密、公钥对数据解密。公钥对数据加密、私钥对数据解密。【问题】看似安全、但实际 第三方（中间人）
2022-02-14 20:09:51
389
原创 小程序模板订阅操作【小程序订阅消息】
一、功能和消息类型可查看官网文档、链接如下：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html二、操作流程步骤一：【前端】获取模板 ID在微信公众平台手动配置获取模板 ID：登录 https://mp.weixin.qq.com 获取模板，如果没有合适的模板，可以申请添加新模板，审核通过后可使用。步骤二：【前端】获取下发权限一次性订阅消息、长期订阅消
2022-02-11 15:30:51
2596
1
原创 【函数】快速获取cookie的方法
export function getCookie(cname) { // 1 例如： mobile= const name = cname + "="; // 2 将cookie切割成数组 // ['uuid_tt_dd=10_11', ' UN=qq_45301392',] const cookieArray = document.cookie.split(";"); // 3 通过遍历找出需要提出的cookie for (let i = 0; i < cooki
2022-01-20 15:06:04
416
原创 【组件】文字超出宽度显示点点点，可自定义行数
注意：-webkit-line-clamp是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，.
2022-01-20 14:55:57
135
原创 2022/01/07 浏览器是如何工作的？
视频地址：https://www.bilibili.com/video/BV1x54y1B7RE?spm_id_from=333.999.0.0一、浏览器结构图（简化示意图）1、用户界面：用于展示除标签页之外的其他用户界面内容。2、浏览器引擎： 用于在用户界面和渲染引擎传输数据。3、渲染引擎：负责渲染用户请求的页面内容。二、常见的主流浏览使用的内核需要注意一点，Chrome 中的 Blink 是基于开源的 Webkit 优化之后的引擎。三、浏览器的组成结构1、进程和线程【进程
2022-01-12 14:18:13
133
原创 学习HTTP协议详解小计（主流浏览器使用的内核）
视频连接：https://www.bilibili.com/video/BV1js411g7Fw一、HTTP基本概念以及工作原理1、HTTP请求信息和响应信息1. 请求行2. 请求头信息3. 请求主体信息 请求行分为三部分 请求方法、请求路径、所用的协议2、请求方法：GET、POST、HEAD、PUT、TRACE、DELETE、OPTIONS 等3、状态码及其含义状态码：用来反映服务器响应情况的。常见的状态码如图：1 信息：接收到请求，继续处理2 成功：操作成功的收到、理
2022-01-06 20:27:24
1394
原创 网络层服务学习笔记
视频地址：https://www.bilibili.com/video/BV1xJ41137Q3?p=21一、网络层服务（网络层主要功能）1、主要作用主要作用是将网络层数据报从源主机送达目的主机。注意功能两点：转发：分组从输入接口转移到输出接口。路由选择：决定分组经过的路由或路径。2、路由器路由器依据路由选择协议确定路由表,由路由表确定一个转发表。二、数据报网络与虚电路网络1、数据报网络（效率高、成本低。但不可靠）按照目的主机地址进行路由选择的网络。特点：无连接
2022-01-05 17:58:27
1025
原创 2022年01月04日 计算机网络应用原理记录
日常资源留存网络请求的原理： https://www.bilibili.com/video/BV1xJ41137Q3?p=9
2022-01-04 11:14:33
698
原创 js如何监听页面的展示与隐藏(visibilitychange) 以及苹果部分机型 safari浏览器无法监听到(visibilitychange)的处理办(pageshow)。
一、场景：当标签页面隐藏、然后展示的时候触发事件涉及到两个网页的跳转 而产生的问题二、安卓和ios需要分别来处理兼容问题安卓 中可以直接使用 visibilitychange 来判断标签页展示、还是隐藏document.addEventListener("visibilitychange", () => { if(document.hidden) {} // 页面被挂起 else { // 页面呼出 // 增加路由判断 仅当前页面生效 // if(window.l
2021-12-23 20:55:59
5363
1
原创 window.navigator 对象、检测当前设备、浏览器名称等 是否是ios...
示例：判断是否是苹果设备 const isIos = /ipad|iPhone|Mac/i.test(window.navigator.userAgent)一、只读属性 window.navigator二、检测浏览器并返回浏览器名称字符串var sBrowser, sUsrAg = navigator.userAgent;// The order matters here, and this may report false positives for unlisted browse.
2021-12-17 16:19:15
1101
原创 History.pushState 阻止页面浏览器后退功能、window.performance.navigation.type 判断页面刷新方式
需要阻止浏览器的后退按钮，移动端的后退手势。 window.history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { window.history.pushState(null, null, document.URL); });
2021-12-09 15:44:16
2979
转载 js 识别当前设备信息 是否是移动端
一、Navigator 对象： https://www.w3school.com.cn/jsref/dom_obj_navigator.asp/Mobi|Android|iPhone|Chrome/i.test(navigator.userAgent)二、控制台打印 navigator.userAgentnavigator.userAgent ==>'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHT
2021-12-08 14:57:32
11776
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人