人民有信仰民族有希望国家有力量

原创 Docker安装详细步骤、图文命令解析、包括Docker如何安装卸载MySQL 8容器、常用命令~

当前操作演示系统为阿里云成功Docker 是一个，允许开发者将应用及其依赖项打包到一个轻量级、可移植的容器中，实现跨平台的高效部署和运行~

原创 前端界面在线excel编辑器 。node编写post接口获取文件流，使用传参替换表格内容展示、前后端一把梭。

首先luckysheet插件是支持在线替换excel内容编辑得但是浏览器无法调用本地文件，如果只是展示，让后端返回文件得二进制文件流就可以了，直接使用luckysheet展示。这里我们使用xlsx-populate得node简单应用来调用本地文件，自己写一个接口，让自己对后端有更一步得了解。

原创 解决Luckysheet在线预览编辑Excel、PDF.....无法在同一个界面创建多个luckysheet实列问题

luckysheet插件由于是实列挂载到windows.luckysheet实列上，导致同时只能使用一个luckysheet于是我们使用<iframe/>标签进行隔离：1.每个<iframe>创建独立的浏览器上下文环境，避免多个Luckysheet实例共享同一JavaScript执行环境2.通过<iframe>的沙箱特性，防止数据污染和CSS样式冲突，确保各实例独立运行。

原创 为什么后端接口返回数字类型1.00前端会取到1？

Axios 的 transformResponseaxios 在接收到服务器的响应后，会通过一系列的转换函数（transformResponse）来处理响应数据，使其适合在应用程序中使用。默认情况下，axios 的 transformResponse 包含以下步骤：​解析 JSON 数据：使用 JSON.parse 将响应的 JSON 字符串转换为 JavaScript 对象。​转换数据：根据响应的 Content-Type，可能进行其他转换（如将 XML 转换为对象）。​返回数据：最终返回处理后

原创 数据库:详细的解释和具体的例子来理解左连接（LEFT JOIN）、右连接（RIGHT JOIN）、内连接（INNER JOIN）以及外连接（FULL JOIN）的概念及其应用场景。

​INNER JOIN：只返回两个表中都存在的相关数据。​LEFT JOIN：返回左表的所有数据及右表中匹配的数据，右表无匹配则为NULL。​RIGHT JOIN：返回右表的所有数据及左表中匹配的数据，左表无匹配则为NULL。​FULL JOIN：返回两个表中的所有数据，匹配的和不匹配的都包括，缺失部分用NULL填充。​需要所有左表数据，无论右表是否有匹配 → ​LEFT JOIN​需要所有右表数据，无论左表是否有匹配 → ​RIGHT JOIN​只需要两个表中都有的数据→ ​。

原创 前端插件使用xlsx-populate，花样配置excel内容，根据坐添加标替换excel内容，修改颜色，合并单元格...。

xlsx-populate 主要是为 Node.js 环境设计的，因为它依赖于一些仅在 Node.js 环境中可用的功能和库，比如文件系统访问（fs 模块）等。这意味着它不能直接在浏览器端的 JavaScript 中使用，因为浏览器环境缺乏对本地文件系统的直接访问权限，并且存在安全限制。

原创 H5在微信环境等环境无法F12时如何调试log

vconsole 是一个开源的前端调试面板，由腾讯开源。它可以在任何支持 JavaScript 的移动端浏览器中运行，包括微信内置浏览器。vconsole 提供了类似 PC 端开发者工具的功能，如控制台日志、元素检查、网络请求监控等，极大地提高了移动端调试的效率。

原创 前端项目依赖npm 、git 报错解决记录

npm报错就切换yarn ， yarn报错就先切换npm删除 node_modules 跟 package-lock.json文件重新下载依

原创 git更改当前项目的远程仓库，保留原始仓库提交记录提交到新仓库

git更改当前项目的远程仓库，保留原始仓库提交记录

原创 创建一个谷歌插件项目dome上线流程+源码

创建一个简单的 Chrome 扩展程序，其主要功能是 JSON 格式化。用户可以通过点击扩展图标打开一个弹出窗口，在弹出窗口中输入或粘贴 JSON 数据，然后点击格式化按钮来格式化 JSON 数据。

原创 前端H5移动端基础框架模板 ：Vue3 + Vite5 + Pinia + Vant4 + Sass + 附源码

技术栈选用 Vue3 + Vite5 + Pinia + Vant4 + Sass。

原创 前端lodash库原来这么好用，一行代码使用防抖节流，不用再去设置复杂变量

前端lodash库原来这么好用，一行代码使用防抖节流，不用再去设置复杂变量

原创 面试官：前端如何去控制并发？ ：浏览器的内置机制已经实现控制并发

假设一个页面需要加载10个资源，每个资源都在同一个域名下。浏览器会首先并行发送6个请求，其余4个请求会被放入队列中。当其中一个请求完成后，队列中的一个请求会被发送出去，如此循环，直到所有请求都完成。协议引入了多路复用（Multiplexing）技术，允许在一个连接上并行处理多个请求。这大大减少了连接的开销和延迟，提高了请求的处理效率。协议下，浏览器可以一次性并行发送所有10个请求，而不需要等待前面的请求完成。假设一个页面需要加载10个资源，每个资源都在同一个域名下。HTTP/1.1 的并发连接限制。

原创 window.open除了url参数，你知道其他两个吗？

window.open 是 JavaScript 中用于在新的浏览器窗口或标签页中打开指定 URL的方法。它提供了丰富的参数选项，可以用来控制新窗口的行为和外观。以下是 window.open 方法的详细用法和参数说明。

原创 Electron + Vue3 开发桌面应用+附源码

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发并维护，允许开发者使用现代 Web 技术创建原生应用程序。Electron 结合了 Chromium 渲染引擎和 Node.js 运行时环境，使得开发者可以在同一个项目中同时利用前端和后端的技术栈。Electron 主要特点跨平台：一次编写，可在 Windows、macOS 和 Linux 上运行。

原创 后端接口返回二进制文件，前端 window.opent预览展示

后端接口返回二进制文件，前端预览展示

原创 前端预览文件，支持.docx.word.pdf.excel.image/png/jpeg/gif/bmp/tiff格式文件,保留原文件样式，封装未为一个组件，单个需求自行代码截取，简单好用，轻松搞得。

前端预览文件，支持.docx.word.pdf.image/png/jpeg/gif/bmp/tiff格式文件，封装未为一个组件，简单好用，轻松搞得！

原创 el-table利用折叠面板 type=“expand“ 嵌套el-table，并实现 明细数据多选，选中明细数据后返回原数据得嵌套格式

【代码】el-table利用折叠面板 type="expand" 嵌套el-table，并实现 明细数据多选，选中明细数据后返回原数据得嵌套格式。

原创 为了在前端项目打包后删除 console.log 日志，可以采用不同的方法来实现这一目标。以下是几种常见的方式，包括在 Webpack 和 Vite 中的具体实现。

在生产环境中，我们希望移除所有的 console.log 日志。在生产环境中，我们希望移除所有的 console.log 日志。如果 process.env.NODE_ENV 的值为 'production'，则 isProduction 为 true，表示当前环境为生产环境。在 vue.config.js 中，我们可以使用 configureWebpack 方法来配置 webpack 的相关选项。首先，我们需要判断当前环境是否为生产环境。首先，我们需要判断当前环境是否为生产环境。

原创 如何在 Vue 中创建一个带有表格和表单的弹窗

本文将通过一个具体的示例来介绍如何在 Vue 应用中实现一个带有表格和表单功能的弹窗组件。我们将使用 Element UI 库中的 el-dialog 组件来构建这个弹窗，并结合 el-table 和 el-form 来展示数据并允许用户进行编辑。

原创 UE3+nest.js前后端部署-Linux中Nginx配置文件前端界面路径，后端反向代理接口

或者 查看 /etc/nginx 目录，大多数 Linux 发行版的 nginx.conf 文件位于 /etc/nginx 目录下。保存并退出： 按 Esc 退出插入模式。输入 :wq 并按 Enter 保存并退出。不保存并退出： 按 Esc 退出插入模式。并按 Enter 不保存并退出。1.输入查找命令，这个命令会在整个文件系统中搜索名为 nginx.conf 的文件。一、配置代理的文件是nginx.conf，首先找到它的目录。

原创 什么是iframe，火爆的微前端解决方案方案，教你快速看懂使用

iframe（Inline Frame） 是一种 HTML 标签，它允许在一个网页内部嵌套加载另一个网页，从而实现在主页面中展示外部网页内容的功能。iframe 创建了一个独立的浏览上下文，拥有自己的文档对象模型（DOM）和执行环境，这意味着它不会与主页面共享JavaScript变量或CSS样式，提供了较好的隔离性。基本用法直接在模板中使用 标签： 在Vue组件的模板部分，你可以直接插入标签，并设置src属性指向你想要嵌入的页面URL。2.设置 src 属性：s

原创 宝塔面板配置node/npm/yarn/pm2....相关全局变量 npm/node/XXX: command not found

2.跳转至node目录下,我的node版本是v16.14.2。我的里面有node,npm,pm2,yarn......2.1 如果不知道自己node版本多少就跳转到。3.继续查看bin当前文件下的目录。1.打开终端 , cd 到根目录。然后查找当前目录下的文件。确定自己的node版本。4.输入命令添加至全局。

原创 Linux宝塔面板使用教程 - Centos/Alibaba Cloud Linux，解放命令实现可视化

使用前注意事项：为了您的正常使用，请确保使用全新或纯净的系统安装宝塔面板，不支持已部署项目/环境的系统安装。

原创 VUE3+nest.js前后端部署-服务器linux中部署Node.js环境

一.安装分布式版本管理系统Git (Alibaba Cloud Linux 3/2、CentOS 7.x)六.安装多个Node.js版本 ,当前安装得是18版本，可以运行步骤五获取全部得Node.js版本。二.使用Git将NVM的源码克隆到本地的~/.nvm目录下，并检查最新版本。四.修改npm镜像源为阿里云镜像，以加快Node.js下载速度。如果遇到网络问题有个方法直接取消网络代理。七.查看已安装的Node.js版本。三. 配置NVM的环境变量。五.查看Node.js版本。

原创 VUE3+nest.js前后端部署-服务器linux中部署Redis应用

六.指定redis必须存放在/usr/local/redis目录，想删除直接删除这个文件，不添加该关键字Linux会将可执行文件存放在/usr/local/bin目录，自愿改。一、登录Xshell7 && 服务器 开放Mysql 3306端口， Redis 6379 端口。八.修改配置 /usr/local/redis下有一个redis.conf的配置。九.运行 redis-cli 并指定远程 Redis 服务的 IP 地址和端口。八.添加 Redis 二进制文件路径到 PATH 中。

原创 VUE3+nest.js前后端部署-服务器linux中安装数据库Mysql8

(Press y|Y for Yes, any other key for No) :Y #输入Y确认使用已设置的密码。（2）在输入密码时，系统为了最大限度地保证数据安全，命令行将不做任何回显。如果以下报错为密码错位，复制粘贴得注意空格，初始密码重新尝试。5.运行以下命令，启动并设置开机自启动MySQL服务。运行以下命令后，输入root用户的密码登录MySQL。6.运行以下命令，获取并记录root用户的初始密码。3.运行以下命令，查看MySQL版本号。2.运行以下命令，安装MySQL。

原创 Vue.js 中使用 Element UI 的表格列选择selectable 可选控制

1.定义 selectable 函数： 在 Vue 组件的 methods 或者 computed 属性中定义一个函数，该函数接收两个参数：当前行的数据 row 和行的索引 index。函数应返回一个布尔值，指示该行是否可被选中。2.绑定 selectable 函数： 在 标签中，使用 type="selection" 创建一个选择列，并通过 :selectable 绑定上面定义的函数。

原创 前端文件下载得几种方式，前三种一行代码解决

【代码】前端文件下载得几种方式，前三种一行代码解决。

原创 使用JavaScript优雅实现每页一图的打印功能

步骤二：生成打印HTML内容接下来，定义buildPrintContent函数，它负责根据图片数据生成HTML字符串，确保每张图片被包裹在一个具有.invoice-page类的中，以便于应用打印样式。

原创 vue中引入Big.js解决0.1 + 0.2 ！== 0.3 的 精度问题

确保在进行加减乘除等运算时，使用 Big.js 提供的方法而不是 JavaScript 原生的运算符，以确保高精度计算的正确性。：Big.js 提供了各种数学运算方法，如加法、减法、乘法、除法、取余等。：Big.js 允许你将 Big.js 对象格式化为字符串，可以控制小数点位数、千位分隔符等。函数来创建 Big.js 对象，可以接受数字、字符串或另一个 Big.js 对象作为参数。：你可以使用 Big.js 提供的方法来控制数学运算的精确度，包括小数点位数和舍入方式。

原创 VUE3-nest前后端部署教程-----1.购买服务器安装Xshell7

XFTP安装，用于轻松地通过网络传输文件 减少繁琐得 linux 命令 修改文件。F12打开下载链接复制到迅雷下载更快 下载链接。下载后双击打开傻瓜式安装全部点击 下一步。学生可以选择高校认证免费获得6个月。为服务器登录账号密码。HTTP（端口80）点击左侧替换右侧文件。

原创 前端分片导出文件（多种文件格式）思路简单

前端分片导出文件（多种文件格式）

原创 element-plus el-table动态循环展示el-table-column得label+prop

后端返回字段 code: "|KDFL|test0815003|KDFLLD230815000003|" 当做 el-table-column 得 prop展示。后端返回字段 name: "|KDFL|order001|skin001|" 当做 el-table-column 得 label 展示。1.element-plus使用el-popover。2.table循环group数组展示。需求二：增加table问号提示。

原创 vue3+element-plus 实现问号提示功能

1.effect="dark" 不写为白色背景提示，添加后为黑色背景提示。2.placement="top-start" 设置提示出现得位置。3.:width="180" 设置提示得宽度。4.content="此处写提示语句" 填写要。

原创 大屏Echarts界面却换后改变浏览器视口宽度后再次返回Echarts界面，Echarts消失问题

原因也很简单，当时组件内做的监听是浏览器窗口大小发生变化时，可以触发 Echarts 自带的 resize 方法，但是当菜单收缩展开时，浏览器大小没有变化，自然也就触发不了 resize 方法。这是因为你之前你改变dom的时候，Echarts重画失败了，可是你切回来的时候，dom虽然相对于你切出去之前可能变了，但是对于监听器来说，他只关注于当前dom大小是否改变了。接着，就可以在onActivated()生命周期中单独给一个resize方法，不管他窗口大小是否变化了，都resize一次。

原创 *vue.js大屏Echarts自动滚动计时器滚动清除失败问题*

1.在Echarts函数里面使用clearInterval清除不生效,建议使用window.clearInterval，但是也不生效。timeroption.value) 得时候再次执行计时器，确保上次得计时器已经被清除。window.clearInterval(timeroption.value) 不生效。(加上window原因是因为window指向全局，不加就指向this)解决 ：直接给timeroption.value = null 赋值。2.使用了防抖效果，

原创 Vue2 diff 算法 和 Vue3 diff算法 区别

原创 js计时器每日零点调用，设置闹钟原理

前端大屏有个需求逻辑，每天的凌时刷新一次数据，，于是就想到了使用计时器，拿到明天零点的时间，获取当前的时间，两个时间戳相减获取的毫秒作为计时器的倒计时。2.记得离开界面后清除计时器window.clearInterval(slideShowTimer.value)在进入界面后立即调用函数，每次进入界面都会重新刷新倒计时的时间。1.写在onMounted调用函数SetInterval()，

原创 html倒计时

【代码】html倒计时。