青蛙king的博客

原创 学习使用 markdown 文档

目录一级标题二级标题三级标题四级标题五级标题六级标题文本样式列表无序列表有序列表自定义列表：超链接图片代码片段表格数学公式甘特图UML 图流程图一级标题二级标题三级标题四级标题五级标题六级标题文本样式强调文本：Mike穿了一件粉色的衣服。加粗文本：Mike是一个同性恋！加粗文本：你是一只小毛驴。删除文本：请扔掉这个苹果，因为它里面坏掉了。引用文本：我必须独占一行哦，否则无效！下标数字：H2O上标数字：210脚注：一块两毛五。1注释：Markdown将文本转换为 HT

原创 Nginx 安装与实践

在本地通过 Nginx 运行项目后，很想查看项目的运行日志，于是我们先来了解下查看日志的 Linux 命令。推荐使用 HomeBrew 来安装 Nginx。

原创 HomeBrew 安装与应用

在 macOS（或Linux）系统里，默认是没有软件包的管理器的，推荐安装使用 HomeBrew 软件包的管理器。

原创 学习使用 curl

curl 是一个非常有用的网站开发工具。curl 是常用的命令行工具——客户端（client）的 URL 工具——curl 用来请求 Web 服务器。curl 支持多种协议。curl 命令行参数多达几十种。如果熟练的话，完全可以取代 Postman 这一类的图形界面工具。

原创 vue3 里的 ts 类型工具函数

相关 API 源码。

原创 vue之服务端渲染(SSR)

因为大多数的自定义指令都包含了对 DOM 的直接操作，所以它们会在 SSR 时被忽略。// 客户端实现：// 直接更新 DOM},// 服务端实现：// 返回需要渲染的 prop// getSSRProps 只接收一个 binding 参数return {

转载 前端实现单点登录（SSO）

一般情况下，用户的登录状态是记录在 Session 中的，要实现共享登录状态，就要先共享 Session，但是由于不同的应用系统有着不同的域名，尽管 Session 共享了，但是由于 SessionId 是往往保存在浏览器 Cookie 中的，因此存在作用域的限制，无法跨域名传递，也就是说当用户在 a.com 中登录后，Session Id 仅在浏览器访问 a.com 时才会自动在请求头中携带，而当浏览器访问 b.com 时，Session Id 是不会被带过去的。这就是单点登录要解决的问题。

原创 vue3 的内置组件汇总

官方给出的说明：这样的好处是：减少标签层级，减小内存占用。Teleport 是一种能够将 “我们的组件 html 结构” 移动到指定位置的技术。使用 teleport 组件时，需要指定 “移动位置”：例如：用 suspense 实现全屏弹窗父组件A：子组件B：效果如下：suspense 组件支持：在等待异步组件加载时，渲染一些额外内容。不必非得等异步组件加载完毕再渲染，避免了因异步加载带来的白屏和闪屏问题的出现，提高了用户的体验。suspense 的使用步骤：先异步引入组件：然后用 Suspens

原创 vue 用 h() 函数创建 Vnodes

h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。Vue 提供了一个 h() 函数用于创建 vnodes。组件树中的 vnodes 必须是唯一的。

原创 vue 历程记

截止2023年年底，最新的vue2.x 源码和vue3.x 源码的核心部分，项目结构的“管理方式”对比：（左边是 vue2.x 源码目录）（右边是 vue3.x 源码目录）vue2.x 的源码托管在 src 目录下，依据功能拆分成了不同的模块；vue3.x 的源码主要是使用 monorep 的理念来开发和维护的——根据功能将不同的模块拆分到 packages 目录下面。

原创 网格布局 Grid

grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。Grid 布局远比 Flex 布局强大。

转载 交集，并集，差集，补集，对称差集

原创 element-ui 表单校验・大全

element-ui 表单校验的规则如下：

原创 element-table + el-pagination 实现分页多选功能

首先，在 el-table 中添加 :row-key=“getRowKeys” 和 selection-change 事件（当选择项发生变化时会触发该事件）。然后，给多选框的一列添加 :reserve-selection=“true”。/** ElementUI的table实现分页多选功能 ----star *//** ElementUI的table实现分页多选功能 ----end */// 设置表格每一页的唯一标识。// 表单查询-获取表格数据。// 分页-每页条数。// 分页-当前页数。

转载 el-upload 组件递归实现：多文件上传

递归上传是指：你选择了n个文件点击确定后，第一个接口上传成功或者失败后，再调用第二个接口上传第二个文件，依次等待上传完所有文件，这样做法可以大大减轻服务器的压力，就是上传时间会比较长。主要逻辑如下：①、首先需要先取消组件的自动上传操作，把属性auto-upload的值设置为false，就禁用了文件的自动上传功能了，把自动转化为手动，之所以选择多个文件会并行调用上传接口，就是这个属性导致的。②、属性auto-upload设置为false之后，action的属性就失效了，只会触发change事件、上传失败on

原创 vue3 拖拽插件 Vue3DraggableResizable

【代码】vue3 拖拽插件 Vue3DraggableResizable。

原创 前端样式穿透汇总

【代码】前端样式穿透汇总。

原创 vue3 踩坑记（汇总）

1、在 vue3 中，GET 请求接口时，传入一个数组，默认是以“xxx[]: 1, 2, 3”的形式传递的，报错：“400 Bad Request”

原创 可视化构建包分析报告

使用插件即可。listenHost配置webpack配置package.json 文件-V, --version 输出版本号-m, --mode 分析器模式。应该是“server”、“static”或“ json”。InserverInstaticInjson在“server”模式下，分析器将启动 HTTP 服务器来显示捆绑报告。在“static”模式下，将生成包含报告的单个 HTML 文件。

原创 iframe 笔记

父窗口可以通过设置嵌入的 iframe 的 URL 的哈希部分，然后通过 hashchange 事件监听嵌入的 iframe 中 URL 哈希部分的变化。需要注意的是，使用 iframe 技术时，我们应该选择可信的来源和内容，以确保安全性和可靠性。虽然 iframe 是一种常用的嵌入内容的技术，但也存在一些替代方案，具体取决于你的需求和使用情境。总结来说，iframe 技术提供了一种在网页中嵌入其他网页或内容的方式，可以扩展和丰富网页的功能和展示内容。需要根据具体的需求和情况选择适当的替代方案。

原创 CSS 样式穿透 • 汇总

修改第三方组件库的样式；修改其他组件的私有样式（其样式使用了 scoped 属性）。

原创 CSS-BEM 命名规范

BEM 是一种的 CSS 命名方法和规范。让开发更加规范与便捷，利于团队协作和维护。

原创 在 VSCode 终端里无法使用命令

【问题原因】：导致“ vscode 的终端里执行命令报错，但在 cmd 里能正常执行”的原因是——vscode 终端不能使用命令了。【解决思路】：令 vscode 终端能够使用命令。

原创 css3 动画的实现

js 的方法实现动画（这是一个实验功能，此功能某些浏览器尚在开发中。详见这里）。@keyframes+animation：这是一个实现动画的组合，必须一起使用。transition：表示过渡。transition 可以单独使用，transform：表示变形。使用 transform 实现动画时有两种选择：transform+transition：一次性动画。transform 定义行为，transition 驱动，但一次仅能驱动一次。

原创 js 中的 Event Loop 以及 宏任务 与 微任务

Engine（执行引擎）：编译并执行 JavaScript 代码，完成内存分配、垃圾回收等。Runtime（执行环境）：为 JavaScript 提供一些对象或机制，使它能够与外界交互。在 JavaScript 运行的时候，JavaScript Engine 会创建和维护相应的堆（Heap）和栈（Stack），同时通过 JavaScript Runtime 提供的一系列 API（例如：setTimeout、XMLHttpRequest 等）来完成各种各样的任务。

原创 前端缓存 & 浏览器存储

前端缓存 一般用于缓存一些不常修改的常量数据或一些静态资源文件。大部分接口请求的数据都缓存在了服务端，方便统一管理缓存数据。前端做缓存的必要性：可以缓解服务端的压力，减少带宽的占用，同时也可以提升前端的查询性能。浏览器缓存和HTTP 缓存。

原创 学习使用 mockjs

mock.js 官网生成随机数据，拦截 Ajax 请求。属性名（必选）、属性值（必选）和生成规则（可选）。属性名 和 生成规则 之间必须用竖线|分隔。

原创 缓存的深入浅出

缓存的本质：为了节约对原始资源重复获取的开销，而将结果数据副本存放起来以供获取的方式——以空间换时间。缓存命中率：我们把一批数据获取中，通过缓存获得数据的次数，除以总的次数，得到的结果就是缓存命中率。更低的延迟（latency）和更高的吞吐量（throughput）。

原创 WebGL—3D 入门

WebGL 可以直接操作更强大的 GPU 来实现绘图。

原创 SVG—2D 学习

不幸的是，如果服务器是微软的 IIS 服务器，使 gzip 压缩的 SVG 文件在所有的可用 SVG 的用户代理上可靠地起作用是相当困难的，而且 Firefox 不能在本地机器上加载 gzip 压缩的 SVG 文件。这样具有一个优点，可以对浏览器使用替代技术，在不能解析 SVG 的情况下，可以替换创建的内容。 标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。 标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

原创 从 MVC 到 MVVM 软件架构

MVC、MVP 和 MVVM 都是常见的软件架构设计模式（一种架构模式往往使用了多种设计模式）。

原创 Vuex5——pinia

pinia 官网pinia 是 Vuex 的升级版，被誉为 vuex5。官网也说过，为了尊重原作者，所以取名 pinia，而没有使用 Vuex。pinia 中只有 state、getter、action，抛弃了 Vuex 中的 Mutation，使开发更简单。pinia 中 action 支持同步和异步，Vuex 中 action 中做异步处理，mutation 中做同步处理。pinia 支持 TypeScript。Vue3 推荐使用 TS 来编写，此时使用 pinia 就非常合适了。

原创 前端·在线随机生成图片 & 免费 API

保罗API ：https://api.paugram.com/wallpaper/墨天逸：https://api.mtyqx.cn/api/random.php小歪APIEEEDOG：https://api.yimian.xyz/img东方Project：https://img.paulzzh.com/touhou/random随机美图API：搏天api：https://api.btstu.cn/sjbz/api.php姬长信API

原创 localForage 库

若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。localForage 是一个改进的 JavaScript 离线存储库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。localForage 提供回调 API 同时也支持 ES6 Promises API，你可以自行选择。

原创 match-sorter 插件

match-sorter 用于 JavaScript 中数组的简单、预期和确定性的最佳匹配排序。

原创 HTTP 协议相关入门

虽然 HTTP 2.0 解决了 HTTP 1.1 中的队头阻塞问题，但是 HTTP 2.0 依然是基于 TCP 协议的，而 TCP 最初就是为了单连接而设计的，所以依然存在数据包级别的队头阻塞问题。队头阻塞：在 HTTP 1.1 中使用持久连接时，虽然能公用一个 TCP 管道，但是在一个管道中同一时刻只能处理一个请求，在当前的请求没有结束之前，其他的请求只能处于阻塞状态。HTTP 1.1 通过增加 持久连接 的方法来解决 HTTP 1.0 一个 HTTP 通信对一个 TCP 链接造成的无谓的开销大的问题。.

原创 PWA 缓存

一个PWA应用首先是一个网页，可以通过Web技术编写出一个网页应用。随后添加上AppManifest和ServiceWorker来实现PWA的安装和离线等功能。PWA全称ProgressiveWebApp，即渐进式WEB应用。这些特性将使得Web应用渐进式接近原生App。..............................

原创 页面懒加载

懒加载又叫延迟加载，主要指页面中图片、视频等大型资源文件的懒加载。对页面中的图像做懒加载处理时，用户滚动到图像之前，可视区域外的图像是不会加载的。这与图像预加载正好相反。懒加载的原理（以图片的懒加载为例说明一下）......

原创 上传文件 & 下载文件

当你在点击下载文件之前能拿到文件的完整 url 地址时，可以直接采用文件地址的方式下载文件，否则就采用文件流的方式下载文件。

原创 algorithm

算法的目标之一是：只要达到最优的时间复杂度就可以了（在此基础上再进一步优化代码的实现）。添加节点删除节点查找节点查找链表的 2 种方式在原链表上直接查找：需要对头节点和非头节点分别进行处理对头节点：需要单独实现其逻辑——。对非头节点：直接查找，找到后，让其前一个节点的 next 指针指向其下一个节点就可以了。通过添加虚拟头节点来统一查找：先设置一个虚拟头结点再查找，找到后，让其前一个节点的 next 指针指向其下一个节点就可以了。// 先定义节点 class LinkNode {