请叫我cqq-CSDN博客

原创 WebSocket 原理

一、什么是 WebSocketWebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。WebSocket 本质上一种计算机网络应用层的协议，用来弥补 http 协议在持久通信能力上的不足。

2022-03-28 18:31:40 1627

原创 js中的隐式转换与强制转换

js中的隐式转换与强制转换JavaScript 是一种动态类型的语言，在执行运算操作的过程中，有时需要转换操作数的类型。在 JavaScript 中，数据类型的转换有：隐式类型转换和强制类型转换（也叫显式类型转换）两种方式。1. 隐式类型转换隐式类型转换会自动根据运算符进行类型转换。隐式类型转换的情况主要有以下几种。如果表达式中同时存在字符串类型和数字类型的操作数，而运算符使用加号+，此时 JavaScript 会自动将数字转换成字符串。例如： alert("姑娘今年" + 18); //

2021-11-27 10:58:07 2142

原创一篇搞懂BFC

BFC（Block Formatting Context）块级-格式-上下文，属于定位方案中的普通流。BFC 是 W3C CSS2.1 规范中的一个概念。引用W3C的官方解释：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context 提供了一个环境，HTML 在这个环境中按照一定的规则进行布局。

2022-11-14 19:39:15 590 1

原创 JavaScipt小技巧

前言JavaScript在越来越多的地方被使用，而且它还时不时的更新。既然更新了，就会有新的功能和新的方法来实现某些编程目标。其中一些功能可能需要使用polyfills或其他库（如Babel），以确保你的所有代码在最老的浏览器上也能如期工作。让我们来回顾一下几个有用的功能。展开运算符展开运算符太有用了，不提也罢。它允许对数组或字符串等迭代符进行扩展。这对于添加新的值是非常有用的。let arr = [1, 2, 3, 4, 5]let newArr = […arr, 6, 7]// ne

2022-03-25 17:37:08 156

原创 vue中动态绑定class和style

自己做个小笔记动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div> 动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div> 动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div> 动态sty

2021-12-21 09:52:37 260

原创 el-upload上传文件时，不触发onchange方法

el-upload上传文件时，只能上传一个文件，将limit设为1，结果出现第二次点击上传时不触发on-change方法，解决方法：在HTML中： <el-upload action="" ref="uploadFile" style="display: inline-block;" :show-file-list="false" :on-change="ChangeFile"

2021-11-19 16:34:03 7303 1

原创 js合并两个数组

平时我们合并两个数组、合并两个对象时，往往会这样写： const a = [1,2,3]; const b = [1,5,6]; const c = a.concat(b); // [1,2,3,1,5,6] const obj1 = { a:1, } const obj2 = { b:1, } const obj = Object.assign({}, obj1, obj2); // {a:1,b:1}但这样写有两个问题：数组的去重考虑了吗？不繁琐吗？改进

2021-11-11 15:44:26 603

原创判断值是不是为空

工作中，我们经常在处理输入框相关业务时，往往会判断输入框未输入值的场景。 if(value !== null && value !== undefined && value !== ''){ //... }上面这种写法非常的繁琐，ES6中新出的空值合并运算符，完美解决，代码还简单。 if((value??'') !== ''){ console.log("非空"); }else{ console.log("空"); } 或者： if(!

2021-11-11 15:39:27 889

原创 meta 标签

介绍HTML的基本结构： <html>根控制标记（头） <head> 头控制标记（头） <title>标题</title> 标题标记 </head> 头控制标记（尾） <body>网页显示区域（一般要实现的代码都在这里写）</body> </html>根控制标记（尾）（开头和结尾成对出现，双标签）head 标签head标签与html标签、body标签一样是一个文档必须的元.

2021-11-09 10:28:05 250

原创 JavaScript实用代码

一、日期处理检查日期是否有效该方法用于检测给出的日期是否有效：const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());isDateValid("December 17, 1995 03:24:00"); // true计算两个日期之间的间隔该方法用于计算两个日期之间的间隔时间：const dayDif = (date1, date2) => Math.ceil(Math.abs(

2021-11-04 10:49:51 720

原创 JavaScript 中的Falsy和Truthy

Falsyfalsy 值 (虚值) 是在 Boolean 上下文中认定为 false 的值。在 JavaScript 中只有 8 个 falsy 值。这意味着当 JavaScript 期望一个布尔值，并被给与下面值中的一个时，它总是会被当做 false。falsefalse 关键字0数值 zero-0数值负 zero0n当 BigInt 作为布尔值使用时, 遵从其作为数值的规则. 0n 是 falsy 值.“”, ‘’, ``这是一个空字符串 (字

2021-11-04 10:10:35 392

原创过滤树形结构中不符合条件的值

// 过滤数据 filterTree(tree, arr = []) { if (!tree.length) return []; // 循环数组，然后过滤数据 for (let index = 0; index < tree.length; index++) { // 如果该条数据isDisplay不为true时，跳出本次循环 if (!tree[index].isDisp..

2021-11-01 16:07:28 435

原创 js中数组和对象常用方法介绍

1.定时器的使用定时器：延时执行；JS：单线程执行 setTimeout("方法名或方法","延时") setTimeout(()=>{},1000)问题：定时器内执行内容会在延时时间过后执行方法，要想达到页面及时加载数据而不是定时器延时过后才进行第一遍数据的加载解决：定时器内执行代码块外置，定时器使用前先执行一遍注意：(1) 使用定时器时要注意及时对定时器的清除(2) 上述代码中，定时器使用先用that来指向this的原因是：因为定时器方法是定义在window下的，所以setT

2021-10-20 11:28:46 337

转载 vue自定义指令

vue自定义指令在vue中我们常会使用到一些指令，例如 v-model 实现数据的双向绑定，使用 v-if 进行判断，还有 v-for、v-bind等等，这些都是vue框架自带的指令，简单便捷，具体使用请访问 Vue指令的使用方法。通常情况下我们使用vue自带指令已经足够，但是在某些情况下自定义指令不能够满足我们的需求，我们就可以自定义指令，以 “使input输入框自动获取焦点” 为例，方法如下：1、局部自定义指令<template> <div class="content&gt

2021-10-14 17:25:40 172

原创去除参数对象中的空值

// 去除参数中的空值function delUndefined(ob) { for (let e in ob) { if (typeof(ob[e]) === 'undefined' || ob[e] === null||ob[e] === '') { delete ob[e]; } else if (ob[e].constructor === Object) { if (Object.keys(ob[e]).length

2021-10-09 11:21:38 354

原创 vue实用技巧

1. 将一个 prop 限制在一个类型的列表中使用 prop 定义中的validator选项，可以将一个 prop 类型限制在一组特定的值中。exportdefault{name:'Image',props:{src:{type:String,},style:{type:String,validator:s=>['square','rounded'].includes(s)...

2021-08-09 17:46:48 456

原创 vue ui报错 Couldn‘t parse bundle asset “C:\Users\cqq\Desktop\vuex\vuex_demo\dist\js\chunk-vendors.js“.

1、 vue ui 运行编译项目时报错： Couldn't parse bundle asset 文件路径\\dist\js\chunk-vendors.js". Analyzer will use module sizes from stats file.2、怎么解决网上查只有很少的相关文章，什么改版本之类的，具体情况具体分析，分享我遇到的情况。在我的C:\Users\用户文件夹下的.vuerc里设置："packageManager":"npm"{...

2021-07-17 21:24:25 4297 5

原创 Vue Router 技巧

1. 响应路由参数变化针对复用组件（只是路由参数发生改变），生命周期函数钩子不会被调用，如何能刷新组件了？ watch监听 watch:{'$route'(to,from){//对路由变化作出响应...}} beforeRouteUpdate beforeRouteUpdate(to,from,next){//reacttoroutechanges...//don'tforgettocallnext()}...

2021-06-18 16:43:50 99

原创 js深浅拷贝

前置知识-- js的一般数据类型的存储 String Number Boolean Null Undefined-- js的引用类型的数据存储 Object1. 赋值当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。 var obj = {} var person = { name:'张三'...

2021-05-12 22:54:16 57

原创 vscode 自动生成vue模板

新建一个vue页面，需要自己手动创建一个vue的页面，自己写起来十分不方面，如何快捷生成一个vue模板呢1.打开vscode，在文件--》首选项--》用户片段中找到vue.json2.将vue.json中的内容替换成下面的内容{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>", " ", " </div>", "</t

2021-04-02 09:43:44 523 1

原创 WebSocket的使用

<template> <div class="test"> </div></template><script> export default { name : 'test', data() { return { websock: null, } }, created() { this.initWebSocket(); }, de.

2021-03-22 14:50:46 97

原创 vue+element 表单上传进度条

公司项目中用到了若依的框架，但是我们表单提交的时候需要展示提交进度（因为有大文件上传）为了解决这个问题，找了好多的资料，终于找到了最简单的方法在确认提交的方法中// 获取文件上传的进度let config = { onUploadProgress: progressEvent => { let complete = parseInt(progressEvent.loaded / progressEvent.total * 100) this.fi

2021-03-17 15:17:10 1427

原创 vue+element 表单提交

工作中我们经常会遇到表单提交，element中默认的文件上传是及时上传，很不方便，所以我们需要让上传的文件与表单的内容一起提交在表单浮层中<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-upload ref="upload" :limit="1" accept="

2021-03-17 15:04:23 1168

原创前端性能优化

1. 减少 HTTP 请求一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP ：这是一个 HTTP 请求，请求的文件大小为 28.4KB。名词解释： Queueing: 在请求队列中的时间。 Stalled: 从TCP 连接建立完成，到真正可以传输数据之间的时间差，此时间包括代理协商时间。 Proxy negotia.

2021-03-16 14:20:22 379

原创 element日期选择器

1.禁用今天以前的日期不可选html：<el-date-picker v-model="startDate" style="float:left;width:300px;" type="date" format="MM-dd" :picker-options="expireTimeOption" @change="startDateChange" value-format="yyyyMMdd" placeholder="选择开始

2021-03-16 09:32:49 113

原创 vue刷新视图

1. 用 Object.assign对象改变：oldObj = Object.assign({},newObj)；原理：对象是引用类型，直接改变oldObj的某属性指向地址没变，vue不一定能监控到，所以当我们新建一个对象并赋值给oldObj字段的话，直接改变了它的指向地址。2. 用vue.set对象和数组都能用。this.$set(this,'oldObj',newObj);this.$set(this,'oldArray',newArray);例如要改变data中some:.

2021-03-15 17:15:09 1226 1

原创自己封装的toFixed()函数

自己经过实践发现，toFixed()函数在不同的浏览器上换算出来的结果会有差异，所以自己封装一个简单jsfunction toFixed(number, m) { if (typeof number !== 'number') { throw new Error("number不是数字"); } let result = Math.round(Math.pow(10, m) * number) / Math.pow(10, m); result = St

2021-03-12 12:00:29 242

原创＜%=BASE_URL%＞根目录

<%=BASE_URL%>根目录在使用若依框架的时候，自己封装了一个公共的后台接口的js，方便后续调用及打包后可以随意修改// 服务器配置window.$server_config = { VUE_APP_BASE_API: 'https://vue.ruoyi.vip/prod-api',}问题：在index.html中引入第一次进去是正常的，再次刷新会报错，如下所示：尝试了很多方法都不行，后来发现index.htm在引入图标的路径上添加了<%=BAS

2021-03-04 10:21:45 7506 2

原创 vue A对象赋值给B对象，修改B属性会影响到A问题

页面中有一个需要修改个人信息，但是vue里面的v-model是双向绑定，在我修改的时候，原始的引用该数据的地方也会随之更改，但其实这时候还未提交数据库，如果用户修改一半，点击取消，会存在页面修改过来，但是数据库没更新，刷新之后又恢复原来的值。思路：用一个中间对象过渡一下，所以命名一个新的对象，这个对象和原始的个人信息是一样的内容，只是名字不一样，但是我在赋值之后发现，修改中间对象的属性值，原始对象也会更改，原来是vue的对象赋值，this.A = this.B,没有进行深层赋值，只是把this.A的地址

2020-05-14 15:21:55 676

进行二次封装的若依框架

空空如也