qq_43223007的博客

原创 vue 实现自定义主题切换+日夜切换

自定义主题切换、日夜切换、一键换肤（无需加载多套css）案例+思路+代码

原创 JavaScript中常用的的字符串方法总结+详解

1. javaScript常用字符串方法顺序方法名功能1charAt(x)返回字符串中x字符的位置,下标从0开始2charCodeAt(x)返回字符串中x位置处字符的unicode值3concat()用于连接两个或多个字符串，此方法不改变现有的字符串，返回拼接后的新的字符串4fromCharcode()将一组Unicode码转换为字符5indexOf(substr, [start])搜索指定字符，（搜索到返回该字符，否则返回 -1）Star

原创 JavaScript中的数组方法总结+详解

在JS中,数组方法是非常重要且常用的的方法.在此整理总结一番.JavaScript 数组的力量隐藏在数组方法中。1. js常用数组方法方法名功能返回值是否改变原数组版本push()在数组最后一位添加一或多个元素返回长度YES5-unshift()在数组前添加一或多个元素返回长度YES5-2.方法详解1.push.........

原创 H5页面使用微信授权登录开发记录

（为了ip和localhost都能访问，如果项目启动后本就可以ip+localhost访问就不用配置）回到我们的项目地址，但是本地调试时是无法被外网访问的，会报错。是微信授权后要回到的页面，就是你需要通过ngrok代理的地址。本地调试可以直接使用微信提供的测试账号。将我们的本地服务变为微信可访问的服务。返回本地页面，并且url中带入。1、devserve中配置。5、进入项目后跳转微信授权。2、启动项目,我的地址是。3、ngrok内网穿透。3、微信授权成功通过。

原创 webpack配置自动压缩图片

我的项目是webpack@5.x，node@14.19.1，npm安装。图片压缩是很重要的前端优化，一般可以选择手动压缩。需要配置file-loader。解决方法：切换node版本。Webpack5 已经将。里了，所以只需要配置。使用前 0.99 MB。使用后 205 KB。

原创 数组方法使用扩展

1 : 0));如果则return 1, a放后面如果则return -1，b放后面如果a.type和b.type都不等other，则不改变顺序因此实现将数组中 type===‘other’ 的项放入数组的最后。

原创 理解vue的响应式原理、双向绑定原理、虚拟dom

Vue的响应式原理、双向绑定、虚拟DOM之间是一种协同工作的关系，它们共同构成了Vue框架的核心特性，用于实现数据驱动的视图更新

原创 使用记录-MongoDB

方法通常用于执行一系列的数据处理阶段，每个阶段都可以执行不同的操作，例如筛选、排序、分组、投影等。这些阶段被组织成一个管道，数据在管道中流过，每个阶段对数据进行一些处理，然后将处理后的数据传递给下一个阶段。是 MongoDB 的聚合框架，用于处理数据的转换和组合操作。聚合框架提供了一组强大的工具，使得可以在数据库层面进行多步骤的数据处理，而无需将数据拉到客户端进行处理。这些阶段可以根据具体的需求进行组合，构建一个复杂的数据处理管道。根据具体的查询需求，可以组合和使用这些操作符来实现灵活的查询。

原创 git相关

3、本地代码已覆盖，强制推送本地分支到远程即可。2、设置本地分支代码的远程为master分支。例：使用master分支覆盖dev分支。1、切换到dev分支。

原创 mongodb安装备份

MongoDB导入导出和备份的命令工具从4.4版本开始不再自动跟随数据库一起安装，而是需要自己手动安装。下载zip格式，解压后把bin目录下的文件全部复制粘贴到你MongoDB安装目录下的bin下，就解决了。cmd 切换到 mongodb 的 bin 目录下。cmd切换到mongodb的bin目录下。

原创 微信小程序文本横向无缝滚动

但是我的需求中是一个上下无限滚动的列表，如果设置定时器性能耗费太大，因此只用css实现）要处理这个问题：在文本后面添加一个占位文本、当右边本为空白时 显示占位文本，当一轮动画结束时，第一个文本再覆盖占位文本，视觉上就是无限的。，要让一轮动画结束完全覆盖占位文本 也很简单，设置一个向左padding值，微信小程序中列表宽度不够长，其中某字段显示不完整，因此要使其自动滚动。的，文本将在右边出现大量空白，在移动到末尾，再突然出现 ，很难看。统一设置速率（文案长短不一 用同样的动画时长会出现滚动速率不同），

原创 VUE开发记录

当直接给一个对象添加一个新的属性时，Vue无法检测到这个改变，因为Vue在实例化时会对数据进行一次“初始化”，之后只能检测已经初始化的属性的变化。它接受三个参数：对象本身，要添加的属性名，以及属性的值。当使用 this.$refs.employeeInfo.validateField(res.type) 时，Vue 将会追踪这个新的属性，并且在更新时会触发视图的重新渲染。因为直接对对象进行属性赋值时，Vue 并不知道这个变化，所以它也无法触发 Element UI 组件的校验。

原创 react开发记录

工作是用vue，私人项目用react开发，以学习记录。

原创 微信小程序开发记录

1、终端npm安装插件前需要使用 npm init生成包管理文件。微信小程序开发记录，做个笔记后面不踩坑。

原创 stable diffusion webui 使用

参考各文章以及个人操作后的记录文章，也希望能帮助有需要的人~首先进去大概是这样的，介绍下下图几个区域（主要是文生图）。

原创 stable diffusion webUi 汉化

stable diffusion webUi 拥有丰富的插件，这里说一下新手本地刚部署后如何汉化。4、点击install（如果安装失败报错超时之类的多试几次或者科学上网）9、点击应用和重启，apply and restart UI。2、选择 install from URL。1、选择 extensions。3、输入插件github 地址。5、下载完成后重启下webUi。6、点击Extensions。7、点击installed。

原创 Stable Diffusion-webUI ckpt模型、lora模型的区别和使用

是一种体积较小的绘画模型，是对大模型的微调。与每次作画只能选择一个大模型不同，lora模型可以在已选择大模型的基础上添加一个甚至多个。经过训练的图片合集，被称作模型，也就是chekpoint，体积较大，一般真人版的单个模型的大小在7GB左右，动漫版的在2-5个G之间。该方法比上一种方法要复杂，但好在可更自由控制Lora模型特点相比ckpt模型特点生成图片的权重。5、webUI会多出下图的操作栏（我使用的第一种，所以下面是网上找的图不清晰）选择好ckpt模型后点击1处再点击2处（若未显示模型则点击刷新）

原创 本地部署Stable Diffusion Webui AI 记录

直到系统提示运行成功，不要关闭窗口，复制地址网站打开就好了1、这一步 我折腾了很久，要下载很多依赖，网络有一点波动就会失败，需要有耐心，多次执行，一个个下载 ，总会下完的。2、除非报错，否则不要关闭窗口3、如果报错连接错误或者超时 打开/关闭 魔法上网，反复尝试。

原创 object-fit 属性详解

object-fit 属性详解

原创 pubsub消息订阅

pubsub消息发布订阅

原创 前端.gif图片二次加载停留在最后一帧

前端.gif图片二次加载停留在最后一帧

原创 移动端100vh解决方法

开发移动端时用vh开发保证页面一屏显示，开发时以及用安卓手机测试没有问题，但是在safari浏览器却出现滚动条

原创 实现分页列表跨页全选

前言新需求是要支持跨页全选，因为习惯了element的当页全选以及惯性思维，第一步是想到了前端分页，但是这种方法显然是不可取的，因此花了点时间写了个demo分享因为是个demo，所以就一直按照思路往下写，变量命名没有花心思，if判断也有可优化的地方，后续有空优化后会更新一下代码如果直接复制完整代码可能会报错，因为项目用了AVUE，删掉这个标签或者安装一个avue就可以，没什么影响一、思路以及注意点思路：跨页全选状态下显然不能可传入所有ID（后端分页只拿当前页ID也不可能知道所有ID），所以：

原创 日期处理（moment.js）使用笔记

之前不知道有这么个好用的日期处理库，在新项目中见到了，做一做使用笔记也是分享一下

原创 echarts tooltip特殊处理（加百分号）

tooltip: { trigger: this.liveModel.liveState == 9401 ? 'axis' : 'none', //根据田间判断是否显示 formatter: (params) => { var html = params[0].name + "<br>"; .

原创 ＜keep-alive＞导致页面不刷新问题解决

导致页面不刷新问题解决场景： A页面跳转B页面 ， B页面中有默认显示的子组件问题：因为keep-alive缓存问题 A进入B B不会自动刷新解决方法：给router-view 加入key = > 实现A进入B刷新，但此时B的子组件不会刷新<router-view :key="$route.name + ($route.params.id || '')"></router-view>给B的子组件加入key<liveRePlay :liveMod

原创 vue脚手架报错，vue -V报错解决

用vue脚手架搭建项目报错，然后查看版本也报错，卸载脚手架以及重装都无效，最后在网上找到解决方案报错如下解决方法：1.cmd 输入 （注意 Administrator 是自己电脑用户名）del /s /q C:\Users\Administrator\AppData\Roaming\npm\vue*2.重装 npm install -g @vue/cli查看版本：成功...

原创 微信语音聊天框样式+功能

这里写自定义目录标题仿微信语音聊天播放效果（左右朝向的动态小喇叭）仿微信语音聊天播放效果（左右朝向的动态小喇叭）效果图：纯HTML+CSS代码<!DOCTYPE html><meta charset="utf-8"><html><head> <title>微信语音样式</title> <style type="text/css"> *{ margin:

原创 node-sass，command failed 踩坑记录

记录一个踩过的坑 node-sass ，command failed 报错如图，困扰了我半天，找个各种解决方法，降node版本，修改.npmrc文件，修改.yarnrc文件，淘宝镜像源地址下载等等 都试过了还是无效。最后终于解决，记录下来希望能帮到别人，也希望有大佬能给我解惑。我成功时的所有操作（可能有多余的，但我没有再测试简化了…耽误好长时间了）我当前的node版本：14.16.1删除.npmrc文件和.yarnrc文件（为了重新配置）用admin权限打开cmd（不是vscode的终端）

原创 echats词云图

echarts拓展词云图使用方法附图：安装 npm install vue-wordcloud --save //安装词云插件案例:<template> <div class="hello"> <wordcloud style="width:300px;height:300px" :data="defaultWords" nameKey="name" valueKey="value" :c

原创 Echarts双Y轴图表处理

前言近期开发遇到双Y轴的折线图需求，遇到了一些问题，在这里记录分享（附完整option代码，基于vue-echarts）1.双Y轴自定义Y轴显示样式(加 ‘%’和正常显示)2.双Y轴鼠标划入自定义样式附图：一、echatrs双Y轴案例1.双Y轴自定义Y轴显示样式(加 ‘%’或正常显示)代码如下（示例）：axisLabel: { show: true, interval: 'auto',//居中显示 formatter: (value) => { if (this.

原创 echarts 自定义 tooltip

需求：鼠标划入图表，显示自定义的数据依据：data自定义数据+formatter根据echarts数据填充方式分两种情况1.直接将data赋值(饼图，地图)方法：在初始化data的时候塞入需要自定义显示的数据，然后根据 formatter自定义显示，formatter中的data就是我们定义的数据2.没有将data的数据直接赋值，类似（柱状图）此时需要我们根据formatter时遍历每一个子数据自带的属性，根据其中的属性标识判断，然后塞入相对应的自定义数据...

原创 react中ref的三种使用方法

react中ref的三种使用方法一：字符串类型refs（最简单但官方不推荐使用）二：使用回调函数refs三：使用React.createRef()一：字符串类型refs（最简单但官方不推荐使用）直接给文本节点绑定ref=“_name”，然后使用this.refs._name.xxx 获取此时所有的ref都绑定在实例对象的refs属性中 <input ref="inp1" placeholder="请输入内容"></input>{/* ref的字符串方法 */}<bu

原创 npm 淘宝镜像的安装

npm 淘宝镜像的安装方法一：使用阿里定制的cnpm命令行工具代替默认的npm，输入以下代码 npm install -g cnpm --registry=https://registry.npm.taobao.org检查是否安装成功： $ cnpm -v安装成功之后，以后安装依赖包的方式和npm的是一样的，只是npm的命令换成是cnpm就可以了。方法二：a:单次使用： npm install --registry=https://registry.npm.taobao.orgb:

原创 git常用命令速查表

原创 ES6的class语法

ES6的class是什么?基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。ES5的传统面向对象写法// ES5的传统写法 function Cat(name, color) { this.name = name; this.color = color; } // 静态属性和方法 => 构造函数自己用 Cat.msg

原创 JS异常处理语句(try...catch...finally)常用方法

try/catch/finallytry/catch/finally 语句用于处理代码中可能出现的错误信息。try语句允许我们定义在执行时进行错误测试的代码块catch 语句允许我们定义当try代码块发生错误时,所执行的代码块finally语句在try和catch之后无论有无异常都会执行注意 : catch 和 finally 语句都是可选的,但你在使用tyr语句时必须至少使用一个提示:当错误发生时 , JavaScript会停止执行,并生成一个错误信息,使用throw语句来创建自定义消息(

原创 JS:Math函数的常用方法

Math函数方法有很多,用 console.dir(Math) 可以在浏览器控制台中查看所有的Math方法.这里主要整理一下常用的Math函数方法1、 Math.ceil() and Math.floor() 向上取整和向下取整。 (ceil有天花板的意思,向上;floor是地板的意思,向下) console.log(Math.ceil(8.11));//9 console.log(Math.floor(8.11));//82、 Math.round() 四舍五入。 （注意：

原创 JS:关系运算符的隐式转化

JS:关系运算符的隐式转化 关系运算符的隐式转化 关系运算符 : > 、 >= 、 < 、<= 、 == 、 === 、!= 、 !== 1. 字符串,布尔值 和数字进行比较时,会先隐式的转化为数字类型,之后再比较 console.log("5" > 3); // true console.log(true == ...

原创 搞懂JS的强制类型转换

整理了一些常用的强制类型转换方法: Number(); //将其他类型强制转化为 number类型 String(); //将其他类型强制转化为 string类型 (+"") Boolean(); //将其他类型强制转化为 boolean类型(true|false) ParseInt(); //将其他类型转化为整型(整数) ParseFloat(); //将其他类型转化为浮点型(小数)举例1.Number()var result