小白菜duang-CSDN博客

原创 Vue2-文件上传、下载场景功能

在项目开发中，上传文件的应用场景非常的多，一般情况下，上传的接口都是由公司内部自己开发一套适用于任何场景都可以使用的接口，但是这意味着该接口所涉及到的工作量与技术点就非常的多，且不稳定。于是大公司选择了前者自己研发，小公司则选择了性价比更高的第三方云存储服务，国内知名的云技术服务商基本上是阿里云和腾讯云。

2023-05-11 21:42:36 1670

：：map 和 forEach 的区别：从以上两者规则可以看出，差距很大，所以需要进一步的转换：Excel 导出功能Excel 的导出功能通常是由后端来实现的，前端只负责将后端提供的接口下载文件即可。但插件也提供了 Excel 的导出功能，使得前端也能自行实现导出：：使用与实现：Excel 文件下载Excel 文件下载的操作其实与标签创建流一样的原理，不同点在于：请求体必须指定：。否则会出现成功下载了却打不开的情况。上传功能在项目开发中，上传文件的应用场景非常的多，一般情

2023-05-11 21:41:48 2876

原创小程序-封装 @vant/weapp上传图片及视频预览组件

：：：：使用：：i-uploader-video 视频上传及预览组件：：：：使用：：

2023-05-11 21:34:12 2107

原创小程序 scroll-view 实现滚动高亮左侧 tab 导航栏锚点定位

效果图：废话不多数，直接上代码：参考链接：https://blog.csdn.net/weixin_44936767/article/details/115710782

2023-04-19 10:50:52 727

原创 Fiddle 抓包小白一步带过超详细教程（含汉化）

Fiddle 是位于客户端与服务端之间的代理工具，也是目前主流的抓包工具之一。它通过在客户端（电脑、移动设备）建立请求代理工具，截取到它向服务器发送的所有请求并进行一定的处理。它可以分析请求数据、设置断点、调试web应用、修改请求的数据，甚至可以修改服务器返回的数据，功能非常强大，是web调试的利器。

2023-04-18 11:06:15 25359 6

原创虚拟键盘顶出底部页面问题解决

虚拟键盘顶出底部页面问题解决

2023-02-13 18:02:24 212

原创 Git 基础知识--打Tag、团队协作

Git 可以给历史中的某一个提交打上标签，以示重要。人们一般用功能来标记发布节点（v1.0…）。与分支很像，区别在于：Git 主要使用两种标签：轻量标签、附注标签。特点：轻量标签很像一个不会移动的分支，它只是一个特定提交的引用。语法：附注标签顾名思义，就是可以加上备注的标签。查看标签所有标签单个标签标签具体信息切换标签注：虽然说这会使你的仓库处于“分离头指针（detacthed HEAD）”状态。在“分离头指针”状态下，如果你做了某些更改然后提交它们，标签

2022-07-27 21:34:20 2424

原创 Git 基础知识--stash 存储、reset 回退及恢复

Git 提供了存储的功能，即当你在工作到一半突然需要切换到另一个分支上，但又不想提交时，可将当前做出的修改通过命令存储起来，之后再从其中重新读取之前的状态。若修改的文件没有执行即未被跟踪，则该文件不会被存储，会提示。作用：将未完成的修改保存到一个栈上，在任何时候都可以重新应用这些改动。作用：查看当前 Git 存储的栈空间。作用：重新应用某个分支的修改状态。作用：应用栈上存储的改动，并移除它。作用：移除 Git 栈上存储的的改动。Git 后悔药是指在 Git 工作系统中的

2022-07-14 16:36:08 6510

原创 Git 基础知识--分支操作

几乎所有的版本控制系统都支持分支。使用分支意味着你可以把你的工作从开发主线上分离出来，以免影响开发主线。在很多版本控制系统中，分支是一个略微低效的过程——常常需要完全创建一个源代码目录的副本。对于大型项目来说，这样的过程会耗费很长时间。（SVN就是如此，往往从 SVN 中切换一个分支要等许久）而 Git 的分支是极其轻量且高效的，是 Git 的一大必杀技，也正因为这一特性，使得 Git 从众多版本控制系统中脱颖而出。分支的本质：多个 commit 提交对象的集合，单个提交对象是一个快照。分支在某个时刻只会

2022-07-14 16:04:12 1554

原创 Git 基础知识--三大分区及相关上层应用

Git 的组成概念主要是由三个区域和三个对象来完成，这是 Git 的工作原理与组成机制。Git 是分布式的，具备有远程仓库与本地仓库两个概念，但 Git 本质上就是一个数据库，本质的作用就是存储代码。而在开发人员的**本地仓库 **系统中，根据数据管理流程可大致分为三个分区：其实就是肉眼可见，可直接编辑的一个项目文件夹，即==开发人员当前正在开发的项目工作空间==就是工作区。 Git 系统不会管工作区中任何文件内容的修改，而只是监控暂存区。暂存区是 Git 系统内部帮助开发人员管理项目中临时修改的

2022-07-14 15:58:21 843

原创 Git 基础知识 -- 环境配置、搭建Git服务器

Git 是一种分布式的项目版本控制管理工具，所采取的概念是 “去中心化” ，每个开发人员都有自己的本地代码仓库，同时为同一个远程仓库服务。有了 Git 就可以将某个文件回溯到之前的状态，甚至将整个项目都回退到过去某个时间点的状态。就算乱来一气将项目中的文件删删改改，也照样可以恢复到之前的样子，且额外增加的工作量微乎其微。通过 Git 可以比较本地代码文件的变化细节，查出最后是谁修改了哪个地方的代码，从而找到导致问题出现的原因，也可以查出是谁在哪个时间点报告了功能缺陷等等。Git 是 Linus To

2022-07-14 15:51:52 3341

原创 Git 基础知识 -- 版本控制概念

一个完整大型项目的构建与开发，都是需要一个团队合作完成的，每个人分工不同。同时，每个人负责的岗位也会被其他人替代，在项目开发人员更新迭代的同时，为了确保整个项目中以往开发人员遗留的代码所使用的第三方库，框架与刚上岗的开发人员所写的代码用到的第三方库、框架能够在整个团队中得到同步，避免新代码所使用的版本不同而导致整个项目存在代码版本不同的隐患差异，便出现了对整个项目的软件进行统一版本控制的设计思想。版本控制指的是在一个项目开发中，用于从项目构建到项目开发为止的整个项目维护过程中的一种标准维护作法。它是一种

2022-07-14 15:48:24 317

原创 require.context() -- 自动全局注册组件

Vue 项目中使用方法进行注册一个组件，采用注册一个插件。但是在很多情况下，两者是可以相互配合使用以达到一些提升效率的方案，例如全局自动注册组件，即建立一个插件，利用 Vue.use() 会自动执行传入插件的 install() 方法进行初始化构造的机制，在插件的 install() 方法中编写组件注册步骤，来实现此功能。方法要求注入的插件内部必须包含有方法，因为就是利用执行插件的方法来实现初始化加载的，即方法相当于插件的构造函数。通常是如下结构：：require.c

2022-07-14 15:36:21 405

原创 Vue 项目初始化 --- token 相关业务处理总结

在众多项目中，由于 Cookie 的限制，经常需要用到 token 来进行登录验证。为简化 token 操作，我们通常需要建立一个在里面封装对 token 本地化存储的统一处理逻辑。：Vuex 结合 localstorageVuex 的特点：localStorage 的特点：Vuex 和 localStorage 在保存数据方面各有长短，所以在真实项目开发中，我们可以将两者综合起来使用。：封装 axios由于在项目中会有很频繁的 Ajax 请求，为统一处理请求的发送及后续配置操作。将 axio

2022-07-14 15:34:59 772

原创 Vue + WebSocket 项目小型聊天室

聊天室的实现核心在于 WebSocket 协议。通过为双方建立全双工通信，使得用户端可以随时接收来自服务端的数据。WebSocket 如图：以数组的形式存储聊天数据，并在页面中使用进行遍历循环：实时滚动到底部每次发送信息之后，需要及时滚动到底部以展示发送的信息。使用 socket.io 库完成聊天功能WebSocket 提供了的 JavaScript 库，它简化并兼容了 WebSocket 协议的编码实现。建立服务器的连接收消息发消息...

2022-07-14 15:33:36 1061

原创 Vue 移动端屏幕适配

对于移动端项目的适配使用到两个插件：是一个手淘团队开发出的一个用来适配移动端的 js 插件。它会根据用户设备的屏幕宽度将标签的动态转为对应的 font-size 大小，而我们只需要根据标签上的 font-size 书写对应的布局 CSS 样式即可。原理：插件会将屏幕分成 10 份，即将屏幕宽度 px / 10 = rem 的基准值。GitHub 地址：https://github.com/amfe/lib-flexible在中引入：这样就不需要再大量的...

2022-07-14 15:30:52 650

原创移动端页面跳转记录滚动位置

在此之前，首先了解下事件和属性的使用：描述：当元素的滚动条滚动时触发的时间。onscroll 事件的定义与触发条件事件可以被任何元素绑定，包括、、。默认初始情况下，只有对象拥有事件的定义与触发条件。这是因为对象包含的页面默认是当页面高度过大时自动出现滚动条，即对象自带属性，同时它也具备固定的高度，所以可以触发事件。也就是说，只有定义了 overflow: auto|scroll; 内容超过出现滚动条、且给定了 height 的元素本身，才能定义与触发

2022-07-14 15:29:13 702 1

原创关于 Vue的一些问题小结

1、浏览器控制台报错 An error occurred in hook getInspectorState registered by plugin org.vuejs.vue2-internal如图：原因：这是因为 Vue devTools [6.0.0] 扩展程序它捕捉到了一些以前发生过的错误，俗称混淆了历史记录。解决办法：直接重启一次 Vue devTools 即可解决问题。issue: https://github.com/vuejs/devtools/issues/16962、

2022-05-04 04:12:47 2762

原创 JS 函数对象比匿名函数更消耗性能

在 ES6 中出现了匿名函数的语法糖 () => {} ，它的出现使得回调函数的用法上无论是看上去还是编写过程都更加简洁。而在性能消耗方面，使用命名函数 function 比使用匿名函数 ()=>{} 更加消耗性能，如下测试：<script> console.time('x'); for (let i = 0; i < 10; i++) { let fn = function() {} } console.timeEnd('x'); //x: 0.01293

2022-02-11 18:44:03 558

原创 JS 操作 style.xxx = ` xxx` 时赋值为空字符串

JS 操作 style.xxx = xxx 时赋值为空字符串原因：1、需要为元素设定 style 属性才能通过 JavaScript 获取到具体的 CSS 样式2、在设定 style.xxx 的样式值的时候，为属性值字符串最后添加了 ; 字符。例如： document.querySelector().style.tranform = `translateX(100px);`;这样是无效的，在 JS 操作 style.xx 赋值时，是不需要添加 ; 这个字符的 ! documen

2021-12-26 01:35:09 965

原创相邻图片之间有空白间隙的问题解决

相邻图片之间有空白间隙当在网页中两张相邻的图片渲染时，会有一定的空白间隙距离存在。、原因：这是因为< img>图片为 inline-block 行内块元素，这是 inline-block 行内块布局存在的弊端，会在 HTML 元素间中渲染出空白间隙。可以通过以下方式解决：1、将图片元素设定为 display:block;img { display:block;}适用于图片各自一行的情况。2、为图片所在的父元素设置 font-size:0; 的形式来解决。div.fa

2021-12-26 01:34:38 3118

原创 input 设置 width:100%；时实际宽高溢出父元素容器范围

input 设置 width:100%；时实际宽高溢出父元素容器范围当给容器下的 input 元素设置 width:100%; 宽度时，会发现 input 会直接溢出父元素容器范围之外。input { width:100%；}导致这个情况的原因是因为盒子模型的问题，盒子模型分为 W3C 和 IE 标准盒子。input 元素默认由 W3C 标准盒子来计算宽度。W3C 标准盒子：width = content width 。即设定的 width 为元素的真实宽度，不计入 border pad

2021-12-26 01:34:05 2496

原创 table 设置 td 标签宽高

table 设置 td 标签宽高在默认情况下，table 中的 td 不允许使用 css 来设定宽高，需要为 table 改变一些参数之后才可使用 CSS 来随心控制。<table border="1" cellspacing="0" cellpadding="0">...</table>.table { table-layout: fixed; border-collapse: collapse;}这样设置之后就可以为该 table 的 td 标签随心控制宽

2021-12-26 01:33:29 7339

原创 CSS 实现移动端滑动吸附效果

滑动吸附效果实现效果：可以看到上图中，综合排序一栏是随着页面滑动来控制它的吸附位置的，当滑动到猜你喜欢再继续往下，则吸附到顶部，回来的时候则放回原位置。实现思路：布局上：首先为吸附元素设定一个 position:relative; 的父元素，给定固定宽度，用来占据真实位置，以免当吸附元素离开时因为元素的离开导致页面高度抖动。给吸附元素设定 position:absolute; left:0;top:0; 绝对定位。<div class="shop-filter-list"> &l

2021-12-26 01:30:21 982

原创 addEventListener 绑定一次执行两次事件的问题解决

一次执行两次事件问题解决：将 addEventListener 的最后一个参数设置为 true。原因：true - 事件句柄在捕获阶段执行。在事件委托中，若设置为 true，则只有子元素会执行，事件不会冒泡上升给父元素再次执行false- false- 默认。事件句柄在冒泡阶段执行。在事件委托中，若设置为 false，则不仅子元素会执行一次，父元素也会执行一次。this.ul.addEventListener('click', this.selectItem, true)

2021-12-26 01:25:00 3734

原创为动态生成的 DOM 元素绑定事件--事件委托

前言：动态生成的 DOM 元素之所以无法绑定事件，是因为 JS 在初次加载时就已经把对应的DOM 元素事件监听工作做完了，在事件监听的容器中已经包含了对应的 DOM 元素对象，而由用户交互而动态生成的 DOM 元素由于无法引起页面重载，所以自然无法再加入到事件监听容器中。解决方案：可以通过事件委托的方式来实现为动态生成的元素绑定事件。事件委托原理：以父元素的名义定义事件，但事件内部却是通过 e.target 实时获取到用户点击的子元素，并对该子元素进行操作处理。重点在于事件中触发的 Event 事

2021-08-12 18:27:37 2016

空空如也

Vue2 使用 prerender-spa-plugin 报错 [prerender-spa-plugin] Unable to prerender all routes!

关于 position:sticky 元素滚动轮播如何实现

Echarts 生成多个legend icon的问题

JavaScript 如何保留小数位为0的Float类型而不被转换为整数？

跪求解决！ElementUI 中 el-cascader 懒加载重复渲染的问题

工作中遇到一个跨域下载pdf文件问题

一个动态组件实现方式的纠结问题。

请问为什么 JSON.parse(arr).push() 无法直接push，需要重新赋值，例如 arr = JSON.parse(arr); arr.push() 这样才能push 进新元素呢？

求解！！关于 ElementUI 中 this.$refs.editFoemRef.validate 中的一个问题