- 博客(26)
- 收藏
- 关注
原创 前端如何做异常监控
这个是我在面试的时候被问到的一个问题,,但是当时我确实不知道如何回答,因为我以往的项目中前端没有做过,所以我查看了很多资料总结了几种方法。这个问题我们可以通过事件来获取dom元素的加载情况${${对于加载慢的问题,我们可以事件,用对象来获取页面加载的性能数据,然后根据页面信息找到对应的页面定位问题${${${${
2024-08-13 13:42:29 271
原创 网络-TCP三次握手,四次挥手
4、客户端接收到服务端数据进入超时等待2MSL,等待后客户端关闭连接,向服务端发送seq序列号,这个序列号是第一次的序列号+1,ack是服务端的seq序列号+1,验证是否相等,打上ACK,服务端断开连接。3、客户端收到服务端的响应,会发送一个ACK确定号,同时会再生成一个seq,这个seq是之前的客户端seq+1,再生成一个ack = 服务端seq+1,这俩相等说明正常。1、客户端先发送一个SYN报文,想要和服务端进行连接,同时会携带一个随机生成的序列号 seq。1、seq:序列号 随机生成的。
2024-03-29 16:41:40 313
原创 网络-七层网络
是在发送方和接收方之间进行通信时创建、维持、之后终止或者断开连接的地方。1、安全 在你的数据发生之前进行加密,然后在接受者的表示层进行解密。主要就是定义端口号,以及控流和校验,并且TCP 和 UDP就是在这层。这层控制数据链路层和传输层之间的信息转发,家里、维持和终止网络的连接。UDP具有较好的实时性,效率比TCP协议高,但是不是可靠的。物理层的设备: 网卡,网线,集线器,中继器,调制解调器。是我们最常用的,比如发送的http请求,dns解析等。TCP是面向连接的协议,是可靠的,因为有。
2024-03-29 15:40:05 237
原创 vue项目中下载表格模板的方法
最近有一个需求,需要下载一个模板表格,这个表格不同之前的只有表头和内容,这个表格在最前面加了很多注意事项,而且是多行合并的。[在这里插入图片描述](https://img-blog.csdnimg.cn/direct/8e52af54ab984bd18f815b772adf1bdc.png#pic_center。这个方法可以下载成功,但是会将注意事项分行展示,和需求不一样。
2024-01-12 11:11:38 688
原创 上传表格获取表格内容解析成数组
需求就是前端点击上传一张表格,需要将表格里面的内容获取生成对应的数组传给后端。这里就是用elementUI的el-upload组件进行上传交互。解析表格,需要用到XLSX依赖,所以先下载xlsx。得到的结果就是表头为key,内容为value的数组。里面还有其他方法,例如可以转成txt类型,使用。然后根据这个数组,遍历获取想要的数组形式。方法,转成html类型只需要使用。方法就是上传文件之后的操作。
2024-01-10 11:40:31 415
原创 前端面试题
webpack和vite都是很好的打包工具,在开发中,webpack每次都是全部文件打包,编译运行时间会比较久,而且配置麻烦,webpack的热更新是僵所有文件打包编译,速度很慢还可以出现更新延迟,而vite是一个开箱即用的,内置很多插件,并且构建极速,热更新是只更新变化的文件,可以很快的查看效果。但是webpack的插件生态比较丰富,vite相对来说很少,大项目推荐使用webpack,中小型项目比较适合vite。,所以要获取ref的值需要。
2023-12-08 15:40:03 392
原创 Uniapp学习笔记
uniapp 是 DCloud 公司于 2015 年开发的一款基于 vue 的跨端框架,编写一套代码就可以运行到 web、小程序(各种小程序)和 app(Android 和 iOS)端,使得开发一个项目的成本很小,效率很高,方便快捷。uniapp官网。
2023-10-11 18:16:44 234 1
原创 原型和原型链
每个函数都是一个对象,函数有一个prototype属性和__proto__属性。对象只有__proto__属性,对象与对象之间不是独立存在的。这个propotype就是我们所说的。new关键词做了什么?
2023-08-24 15:08:51 86 1
原创 JavaScript的类型转换
JavaScript的类型转换分为两种,显式转换(强制转换)和隐式转换(弱转换)显式转换强制类型转换主要针对功能的需要或为了使代码变得清晰易读,人为地进行类型的转换。在 JavaScript 中,强制类型转换主要是通过调用全局函数 Number()、parseInt() 和 parseFloat() 来实现。Number()将可以转换的参数转换为十进制数字,不能转换的转为NANconsole.log(Number(' ')) // 0console.log(Number('010')) //10
2022-05-18 18:15:22 701
原创 简单封装一个缩略图
如图所示,封装一个简单是缩略图<template> <div class="charts" style=" width: 100%" ref="charts" :style="{height}" /></template><script>import echarts from 'echarts'import { COLOR_LOOP } from '@/utils/colorUtils' //封装好的颜色文.
2022-05-13 11:51:05 104
原创 将echarts图表数据导出成表格
这次开发,产品让实现echarts图表上加个导出按钮,需要导出成excel表格。如图所示:开始一点思路都没有,百度了之后找到一个我个人觉得很不错的方法。上代码:首先肯定是写按钮,给按钮加点击导出事件<a-button size="small" @click="tableToExcel">导出表格</a-button>methods:{tableToExcel() { // 用,隔开,一个逗号就是一个单元格 let str = '时间,商品名称,商品ID,
2022-02-22 14:56:00 6137 2
原创 vue实现点击按钮复制input里面的内容
vue实现点击按钮复制input里面的内容HTML<a-input type="text" value="这是内容" class=“input”></a-input><a-button size="small" @click="copyText">复制</a-button>样式大概是这样要实现点击复制按钮把input输入框中的内容复制到剪切板上开始我想用的是input的select()功能实现copyText(){ var inp
2021-11-03 14:32:32 1710
原创 vue中实现无缝衔接的轮播效果
今天写项目的时候有一个要求,完成一个类似表格的轮播效果。安装npm install vue-seamless-scroll --save 引入(在需要用到的组件引入即可)import vueSeamlessScroll from 'vue-seamless-scroll'export default { components: { vueSeamlessScroll, }使用(html)//:data里面传的是动态数组数据 <vue-seaml
2021-10-29 17:10:31 722 1
原创 Promise ,Promise.all 和Promise.race的区别
Promise ,Promise.all 和Promise.race的区别Promisepromise是用来解决异步编程问题的,比传统的回调函数和事件处理方法要更加的合理。promise有三个状态:等待状态(Pending)、执行状态(Fulfilled)和拒绝状态(Rejected),状态的改变只能是单向的,且变化后不可在改变。一个promise必须提供then方法,以便知道当前值,终值和原因。promise.then(onFulfilled, onRejected)回调函数只能执行一次,且返回
2021-06-08 11:28:38 854
原创 求数组中元素出现的次数
求数组中每个元素出现的次数定义一个函数,求数组中元素出现的次数,使用的reduce方法//定义一个函数function countSum(data) { //定义一个obj的新对象 var obj = {}; //当满足function函数时进行reduce累加 return data.reduce(function(count, item) { if (item in count) { count[item]++; }
2021-06-08 10:28:45 2445
原创 css制作的心跳
纯css 制作动画心跳<style> .back { position: fixed; padding: 0; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: white; animation-name: backdiv; animation-duration: 1s; animation-iteration-cou
2021-04-15 17:15:29 203
原创 解构赋值学习
解构赋值最近在学习react,其中解构赋值是很重要的一个知识点,然后想着写一篇笔记。数组解构顺序解构剩余参数解构对象解构键名解构别名解构层级解构剩余属性解构定义解构赋值(Destructuring Assignment)是 ES6 中新提出的一种表达式,通过解构赋值,可以将属性或值从对象/数组中取出,直接赋予变量。数组解构顺序结构按照数组顺序一 一结构,如下例:const array = [1, 2, 3, 4];const [a, b] = array;
2021-04-13 11:04:11 132
原创 多行注释
多行注释文字一行显示,超出部分用省略号 white-space:nowrap overflow:hidden text-overflow:ellipsis2.多行注释 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;//设置显示几行 -webkit-box-orient: vertical;...
2020-12-24 15:32:31 118
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人