想退休的搬砖人-优快云博客

原创 File API 与 Blob API

Web 应用程序的一个主要的痛点是无法操作用户计算机上的文件。2000 年之前，处理文件的唯一方式是把 < input type = "file" > 放到一个表单里，仅此而已。File API 与 Blob API 是为了让 Web 开发者能以安全的方式访问客户端机器上的文件，从而更好地与这些文件交互而设计的。

2025-04-04 00:25:59 571

原创 vue3项目中使用sku组件

sku组件的作用是为了让用户能够选择商品的规格，从而提交购物车，在选择的过程中，组件的选状态要进行更新，组件还要提示用户当前的规格是否禁用，每次选择都要产出对应的sku数据。

2025-03-27 23:43:11 406

原创 vue使用树形结构展示文件和文件夹

【代码】vue使用树形结构展示文件和文件夹。

2025-01-02 23:09:00 967

原创 PC端移动端响应式布局flexible.js+rem

flexible.js地址：https://github.com/amfe/lib-flexible。移动端修改10份，PC端分为24份。flexible.js文件。

2024-12-31 12:53:58 204

原创 vue导入导出excel、设置单元格文字颜色、背景色、合并单元格（使用xlsx-js-style库）

【代码】vue导入导出excel、设置单元格文字颜色、背景色、合并单元格（使用xlsx-js-style库）

2024-12-29 22:39:20 759

原创 vscode快速格式化代码

3.在setting.json下的用户中添加以下语句。1.文件----->首选项----->设置。只需设置一次，以后都可以自动保存格式化代码。2.搜索emmet.include。vscode快速格式化代码。

2024-12-27 14:52:24 226

背景固定（附着）：background-attachment：scroll | fixed;背景平铺：background-repeat：repeat|no-repeat|repeat-x|repeat-y;如果只指定一个精确单位，第一个是x坐标，第二个默认垂直居中。如果指定两个精确单位，第一个是x坐标，第二个是y坐标。background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置。混合单位：第一个是x坐标，第二个是y坐标。背景位置：background-position：x y;

2024-12-27 14:44:15 256

原创 html5css3

nth-of-type对父元素里面指定子元素的盒子排列序号。区别：nth-child会对父元素里面的所有元素的盒子都排列序号。before和after创建的元素，属于行内元素。新创建的这个元素在文档树中是找不到的，所以叫伪元素。利用css创建新标签元素，不需要html标签，简化html结构。伪元素选择器和标签选择器一样，权重为1。验证的时候必须添加form表单域，点击提交按钮可以验证表单。谷歌浏览器把音频视频自动播放禁止了。语法：e::before{}谁做过渡给谁加，如果想要写多个属性，逗号隔开。

2024-12-27 13:57:52 1339

原创 JavaScript网络请求( XMLHttpRequest 对象,进度事件, 跨源资源共享)

回调是在页面接收到响应之后应该调用的函数，通常回调函数的名称是通过请求来动态指定的。自定义头部一定要区别于浏览器正常发送的头部，否则可能影响服务器正常响应。这种方式并不准确，毕竟不同用户的网络连接速度和带宽是不一样的。，则表示资源未修改过，是从浏览器缓存中直接拿取的。访问超出这些限制之外的资源会导致安全错误，除非使用了正式的跨域方案。如果发送了凭据请求而服务器返回的响应中没有这个头部，则浏览器不会把响应交给 JavaScript。虽然不同浏览器发送的确切头部字段可能各不相同，但这些通常都是会发送的。

2024-12-17 22:09:39 1212

原创 canvas(填充描边，绘制矩形、路径、文本、图像，变换，阴影，渐变等)

这里的缩放只影响绘制的图像，不影响上下文的变换矩阵。然后再把原来的值修改为这个平均值，实际上相当于过滤掉了颜色信息，只留下类似亮度的灰度信息。对绘制上下文应用变换，可以导致以不同的变换矩阵应用绘制操作，从而产生不同的结果。接收不同类型和不同数量参数的方法，会通过方法名的后缀体现这些信息。中的方法有同样的参数，只不过最后一个参数必须是定型数组。第二个参数表示缓冲区的起始偏移量，最后一个参数是要读取的顶点数量。而在绘制内圆之前，必须先把路径移动到内圆上的一点，以避免绘制出多余的线条。

2024-12-16 21:56:34 1324

原创前端水印功能（svg,canvas文字水印，canvas图片水印）

明水印内容生成：svg。

2024-12-16 16:15:06 287

原创 vue3项目问题

调接口产生临时token，发送请求时在请求头添加token（临时token）登录成功后端返回token,请求拦截器请求头添加token。

2024-12-06 16:19:02 379

原创 ESLint的简单使用（js,ts,vue）

统一团队编码规范（命名，格式等）统一语法减少git不必要的提交减少低级错误在编译时检查语法，而不是等js引擎运行时才检查针对这个规范的需求，编写一个rule，原理是通过ast节点处理来完成//规则的本质是一个对象，//eslint插件，必须长得像一个约定好的对象//插件的元信息meta: {noMiaomiVars: "不允许使用miaomi变量"},return {// 这是一个访问者模式，访问到某一个ast的节点，就进行处理},},node,data: {})

2024-11-18 16:39:40 3061

原创前端工程化webpack(入口，出口，插件，加载器，压缩css代码，解析别名)

模块化（js模块化，css模块化，其他资源的模块化）组件化（复用现有的UI结构，样式，行为）规范化（目录结构的划分，编码规范化，接口规范化，文档规范化，git分支管理）自动化（自动化构建，自动部署，自动化测试）前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具，技术，流程，经验等进行规范化、标准化。

2024-11-08 12:51:35 680

原创 axios请求中的data和params的区别

一、http：超文本传输协议，规定浏览器和服务器之间传输数据的格式域名：标记访问服务器在互联网中的方位资源路径：标记资源在服务器下的具体位置url查询参数：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数值2=值2axios查询参数语法：使用axios提供的params选项二、常用请求方式aixos请求配置url：请求的url网址method:请求的方法，get可以省略data:提交数据。

2024-11-04 19:08:00 1881

原创 vite项目弹窗，抽屉，上传图片，富文本框

4.响应拦截器，响应失败，给错误的默认提示，抛出错误return Promise.reject(error)。使用时通过ref属性获组件对象，使用open方法。el-row表示一行，一行占24份，el-col表示列，:span="12"表示占12份，:offset="3"代表左侧margin份数。open({})表单无需渲染，open({id,cate_name,...})表单需要渲染，open调用后，可以打开弹窗。表单校验，提交修改请求，通知user模块getuserInfo()，进行数据更新，提示。

2024-11-04 11:17:49 1231 1

原创 vue+element上传图片

对象的临时 URL 的方法。这种方法非常有用，尤其是在处理文件上传或生成动态内容时，比如图像预览。: 在用户选择文件后，可以使用这个 URL 显示图像预览。比如，当用户上传一张图片时，可以生成这个 URL 并将其设置为。2.:on-change文件上传成功时的钩子，(选择图片后，把图片格式转换为base64格式）对象生成一个可以在浏览器中使用的 URL。这个 URL 是临时的，仅在页面生命周期内有效。1.:auto-upload="false"取消自动上传，点击上传头像按钮上传。

2024-10-31 19:26:00 858

原创 vue项目中pinia和vuex的使用

【代码】pinia和vuex的使用。

2024-10-23 14:27:28 334

原创 vue全局API（app.component，app.config，app.directive，app.mount，app.unMount，app.use）

【代码】vue全局API（app.component，app.config，app.directive，app.mount，app.unMount，app.use）

2024-10-23 00:18:17 300

原创 vite.config.js配置路径别名@

以下是详细的步骤来配置路径别名。

2024-10-23 00:09:52 747

原创 js(深浅拷贝，节流防抖，this指向，改变this指向的方法)

相同点：都可以改变this的指向区别点：call和apply会调用函数，并且改变函数内部this的指向。call和apply传递的参数不同，call传递多个参数，apply以数组的形式传递多个参数bind不会调用函数，而是返回了一个this指向改变后的函数，需要调用这个函数。

2024-10-22 20:42:21 794

原创 js（作用域，垃圾回收机制，闭包，变量提升）

标记清除法：将不再使用的对象定义为无法达到的对象，就是从根部（全局对象）出发定时扫描内存中的对象，凡是能从根部达到的对象，都是还需要使用的，那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收。引用计数法：跟踪记录被引用的次数，如果被引用了一次，那么就记录次数1，多次引用会累计++，如果减少引用就-1，如果引用次数是0，则释放内存。先访问自己作用域有没有定义变量，有就访问，没有就去上一级作用域查找，找到了就使用，代码执行前，var声明的所有变量，提升到当前作用域的最前面，只提升声明，不提升赋值。

2024-10-21 20:09:24 1240

原创 js构造函数和原型对象，ES6中的class，四种继承方式

但是这样就会覆盖构造函数原型对象原来的内容，修改后原型对象constructor就不再指向当前构造函数了，我们需要在修改后的原型对象中，添加一个constructor指向原来的构造函数。在每个对象都会有一个__proto_指向构造函数的prototype原型对象，之所以我们可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto_原型存在。基于原型对象的继承使得不同的构造函数的原型对象关联在一起，并且这种关联的关系是一种链状结构，我们将原型对象的链状结构关系称为原型链。

2024-10-21 18:04:10 1501

原创对象的增删改查，数组api，字符串api，Date对象api，Math对象api

在js，对象是一组拥有无序的属性和方法的集合生活中，万事万物皆对象，对象中可以抽象处两个概念：特征(属性)和行为（方法）人：特征有姓名性别年龄身高体重... 行为:吃，敲代码，走路...属性名:属性值,属性名:属性值,属性名:属性值,属性名:属性值,方法名:function(){},方法名:function(){},方法名:function(){},方法名:function(){},}数组是一组有序的数据的集合。数组属于js内置的对象，身上也有属性和方法。

2024-10-18 10:30:33 850

原创 HarmonyOS开发（State模型）

FA（Feature Ability）模型：从API 7开始支持的模型，已经不再主推。Stage模型：从API 9开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。

2024-10-18 09:02:04 943

原创 HarmonyOS开发（状态管理，页面路由，动画）

属性来给组件添加动画，当前组件的width,height,opacity,backgroundColor,scale,rotate,translate属性时，可以实现渐变过渡效果。@State支持Object,class,string,number,boolean,enum类型以及这些类型的数组。1.父子类型一致string,number,boolean,enum，object,class,以及它们的数组。页面栈的最大容量上限为32 个页面，使用，router.clear()方法可以清空页面栈，释放内存。

2024-10-17 16:40:19 1108

原创 HarmonyOS开发（ArkUI简单使用）

Componentbuild(){//组件UI描述@Componentbuild(){//使用组件Com({title:'标题'})//UI描述@Componentbuild(){@Component//UI描述build(){

2024-10-16 21:03:55 1670

原创 TypeScript数据类型限定（基本数据类型,void,数组,元组,枚举,any,unknown,never,函数,自定义数据类型,联合类型和交叉类型）

object：表示非原始类型的对象。可以是任何类型的对象（不包括原始类型如numberstringboolean等）。接口（interface：用于定义对象的结构。类型别名（type：用于为类型定义一个新名称。//自定义类型//1、接口interface 接口名{键：类型}//自定义函数类型age?:number;//定义函数变量，并给函数赋值name:"张三",sex:"男",console.log("吃"+food);p01.name="张小三",p01.age=12;

2024-10-16 00:01:24 1212

原创 ES6基础知识

1. 是否支持同一个作用域变量同名 var支持，let不支持2. 是否支持预解析 var支持，let不支持3. 是否会挂载在window对象上 var会，let不会4. 是否存在暂时性死区(在定义这个变量之前的区域是这个变量的死区，不能在这个死区中进行操作变量 --- 输出，赋值，等) let有 var没有5. 是否存在块级作用域 let存在，var不存在常量：定义完毕之后不能再被更改。

2024-10-15 15:44:22 1250

原创移动端响应式布局（媒体查询+rem,vw+rem,flexible.js+rem）

案例3：假设我现在拿到的设计稿是640的，我应该在iPhone5下做，已知该设备的真实大小是320的。iPhone678/plus====真实宽度是414======设计稿是1242px====3倍。iPhoneX========真实宽度是375=========设计稿是1125px====3倍。iPhone5=======真实宽度是320=========设计稿是640px=====2倍。iPhone678======真实宽度是375=========设计稿是750px====2倍。

2024-10-14 23:59:57 773

原创 js的基础问题

可以在构造函数的prototype// 输出: Hello, my name is Alice。

2024-10-14 16:25:32 717

原创 css的简单问题

相同点：都可以让元素不可见区别：可以让元素完成在渲染树中消失，渲染时不占任何空间；不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见。修改元素的display通常会造成文档重排，修改isibility属性只会造成本元素的重绘。

2024-10-14 14:20:26 640

原创 html5的简单问题

语义化更好的内容元素；cookies是网站为了标示用户身份而存储在用户本地终端上的数据，cookies数据始终在同源的http请求中携带，在浏览器和服务器间来回传递。导致回流现象的操作：添加或删除可见dom元素，元素的位置发生变化，元素尺寸发生变化，内容发生变化，定位或浮动，浏览器窗口尺寸变化。在构建cssom树时，会阻塞渲染，直到cssom树构建完成。便于团队的开发和维护，在没有加载css的情况下也能呈现较好的内容与结构代码，易于阅读。属性允许你在元素上存储与其相关的信息，而不会影响页面的结构或样式。

2024-10-14 11:38:50 520

原创 tortoisegit简单用法

test_branch分支修改 test_branch文件，dev分支修改test_branch文件。devfen分支合并test_branch分支。自己的分支：test_branch。主分支：master。

2024-10-14 10:20:50 559

原创 git(版本回退，分支管理，vscode集成git)

git reset --soft HEAD^回退到上一次提交的暂存区，可以修改注释commit,配合暂存区添加修复代码只生成一条记录。git push origin master -u 把本地的主分支推到远程的主分支（第一次加-u）.git目录=本地库=版本库（代码提交到暂存区，暂存区提交到master分支）git reset --hard HEAD~2回退到上上次提交的版本。git reset --hard HEAD^回退到上一次提交的版本。git rm --cached 文件名取消添加到暂存区。

2024-10-12 11:25:01 2146

空空如也

空空如也