vuex维护websocket并且进行心跳检测，断开进行重连等业务需求效果图（123张图分别为初始化连接，模拟网络断开进行重连，模拟网络恢复重新建立连接）需要连接点（维护点）一、登录调用方法vuex里index进行注册utils.js代码块，主要代码（备注会一行一行写清楚，请耐心查看）app.vue中再次调用getUserInfo方法，避免浏览器强制刷新导致断开连接页面使用（附效果图）难点在于连接成功后onopen、onmessage方法心跳检测，以及onclose、onerror断开连接后进行重连。这块还添加了自己本身的另一个短连接口业务，所以会难梳理。不懂的还请vuex里代码每行注释进行通
由于一直使用的前端组件element-plus，所以需要经常看文档，但无奈官网实在不给力，经常报503或者404，大大影响效率和心情，忍无可忍就本地化部署一套解决此问题。百度了一下大多数都是使用vscode的liveserver,或者放到服务器上,均可使用。因为我自己测试需要访问很多文件或者视频资源，所以在本地搭建了一个tomcat服务器，不用上传到服务器，不用担心被删掉1. 安装tomcat9.0或者其他版本均可下载地址： ApacheTomcat®-ApacheTomcat9SoftwareDownloads 注意下载安装版本，这样方便知道tomcat的运行状态，也可以配置开机启动。 2.
由于一直使用的前端组件element-plus，所以需要经常看文档，但无奈官网实在不给力，经常报503或者404，大大影响效率和心情，忍无可忍就本地化部署一套解决此问题。百度了一下大多数都是使用vscode的liveserver,或者放到服务器上,均可使用。因为我自己测试需要访问很多文件或者视频资源，所以在本地搭建了一个tomcat服务器，不用上传到服务器，不用担心被删掉1. 安装tomcat9.0或者其他版本均可下载地址： ApacheTomcat®-ApacheTomcat9SoftwareDownloads 注意下载安装版本，这样方便知道tomcat的运行状态，也可以配置开机启动。 2.
文章目录前言一、el-colspanpush&pull响应式offset二、el-rowgutterjustifyalign总结前言拖拉了一晚,总结了一些Layout布局工具的使用方法.一、el-col本来打算先说row的…写完看了一遍感觉还是换过来的好(捂脸).el-col是el-row的子元素.在el-row添加style="flex-direction:column;"可以实现纵向排列el-col,在需要纵向布局时可以使用,横向col现在填满默认自动换行,不需要特别规定;span规定一个col占据24份中的多少份.倒也不是必加的属性…当el-row中仅有一个el-col时,该el-col
文章目录前言一、el-colspanpush&pull响应式offset二、el-rowgutterjustifyalign总结前言拖拉了一晚,总结了一些Layout布局工具的使用方法.一、el-col本来打算先说row的…写完看了一遍感觉还是换过来的好(捂脸).el-col是el-row的子元素.在el-row添加style="flex-direction:column;"可以实现纵向排列el-col,在需要纵向布局时可以使用,横向col现在填满默认自动换行,不需要特别规定;span规定一个col占据24份中的多少份.倒也不是必加的属性…当el-row中仅有一个el-col时,该el-col
一，何为Element UI 及 Element Plus？它们是前端框架。它是包含很多有自己风格的组件库。 Element目前有两个版本：element-ui 及element-plus两个版本。它将HTML的基础控件进行了封装，用户只需要调用这些控件就可以了。而不需要用CSS去调整风格。ElementUI是一款基于Vue2.x 的界面框架；Element Plus是一款基于Vue3.x 的界面框架；既然基于Vue，所以可以使用打包工具打包，例如Vite或WePack 当然Element UI与有React及Angular的版本了。二、Element UI 与 Element Plus区别？
一，何为Element UI 及 Element Plus？它们是前端框架。它是包含很多有自己风格的组件库。 Element目前有两个版本：element-ui 及element-plus两个版本。它将HTML的基础控件进行了封装，用户只需要调用这些控件就可以了。而不需要用CSS去调整风格。ElementUI是一款基于Vue2.x 的界面框架；Element Plus是一款基于Vue3.x 的界面框架；既然基于Vue，所以可以使用打包工具打包，例如Vite或WePack 当然Element UI与有React及Angular的版本了。二、Element UI 与 Element Plus区别？
说明：该文属于大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB私域社区。福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划加入私域社区。当前子专栏基础入门三大核心篇也是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益。作者：不渴望力量的哈士奇(哈哥)，十余年工作经验,跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划”发起人。现象级专栏《白宝书系列》作者，文章知识点浅显
说明：该文属于大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB私域社区。福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划加入私域社区。当前子专栏基础入门三大核心篇也是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益。作者：不渴望力量的哈士奇(哈哥)，十余年工作经验,跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划”发起人。现象级专栏《白宝书系列》作者，文章知识点浅显
文章目录一、插入图片1、简介2、代码示例二、背景图片1、简介2、代码示例一、插入图片1、简介插入图片:插入图片方式:在HTML中,使用标签可以插入一张图片;插入图片适用场景:显示内容,按钮,一般都使用插入图片的方式展示图片,设置插入图片大小:通过设置盒子模型内容尺寸而设置图片大小;width设置图片内容宽度;height设置图片内容高度;设置插入图片显示位置:通过设置盒子模型左边距和上边距而设置图片的位置;margin-left设置图片的左外边距;margin-top设置图片的上外边距;代码示例: img{ /*设置图片大小*/ width:200px; height:200px; /
