数据大屏复盘
数据大屏复盘亮点1:搭建 Vue3+Vite 前端架构和模块化目录结构,整合 ECharts 可视化库(按需注册图表类型与组件,封 装大屏自适应容器组件(支持 1920*1080 设计稿适配、全屏 / 等比缩放模式),保障显示一致性; 在这个大屏数据可视化项目中,核心需求是保证大屏在多设备上的显示一致性、数据可视化的高效实现和项目的可维护性,所以我基于 Vue3+Vite 搭建了前端架构,从目录设计、第三方库整合、核心组件封装三个层面落地,为整个项目奠定了稳定的技术基础。 二、分点拆解(结合项目细节,讲清实现逻辑)1. 搭建 Vue3+Vite 架构,设计模块化目录结构(解决:项目可维护性、开发效率问题) 首先是基础架构和目录设计,因为大屏项目涉及很多模块(比如设备总览、数据报表、设置弹窗),如果目录混乱,后期维护会很麻烦,而 Vite 相比 Webpack 有更快的热更新速度,更适合大屏开发时的实时调试。 我做了两个关键动作: 技术选型落地:直接采用 Vue3 的<script setup>语法糖(组合式 API)+ Vite...
HTTP1.0/1.1/2.0 的区别
HTTP1.0/1.1/2.0 的区别HTTP1.0HTTP 协议的第⼆个版本,第⼀个在通讯中指定版本号的HTTP协议版本 HTTP 1.0 浏览器与服务器只保持短暂的连接,每次请求都需要与服务器建⽴⼀个 TCP 连接 服务器完成请求处理后⽴即断开 TCP 连接,服务器不跟踪每个客⼾也不记录过去的请求 简单来讲,每次与服务器交互,都需要新开⼀个连接 HTTP1.1在 HTTP1.1 中,默认⽀持⻓连接( Connection: keep-alive ),即在⼀个TCP连接上可以传 送多个 HTTP 请求和响应,减少了建⽴和关闭连接的消耗和延迟 建⽴⼀次连接,多次请求均由这个连接完成 这样,在加载 html ⽂件的时候,⽂件中多个请求和响应就可以在⼀个连接中传输 同时, HTTP 1.1 还允许客⼾端不⽤等待上⼀次请求结果返回,就可以发出下⼀次请求,但服务器端 必须按照接收到客⼾端请求的先后顺序依次回送响应结果,以保证客⼾端能够区分出每次请求的响应 内容,这样也显著地减少了整个下载过程所需要的时间 同时, HTTP1.1 在 HTTP1.0...
HTTP 和 HTTPS
HTTP 和 HTTPSHTTPHTTP (HyperText Transfer Protocol),即超⽂本运输协议,是实现⽹络通信的⼀种规范 在计算机和⽹络世界有,存在不同的协议,如⼴播协议、寻址协议、路由协议等等…… ⽽ HTTP 是⼀个传输协议,即将数据由A传到B或将B传输到A,并且 A 与 B 之间能够存放很多第三 ⽅,如: A<=>X<=>Y<=>Z<=>B 传输的数据并不是计算机底层中的⼆进制包,⽽是完整的、有意义的数据,如HTML ⽂件, 图⽚⽂件, 查询结果等超⽂本,能够被上层应⽤识别 在实际应⽤中, HTTP 常被⽤于在 Web 浏览器和⽹站服务器之间传递信息,以明⽂⽅式发送内容, 不提供任何⽅式的数据加密特点如下: • ⽀持客⼾/服务器模式 • 简单快速:客⼾向服务器请求服务时,只需传送请求⽅法和路径。由于HTTP协议简单,使得HTTP 服务器的程序规模⼩,因⽽通信速度很快 •...
HTTP 常⻅的状态码是什么
HTTP 常⻅的状态码是什么是什么HTTP状态码(英语:HTTP Status Code),⽤以表⽰⽹⻚服务器超⽂本传输协议响应状态的3位数字 它由 RFC 2616规范定义的,并得到 RFC 2518 、 RFC 2817 、 RFC 2295 、 RFC 2774 与 RFC 4918 等规范扩展 简单来讲, http 状态码的作⽤是服务器告诉客⼾端当前请求响应的状态,通过状态码就能判断和分 析服务器的运⾏状态 7.2. 分类 状态码第⼀位数字决定了不同的响应状态,有如下: • 1 表⽰消息 • 2 表⽰成功 • 3 表⽰重定向 • 4 表⽰请求错误 • 5 表⽰服务器错误 7.2.1. 1xx 代表请求已被接受,需要继续处理。这类响应是临时响应,只包含状态⾏和某些可选的响应头信息, 并以空⾏结束 常⻅的有:• 100(客⼾端继续发送请求,这是临时响应):这个临时响应是⽤来通知客⼾端它的部分请求已经 被服务器接收,且仍未被拒绝。客⼾端应当继续发送请求的剩余部分,或者如果请求已经完成,忽 略这个响应。服务器必须在请求完成后向客⼾端发送⼀个最终响应 •...
GET 和 POST
GET 和 POST是什么GET 和 POST ,两者是 HTTP 协议中发送请求的⽅法 GET GET ⽅法请求⼀个指定资源的表⽰形式,使⽤GET的请求应该只被⽤于获取数据 POST POST ⽅法⽤于将实体提交到指定的资源,通常导致在服务器上的状态变化或副作⽤ 本质上都是 TCP 链接,并⽆差别 但是由于 HTTP 的规定和浏览器/服务器的限制,导致他们在应⽤过程中会体现出⼀些区别 区别• GET在浏览器回退时是⽆害的,⽽POST会再次提交请求。 • GET产⽣的URL地址可以被Bookmark,⽽POST不可以。 • GET请求会被浏览器主动cache,⽽POST不会,除⾮⼿动设置。 • GET请求只能进⾏url编码,⽽POST⽀持多种编码⽅式。 • GET请求参数会被完整保留在浏览器历史记录⾥,⽽POST中的参数不会被保留。 • GET请求在URL中传送的参数是有⻓度限制的,⽽POST没有。 • 对参数的数据类型,GET只接受ASCII字符,⽽POST没有限制。 •...
DNS协议
DNS协议是什么DNS(Domain Names System),域名系统,是互联⽹⼀项服务,是进⾏域名和与之相对应的 IP 地 址进⾏转换的服务器 简单来讲, DNS 相当于⼀个翻译官,负责将域名翻译成 ip 地址 • IP 地址:⼀⻓串能够唯⼀地标记⽹络上的计算机的数字 • 域名:是由⼀串⽤点分隔的名字组成的 Internet 上某⼀台计算机或计算机组的名称,⽤于在数据传 输时对计算机的定位标识 查询⽅式DNS 查询的⽅式有两种: • 递归查询:如果 A 请求 B,那么 B 作为请求的接收者⼀定要给 A 想要的答案 迭代查询:如果接收者 B 没有请求者 A 所需要的准确内容,接收者 B 将告诉请求者 A,如何去获得 这个内容,但是⾃⼰并不去发出请求 域名缓存在域名服务器解析的时候,使⽤缓存保存域名和 IP 地址的映射 计算机中 DNS 的记录也分成了两种缓存⽅式: • 浏览器缓存:浏览器在获取⽹站域名的实际 IP 地址后会对其进⾏缓存,减少⽹络请求的损耗 • 操作系统缓存:操作系统的缓存其实是⽤⼾⾃⼰配置的 hosts ⽂件 查询过程解析域名的过程如下: •...
理解UDP 和 TCP
理解UDP 和 TCPUDPUDP(User Datagram Protocol),⽤⼾数据包协议,是⼀个简单的⾯向数据报的通信协议,即对应 ⽤层交下来的报⽂,不合并,不拆分,只是在其上⾯加上⾸部后就交给了下⾯的⽹络层 也就是说⽆论应⽤层交给 UDP 多⻓的报⽂,它统统发送,⼀次发送⼀个报⽂ ⽽对接收⽅,接到后直接去除⾸部,交给上⾯的应⽤层就完成任务 UDP 报头包括4个字段,每个字段占⽤2个字节(即16个⼆进制位),标题短,开销⼩ 特点如下: • UDP 不提供复杂的控制机制,利⽤ IP 提供⾯向⽆连接的通信服务 • 传输途中出现丢包,UDP 也不负责重发 • 当包的到达顺序出现乱序时,UDP没有纠正的功能。 • 并且它是将应⽤程序发来的数据在收到的那⼀刻,⽴即按照原样发送到⽹络上的⼀种机制。即使是 出现⽹络拥堵的情况,UDP 也⽆法进⾏流量控制等避免⽹络拥塞⾏为 TCPTCP(Transmission Control...
TCP三次握⼿和四次挥⼿
TCP三次握⼿和四次挥⼿三次握⼿三次握⼿(Three-way Handshake)其实就是指建⽴⼀个TCP连接时,需要客⼾端和服务器总共发送3 个包 主要作⽤就是为了确认双⽅的接收能⼒和发送能⼒是否正常、指定⾃⼰的初始化序列号为后⾯的可靠 性传送做准备 过程如下: • 第⼀次握⼿:客⼾端给服务端发⼀个 SYN 报⽂,并指明客⼾端的初始化序列号 ISN(c),此时客⼾端 处于 SYN_SENT 状态 • 第⼆次握⼿:服务器收到客⼾端的 SYN 报⽂之后,会以⾃⼰的 SYN 报⽂作为应答,为了确认客⼾ 端的 SYN,将客⼾端的 ISN+1作为ACK的值,此时服务器处于 SYN_RCVD 的状态 • 第三次握⼿:客⼾端收到 SYN 报⽂之后,会发送⼀个 ACK 报⽂,值为服务器的ISN+1。此时客⼾端 处于 ESTABLISHED 状态。服务器收到 ACK 报⽂之后,也处于 ESTABLISHED 状态,此时,双⽅已 建⽴起了连接 上述每⼀次握⼿的作⽤如下: •...
osi七层模型
osi七层模型 1.2.1. 应⽤层 应⽤层位于 OSI 参考模型的第七层,其作⽤是通过应⽤程序间的交互来完成特定的⽹络应⽤ 该层协议定义了应⽤进程之间的交互规则,通过不同的应⽤层协议为不同的⽹络应⽤提供服务。例如 域名系统 DNS ,⽀持万维⽹应⽤的 HTTP 协议,电⼦邮件系统采⽤的 SMTP 协议等 在应⽤层交互的数据单元我们称之为报⽂ 1.2.2. 表⽰层 表⽰层的作⽤是使通信的应⽤程序能够解释交换数据的含义,其位于 OSI 参考模型的第六层,向上为 应⽤层提供服务,向下接收来⾃会话层的服务 该层提供的服务主要包括数据压缩,数据加密以及数据描述,使应⽤程序不必担⼼在各台计算机中表 ⽰和存储的内部格式差异 1.2.3. 会话层 会话层就是负责建⽴、管理和终⽌表⽰层实体之间的通信会话 该层提供了数据交换的定界和同步功能,包括了建⽴检查点和恢复⽅案的⽅法 1.2.4....
电商购物平台复盘
电商购物平台复盘亮点1:商品模块:采用 “虚拟列表 + 分页加载” 方案,承载 10000 + 商品数据无卡顿;封装图片懒加载自 定义指令,有效减少页面初始加载的资源请求量,降低首屏渲染时间,优化大型页面的加载性能。 “虚拟列表 + 分页加载” 方案的实际应用 业务背景:生鲜商品品类繁多(水果、蔬菜、肉类等合计超 10000 种),传统列表渲染会一次性创建所有 DOM 元素,导致页面卡顿、滚动掉帧。 技术实现: 虚拟列表:使用vue-virtual-scroller库,只渲染可视区域内的商品卡片(约 10-15 个),滚动时动态计算可视范围并复用 DOM 元素。 123456789101112<template> <RecycleScroller class="goods-list" :items="visibleGoods" :item-size="200" // 每个商品卡片的固定高度 ...



