如何用JS实现在网页上通过鼠标移动批量选择元素的效果？
简单说就是类似电脑桌面，通过鼠标选择多个图标的那种效果。如下： 监测外部容器的mousedown、mousemove、mouseup事件来进行选择判断，大致dom结构如下： <div class=\"test\"> <!--鼠标移动时显示的选择框--> <div class=\"move\"></div> <!-- 待选项 --> <div
记录一次访问量瞬间增加，导致请求卡住的问题排查过程
2022.11.07号下班路上突然收到许多用户反馈，说小程序进不去了。然后自己试了一下，打开一直转圈，于是快马加鞭赶回家，打开了电脑。 文件收集小程序：帮助用户更加方便的收集各种类型的文件，同时上传之后的文件可以在线预览。 服务器为腾讯云2核4G6M的轻量云，同时还运行着其它的一些服务。 主要消耗的是上行带宽，下行主要消耗来自于文件在线预览，这部分通过内网反代理，由另外一台低配服务器负责。 打开电
记录一些在此之前不知道的Web API
首先回顾一下以前了解过的Web API（强确实强，但很少用到...） Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。 相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API 全屏 API 为使用用户的整个屏幕展
记录一次服务器被CC攻击后的处理过程
2022年10月19日，晚上10点半，突然收到许多用户的反馈说小程序打不开了，打开一看果然，小程序一直处于转圈圈状态。 看了一下时间，10点32分，内心一句MMP：本来打算早睡，一看这架势，熬夜跑不了。 除了小程序之外，服务器上面还跑了很多其他的服务，虽然用户量不大，但是找起来也是要命。 首先告知发出反馈的用户 事件的原因，以及一个保证，并表示问题不大。 因为自己并没有收到腾讯云的安全监控提醒，所
Typescript学习笔记，从入门到精通，持续记录
//安装 npm install -g typescript //编译 tsc hello.ts //初始化 tsc --init Typescript可以理解为带静态类型的Javascript； 布尔值，boolean 数值，number 字符串，string 空值，void 表示没有任何返回值的函数 Null 和 Undefined /* 先声明后使用 */ let a: string; a
- Typescript
- 友人a丶
- 2022-10-08
- 1278 热度
- 0评论
Openresty、Lua学习笔记，从入门到精通，持续记录
OpenResty（也称为 ngx_openresty）是一个全功能的 Web 应用服务器。它打包了标准的 Nginx 核心，很多的常用的第三方模块，以及它们的大多数依赖项。 通过揉和众多设计良好的 Nginx 模块，OpenResty 有效地把 Nginx 服务器转变为一个强大的 Web 应用服务器，基于它开发人员可以使用 Lua 编程语言对 Nginx 核心以及现有的各种 Nginx C 模块
Vue渲染函数该如何使用？有哪些需要注意的地方？
Vue的模板语法适用于绝大部分的需求场景（模板最终会被编译为渲染函数），在绝大多数情况下，Vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力，举例如下： 假设设计一个开源的后台管理系统，侧边栏菜单需要根据路由自动生成菜单，由于系统可能会被用于不同的功能需求。所以路由的层级、数量都是不确定的。 如果通过模板语法来写，假设路由最多只有三层，
Ant-Design-Vue 3.x 图标库如何实现自动引入？
Ant-Design-Vue升级到2.x以上的版本之后，自带的图标库就不支持通过给组件传递一个代表指定图标的属性来使用了。 <-- 显示Home图标 --> <a-icon type=\"home\" /> <template> <message-outlined :style=\"{fontSize: \'16px\', color: \'#08c\'}\" />
PHP+Swoole实现web版的SSH客户端
本来是想通过PHP的proc_open和进程进行交互，可是中间的坑太多了，不得不转换一下思路，然后想起来宝塔有网页版SSH客户端，然后研究了一下，嘿嘿，发现能成😁😁😁。 使用了有名的xterm.js，基本可作为生产使用了。（权限记得做好） 测试Demo ：http://cname.teiao.com:5701 Github：https://github.com/friend-nicen/php-w
Git冲突分为哪几种情况？常用解决办法
原文：https://www.it610.com/article/1304846442027847680.htm 当远端有更新，本地库没有有变化，拉取操作远端会覆盖本地库（远端版本高于本地） 当远端修改，本地库也有修改，拉取操作会产生冲突文件（远端版本和本地版本冲突） 当本地库修改，而远端没有变化，拉取不会产生变化（本地版本高于远端版本） 当本地库版本低于远端版本，则无法推送，必须先拉取在操作，否
防XSS的利器，什么是内容安全策略(CSP)？
内容安全策略(CSP)，是一种安全策略，其原理是当浏览器请求某一个网站时，告诉该浏览器申明文件可以执行，什么不可以执行。CSP是专门解决XSS攻击而生的神器。 CSP的引入会使得我们的引入扩展程序更加安全，并且可以由开发者指定可以加载扩展程序的类型，避免恶意的脚本在浏览器中执行，造成信息泄露问题。 CSP是防XSS的利器，可以把其理解为白名单，开发者通过设置CSP的内容，来规定浏览器可以加载的资源
记录Docker使用过程中遇到的难点和问题
Docker 将应用程序与该程序的依赖，打包在一个文件里面。运行这个文件，就会生成一个虚拟容器。程序在这个虚拟容器里运行，就好像在真实的物理机上运行一样。有了 Docker，就不用担心环境问题。 被打包的程序可以是一个操作系统，也可以是Nginx应用，也可以是PHP等任意一种“程序”，打包之后的镜像可以在任意一台安装了Docker的主机上，完美的运行。 多个容器可以和不使用容器的应用一样，相互进行
Ant Design Vue自定义主题失效解决办法
antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，可以根据需求进行相应调整 。 @primary-color: #1890ff; // 全局主色 @link-color: #1890ff; // 链接色 @success-color: #52c41a; // 成功色 @warning-color: #faad14; // 警告色 @error-color: #f5
Vue组件设计学习笔记，持续记录
组件化思想并不是前端独有的，但却是前端技术的延伸 任何软件开发过程，或多或少都有那么一些组件化的需求。 每个组件对应一个目录，组件所需的各种资源都在这个目录下就近维护；（最具软件工程价值） 页面上的每个独立的可视/可交互区域视为一个组件； 由于组件具有独立性，可以自由组合； 页面是组件的容器，负责组合组件形成功能完整的界面； 当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换 分子是由原
使用PHPStorm自带的Git版本控制，出现Git.exe占用内存过高
今天发现使用PHPstorm自带的Git操作，Git会占用很高的内存，而禁用之后，使用终端操作，Git基本不占内存... 这应该是一直存在的问题，以前没有发现，虽然启用了自带的Git版本控制功能，但实际上一直用的命令行... 进入PHPStorm，一切正常；此时Git版本控制已启用，点击上方菜单，VSC-更新项目 然后就变成了，这样： 然后把PHPstorm自带的Git插件禁用了，再打开PHPst
PHP编译参数configure配置详解，以及php.ini说明
人，有了物质才能生存；人，有了理想才谈得上生活。 因为现在都是宝塔、lnmp这些自动进行配置的，这个知识点平常很少需要用到，但了解一下，确实能让一些问题豁然开朗。 ./configure -h 在源代码目录中，该命令可以查看所有编译参数以及对应的英文解释 --prefix=/opt/php //指定 php 安装目录 --with-apxs2=/usr/local/apache/bin/apxs
SVG学习笔记，持续记录。
SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（vectorgraphicshape，例如：由直线和曲线组成的路径）、图像()、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作，特征集包括嵌套变换（）、剪切路径（）、alpha蒙板（）、滤镜效果（）、模板对象（）和其它扩展（）。 SVG 是使用 XML 来描述二维图形和绘
SortableJS / vue.draggable.next 使用笔记，持续记录
东西确实是好东西，奈何一开始文档没捋清，费了一番时间好好琢磨了一下。 Github：https://github.com/SortableJS/vue.draggable.next，完整代码如下： <draggable v-model=\"myArray\" group=\"people\" @start=\"drag=true\" @end=\"drag=false\" :move=\"move\" hand
JS定时器清除之后，已经开始但是没有运行完的函数还会继续运行吗？
最近使用定时器的时候遇到这样一种情况，定时器清除了，功能仍然在跑（遍历数组，同步定时网络请求）。 排查了一下代码，发现逻辑确实没问题。后来一想，是不是函数没运行完，仍然在跑，于是上代码测试了一下： let timer = setInterval(async () => { console.log(\"开始\") await new Promise((resolve) => { setTim
WebRTC开发经验总结，持续记录
volume 音量约束 sampleRate: 采样率 sampleSize: 采样大小，采样的位数 echoCancellation: 回音消除 autoGaincontrol： 增加音量 noiseSuppression: 降噪 latency ： 延迟大小 channelCount: 切换声道 deviceID: 多个音频输入输出设备的进行切换 groupId: 同一个物理设备，是一个分组，
开车有哪些技巧和需要注意的地方？持续记录
记录一下常见的开车场景，以及操作技巧。（方向盘半圈，轮胎转动15度） 快走沙慢走水、不快不慢走泥巴、走灰不走白，遇黑停下来。 车身距离障碍物1m以上，后视镜和障碍物对齐时打满方向盘即可 车身距离障碍物0.5m以上，车窗中间和障碍物对齐时打满方向盘即可 车身距离障碍物贴近后视镜时，车身B柱和障碍物对齐时打满方向盘即可 侧方位出库：看到前车后保险杠上沿时，方向盘打满可安全出库 倒车入库的常用技巧： 直
记录一次使用安卓模拟器抓包安卓应用
HTTPdebugger破解版：https://pan.baidu.com/s/1__7e0fVTmccfO-n5FUrzkQ，提取码：8888 雷电模拟器：https://www.ldmnq.com/?n=6000&bd_vid=9204851305503095844 一开始使用夜神模拟器，解决不了证书的问题，怎么设置都不生效，换成这个就好了。 最大的一个问题就是在模拟器上面进行HTTP
详细了解 Cookie、Session、Token以及oauth2、jwt
很久很久以前，Web 基本上就是文档的浏览而已，既然是浏览，作为服务器，不需要记录谁在某一段时间里都浏览了什么文档。 每次请求都是一个新的 HTTP 协议，就是请求加响应，尤其不用记住是谁刚刚发了 HTTP 请求，每个请求相对来说都是全新的。 但是随着交互式 Web 应用的兴起，像在线购物网站和需要登录的网站等就面临一个问题，那就是要管理会话，必须记住哪些人登录系统，哪些人往自己的购物车中放商品。
Vue Ant Admin学习笔记，持续记录
Vue Ant Admin基于Vue2.x的中后台管理系统：https://iczer.gitee.io/vue-antd-admin-docs/ 比较漂亮的，可以借鉴的：https://vue-admin-beautiful.com/admin-pro Ant Design of Vue： https://antdv.com/docs/vue/introduce-cn/（V2及以上版本为Vue
前端节流（throttle）和防抖动（debounce）
节流指的都是某个函数在一定时间间隔内只执行第一次回调。举个常见的节流案例：我们把某个表单的提交按钮——button 设成每三秒内最多执行一次 click 响应；当你首次点击后，函数会无视之后三秒的所有响应；三秒结束后，button 又恢复正常 click 响应功能，以此类推。 有什么用呢？通常，这类提交 button 的@click响应会给后端发送 api 请求，频繁的点击意味着频繁的请求（流量）
虎年年会抽奖网页源码分享
年会抽奖程序，乐呵乐呵哈。 抽奖名单在`js/member.js`里。 抽奖之后会动态更新中奖人员名单。 Gitee：https://gitee.com/friend-nicen/yearlottery Github：https://github.com/friend-nicen/lottery 演示地址：year.nicen.cn 最新版 演示地址：year.nicen.cn/1.2 1.2版
Vue开发、学习笔记，持续记录
Vue每天学一些，慢慢的也学下来了。记一些笔记 生命周期图：https://nicen.cn/collect/life.png Vue-Router学习：https://nicen.cn/vue-router.html Vue官网： https://vuex.vuejs.org/zh/ 基于Vue的各种UI库 Vuetify ：https://vuetifyjs.com/zh-Hans Eleme
JS的异步编程过程中的问题集锦、echarts使用记录。
为了方便维护，在JS里的把html模板和业务逻辑做了分离，在业务逻辑里向模板对象传递指定的data对象返回生成好的html，以往的数据对象是用户交互产生的，今天需要改成从接口拉取。 按照以往的逻辑，获取用户的交互数据，传递给模板。基本上是同步的，今天修改的时候为了不触碰原有的代码，把网络请求单独放在了其他对象里，业务流程变成了，调用网络请求函数产生的返回值作为数据对象传递给模板对象。 一切看似没问
理解PHP MVC，以及NPM、YARN命令的相关说明
MVC，在我印象中最典型的、自己用的多的当属THinkPHP。 MVC包括控制器（Controller），模型（Model），视图（View）。 控制器的作用是调用模型和 视图，将模型产生的数据传递给视图，并让视图去显示 模型的作用是获取数据并处理返回数据 视图的作用是将取得的数据进行美化，并向用户终端输出 1. 浏览者 -> 调用控制器，发出指令 2. 控制器 -> 按指令选择合适的