前端websocket

实践指南-前端性能提升 270%

一、背景 当我们疲于开发一个接一个的需求时,很容易忘记去关注网站的性能,到了某一个节点,猛地发现,随着越来越多代码的堆积,网站变得越来越慢。 本文就是从这样的一个背景出发,着手优化网站的前端性能,并总结出一套开发习惯,让我们在日常开发时,也保持高性能,而不是又一次回过头来优化性能。 先来看看优化的成 ......
前端 性能 指南 270%

前端H5使用html5QrCode实现扫一扫识别二维码

Vue版本:npm install html5-qrcode <template> <div class="index"> <!-- 扫一扫 --> <div class="scan" v-if="isScanning"> <div class="scan-box"> <div id="scanni ......
前端 html5QrCode 5QrCode QrCode html5

关于前端基础数据结构的问题

常用的数据集采用数组的好处,当然对于前端新人来很容易混淆,如下的数据是数组(js的数组本就是特殊的对象,因此又叫数组对象)由于这缘故很多网上的叫法五花八门 所以下面的数据结构很容易混淆,以为这是数组对象(其实这样叫没错,只是理解成是真对象(js的数组也是对象的一种,先区别一下免得混淆))其实是数组( ......
数据结构 前端 结构 基础 数据

前端pdf文件直接下载而不是打开

直接在pdf地址后面加上后缀“?response-content-type=application/octet-stream” 如:http://xxxx/pdf/20230413/1c2c6f20-d9dc-11ed-92bf-79077d10cc6c.pdf?response-content-t ......
前端 文件 pdf

零基础快速入门WebRTC:基本概念、关键技术、与WebSocket的区别等

本文主要分享了WebRTC的基本概念、关键技术术语(包括NAT、STUN、TURN、ICE、SDP 和信令),着重讲解了WebRTC是如何实现P2P通信以及WebRTC信令的作用,同时讨论了WebRTC在技术上的优势和劣势,最后还提供了一个简单的WebRTC Demo代码。 ......
WebSocket 概念 关键 基础 WebRTC

纯前端仿GPT流式打字效果的js库,类似通义千问或者其他AI界面的打字效果

因为GPT以及国内各大模型的发布,很多官网都设计的是,仿造流式打字效果,下面这个js库就能轻松实现。 typed.js 具体实现代码参考下面: <span id="subTitle"></span> <script src="https://unpkg.com/typed.js@2.0.15/dis ......
效果 前端 界面 GPT

JAVA返回前端时候bean转json时首字母、第二个字母大写会自动变成小写的问题

后台bean是 private String uName; 但是前端生成的json是 uname 会自动变成小写 如果我们只是个别的几个的话,只需要加个注解 @JsonProperty("uName") private String uName; 这样就可以了 ......
字母 小写 大写 前端 时候

批量上传GPT知识库,前端elementui的upload上传组件,后端Golang的上传接口实现

为了实现批量上传GPT的知识库并且功能,那么这个上传组件就必不可少,需要能把文档上传到服务器中。 前端部分,我是采用的cdn引入的形式,引入的elmentui。该框架是有上传组件的,可以参考我的用法: action部分就是上传接口,其他三个是上传之前的处理,上传成功和失败后的回调函数 <el-upl ......
前端 知识库 组件 elementui 接口

一对多订单前端写法

$.ajax({ url: "/orders/show_order", type: "GET", dataType: "JSON", success: function(json) { $("#test").empty(); console.log("删除成功!"); $.each(json.dat ......
写法 前端 订单

前端上传资源时无缝切换

通过使用软链接,在上传时更改软链接指向实现 # send ssh new-prod-doc "rm -rf /data/web/dist_source_last/*" # 删除上一版本的资源 ssh new-prod-doc "cp -r /data/web/dist_source/* /data/ ......
前端 无缝 资源

4、Web前端学习规划:JavaScript - 学习规划系列文章

JavaScript作为Web前端里的第3重要的语言,笔者认为该重点进行学习。因为JavaScript衍生出来的框架和类库有不少,而且很强大。所以JavaScript的学习要抓好重点,在基本的语法及应用上学习相关的框架和类库,更好的为Web前端的开发应用做好准备。 1、 简介; JavaScript ......
前端 JavaScript 文章 Web

3、Web前端学习规划:CSS - 学习规划系列文章

CSS作为Web前端开发的第2种重要的语言,笔者建议在学了HTML之后进行。CSS主要是对于HTML做一个渲染,其也带了一些语言语法函数,功能也非常强大。 1、 简介; CSS(层叠样式表)是一种用于描述网页样式的语言。它可以控制网页中的字体、颜色、布局、背景等方面的样式。CSS可以与HTML和Ja ......
前端 文章 Web CSS

基于 xterm + websocket + vue 实现网页版终端 terminal

cdn形式html页面实现 在进行开发这个功能的时候,进行了百度,最后参考此博主的文章中的自定义版本,进行修改:https://blog.csdn.net/qq_25252769/article/details/127791918 开发过程中,由于后台数据返回的格式需要进行处理,根据自身需求,代码进 ......
终端 websocket terminal 网页 xterm

前端自动化测试之葵花宝典

Web 前端自动化测试是一种可以提高测试效率、减少测试成本和提高测试质量的方法,适用于各种类型的 Web 应用程序。本文谈谈前端自动化测试从入门到精通再到专家级的方案与思维! ......
葵花宝典 葵花 前端 宝典

layui 框架收藏 - 前端篇

1. layuimini 最简洁、清爽、易用的layui后台框架模板。layui 页面的风格,分为iframe 多tab版本和单页版。 主要特性 界面足够简洁清爽,响应式且适配手机端。 一个接口几行代码而已直接初始化整个框架,无需复杂操作。 页面支持多配色方案,可自行选择喜欢的配色。 支持多tab, ......
前端 框架 layui

前端面试题-

1、说一说cookie sessionStorage localStorage 是什么,有什么区别? Cookie、sessionStorage 和 localStorage 都是在浏览器端存储数据的方式,它们的主要区别在于存储的数据范围、有效期和访问权限等方面。 Cookie Cookie 是一种 ......
前端

在 IIS 上启用 Websocket

第一种方式通过“管理”菜单或“服务器管理器”中的链接使用“添加角色和功能”向导。选择“基于角色或基于功能的安装”。 选择“下一步” 。选择适当的服务器(默认情况下选择本地服务器)。 选择“下一步” 。在“角色”树中展开“Web 服务器 (IIS)”、然后依次展开“Web 服务器”和“应用程序开发” ......
Websocket IIS

HTTP1.1之后的长连接 WebSocket的长连接 gRPC 长连接 Keep-Alive

HTTP1.1之后的长连接和WebSocket的长连接之间的区别 https://mp.weixin.qq.com/s?src=11&timestamp=1681315755&ver=4464&signature=MFfuJCZhqrF0CJHXIkkxwwNd9-JhgHbZAcYSVqyDtLu ......
Keep-Alive WebSocket HTTP1 Alive HTTP

解决前端安装sharp出错问题sharp: Command failed.

报错如下:sharp: Command failed. cd C:\Users\xxx-api && yarn install yarn install v1.22.19un\Documents\my_files\A-Web-Project\service-categories\service-ca ......
sharp 前端 Command failed 问题

前端_发起axios请求,前端无法获取response的全部header

问题描述 使用vue axios 向python+flask 搭建的服务端发起请求,请求成功后,前端无法拿到服务端添加到header中的token。 问题原因 前后端分离,默认reponse header只能取到以下信息 Content-Language Content-Type Expires L ......
前端 response header axios

前端(二)

前端(二) 列表标签 1. 无序列表 <ul type="disc"> <li>冰</li> <li>草</li> <li>风</li> <li>火</li> <li>岩</li> </ul> type属性: ● disc(实心圆点,默认值) ● circle(空心圆圈) ● square(实心方块 ......
前端

2、Web前端学习规划:HTML - 学习规划系列文章

今天先写Web前端最基本的语言:HTML。目前已经到了HTML5版本,作为Web基本语言,笔者认为这个是最先需要学习的语言。 1、 简介; HTML(HyperText Markup Language)是一种用于创建网页的标记语言。它使用标签和属性来描述网页的结构和内容,并且可以嵌入其他类型的媒体, ......
前端 文章 HTML Web

看!前端新人如何用ChatGPT开发APP

作为一种大型的基于GPT-3. 5结构的语言模型,ChatGPT由OpenAI训练,采用深度学习技术,通过大量的文本数据学习,可以生成类似于人类自然语言的文字。ChatGPT是一种非常强大的对话引擎,能进行对话、回答问题和完成任务。ChatGPT是一种工具,可以在没有编程知识的情况下使用,为用户提供 ......
前端 新人 ChatGPT APP

开发手记-前端发送请求返回数据为空

问题描述 发送请求获取到数据并传递给组件,但是组件第一次获取到的数据为空导致报错 猜测可能的原因 react有一个机制会导致两次渲染 axios异步请求,在没有去的结果前就返回 解决组件首次渲染时,数据还未到达,导致错误的情况 这边又分两种情况 组件自己发送请求获取数据 可以在组件中使用 useSt ......
前端 手记 数据

新员工入职,前端基础环境变量的配置!node、nvm、vue-cli的安装和下载

1.安装nvm及配置 首先下载nvm不要下载node,如果电脑已经有node的话需要卸载node,并使用命令提示符来查看node的位置(where node)手动删除 nvm下载链接:https://nvm.uihtm.com/ 下载最新版本,next傻瓜式操作(需要注意的是) 选择node.js文 ......
前端 变量 员工 vue-cli 环境

前端面试题

一、什么是JavaScript? 二、JavaScript 中的hoisting是什么? 三、什么是闭包 四、说一说this指向(普通函数、箭头函数) 五、说几个未知宽高元素水平垂直居中方法 6、说一说cookie sessionStorage localStorage 是什么,有什么区别? 7、说 ......
前端

第十二篇 手写原理代码 - 实现一个前端并发控制请求函数

实现并发控制请求函数 /** * 并发控制请求函数 * @param {Array} urls 请求的 URL 数组 * @param {Number} max 最大并发数 * @param {Function} callback 请求成功回调函数 */ async function concurr ......
前端 函数 原理 代码

前端代码安全与混淆

本文从攻击者角度和防御者角度详细解析前端代码安全与混淆的相关知识,总结了大部分攻击者共同点以及如何应对普通开发者外挂程序和Pyhton 爬虫 ......
前端 代码

跨域与解决跨域 (前端的处理)

一、什么叫跨域 ??? 跨域,是指浏览器不能执行其他网站的脚本。 它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。 浏览器的同源策略: 简单来说 同源 就是 指 协议、域名、端口号 均相同 二、解决跨域 1、CORS 下面是MDN对于CORS的定义: 跨域资源共享(COR ......
前端

前端安装的插件

vscode中settings.json配置 { "prettier.configPath": "D:\\vscode\\Microsoft VS Code\\.prettierrc", // 安装Prettier配置 "eslint.alwaysShowStatus": true, "pretti ......
前端 插件