CodeToGym-优快云博客

原创 WebSocket 实现前后端实时通信 - 详细教程

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它允许服务器和客户端之间实时传输数据，适用于聊天系统、股票行情、在线游戏等需要即时交互的应用场景。相较于传统的 HTTP 轮询（Polling）或长轮询（Long Polling），WebSocket 具有更低的延迟、更少的资源消耗，并且可以实现真正的实时双向通信。本文介绍了 WebSocket 的基本概念，并通过完整的前后端示例演示如何使用 WebSocket 实现实时消息通信。

2025-02-07 19:23:22 1145

原创使用 concurrently 实现前后端一键启动

通过，我们只需一条命令即可实现前后端服务的同时启动，大幅提升开发效率。此方案适用于任何需要并行执行命令的场景（如多微服务项目）。Gitee 链接。

2025-01-29 19:27:27 623

原创三分钟在你的react项目中引入tailwindcss

在vite搭建的react项目中引入并使用tailwindcss。

2025-01-01 14:49:16 482

原创使用 Vite 和 Redux Toolkit 创建 React 项目

通过以上步骤，我们成功地创建了一个使用 Vite 和 Redux Toolkit 的 React 项目。我们学习了如何创建状态切片、合并切片到 Redux store、以及在组件中获取和修改状态。在本教程中，我们将通过使用 Vite 创建一个 React 项目，并结合 Redux Toolkit 来管理应用的状态。我们将创建一个用户状态管理的切片（slice），并展示如何在组件中获取和修改这些状态。首先，我们使用 Vite 创建一个新的 React 项目。文件中，我们需要导入并使用刚刚创建的 store。

2024-12-18 20:15:49 1260

原创 React 入门：JSX语法详解

React是一个用于构建用户界面的JavaScript库，它引入了JSX语法，使得你可以在JavaScript代码中编写类似HTML的结构。JSX在编译后会被转换成合法的JavaScript对象。

2024-12-14 14:39:31 608

原创微信小程序购物车全选反选功能以及合计

基于微信小程序和Vant Weapp的购物车功能实现。

2024-12-04 14:02:46 943

原创微信小程序生命周期详解

通过理解这些生命周期的运行顺序和作用，开发者可以在适当的时机执行相应的代码逻辑，从而提高小程序的性能和用户体验。微信小程序的全局生命周期指的是小程序从启动到销毁期间经历的一系列阶段和事件。组件生命周期指的是自定义组件从创建到销毁的一系列阶段和事件。页面生命周期指的是小程序页面从创建到销毁期间经历的一系列阶段和事件。

2024-11-27 20:04:32 400

原创在 Vue 项目中使用 betterScroll 的详细教程及原理解析

betterScroll 是一个专注于移动端滚动效果的插件，它基于原生的scroll行为进行封装优化，解决了移动端原生滚动存在的诸多问题，比如滚动不流畅、弹性效果不佳、在一些特定布局下无法正常滚动等情况。它提供了丰富的配置选项和 API，让开发者可以高度定制滚动的各种特性，例如滚动方向（水平、垂直或双向）、滚动边界、滚动动画、事件监听等，几乎涵盖了我们在日常开发中涉及滚动交互的所有需求场景。

2024-11-23 15:46:34 1179

原创 element-plus menu菜单点击一级导航不选中二级导航的问题

这里我想到的方法是给一级导航商品管理点击事件，手动跳转一级导航下的第一个二级导航，而出现了另外一个问题，就是在点击二级导航的其他元素是都会被点击事件重定向到第一个商品列表页面，因为二级导航也属于一级导航的内容。在实现侧边栏的时候，点击一级导航的时候只是打开了二级导航，并没有跳转到二级导航里面，如图。最终解决方案，在商品管理的span标签上绑定点击事件并使用.stop修饰符阻止默认事件。这样就可以丝滑的实现点击一级导航，选中第一个二级导航了。

2024-11-12 19:41:25 475

原创 Webpack性能优化指南：从构建到部署的全方位策略

Babel 的缓存可以在第一次打包时将转换过的代码缓存起来，下次再进行打包时就可以避免部分代码的再次转换，从而提升打包速度。借助插件 webpack-bundle-analyzer 我们可以直观的看到打包结果中，文件的体积大小、各模块依赖关系、文件是够重复等问题，极大的方便我们在进行项目优化的时候，进行问题诊断。这里对比一下使用前后的区别，使用 devtool 后，可以正确追踪代码报错的位置，并且可以还原出打包前的代码。，但是可以在项目打包后在控制台可以正确追踪代码报错的位置，并且可以还原出打包前的代码。

2024-11-07 09:29:47 961

原创 vue常用语法/面试题

vue2组件里的数据都是存放在data中的，如果写成对象，对象是引用数据类型，每个组件里都是data，那么所有的组件会共用一份data，会有变量污染的风险，如果写成了一个返回对象的函数，那么每个组件内部data会生成一个独立的对象，这样就不会有变量污染的问题。使用set方法，Vue.set(对象，添加的属性名，添加的属性值)，还有一个更简单的方式就是直接把添加的属性写在data中，给一个初始值，因为在vue2中data中的数据都会被劫持。)，属性和方法的运算，watch/event事件回调。

2024-11-07 09:21:47 1001

原创前端安全：构建坚不可摧的Web应用防线

跨站脚本攻击（XSS）是一种代码注入攻击，攻击者通过在网页中注入恶意脚本，利用这些脚本在用户的浏览器中执行，从而窃取用户信息或进行其他恶意行为。跨站请求伪造（CSRF）攻击者通过诱使已经登录的用户在不知情的情况下执行非预期的操作，如转账或更改密码。明确指定哪些动态资源是可信的，哪些不是，可以有效防止XSS攻击。使用HTTPS可以保护用户数据免受中间人攻击，确保数据在客户端和服务器之间传输的过程中不被窃取或篡改。

2024-10-30 19:56:30 1354

原创 Vue.js内置指令全解析：从基础到实践

在Vue.js的世界里，指令是连接数据和视图的桥梁，它们为开发者提供了一种声明式的方法来处理常见的任务。本文将详细介绍Vue.js中的内置指令，包括它们的用法、示例以及浏览器执行的结果。通过这些指令，我们可以更高效地构建动态和响应式的用户界面。在开始之前，建议读者查阅Vue.js的官方文档，以便更深入地理解每个指令的内部机制和最佳实践。

2024-10-30 19:51:14 1298

原创前端性能优化：实用技巧与最佳实践

随着互联网技术的发展，用户对网页的加载速度和交互体验要求越来越高。前端性能优化已成为提升用户体验和网站竞争力的关键。本文将探讨一些实用的前端性能优化技巧和最佳实践，帮助开发者构建更快、更流畅的Web应用。

2024-10-27 21:39:22 871

原创手敲Webpack 5：React + TypeScript项目脚手架搭建实践

开发环境已经在 devServer 中配置了 static 托管了 public 文件夹，在开发环境使用绝对路径可以访问到 public 下的文件，但打包构建时不做处理会访问不到，所以现在需要在打包配置文件webpack.prod.ts 中新增 copy 插件配置。源的解析结果，还有模块缓存插件 hard-source-webpack-plugin ，配置好缓存后第二次打包，通过对。配置完成后，需要有一份要兼容浏览器的清单，让 postcss-loader 知道要加哪些浏览器的前缀，在根。

2024-10-27 21:36:24 1364

原创 Webpack新手教程：创建项目、安装依赖与基础配置

webpack 的插件能够增强 webapck 的功能，本身 webpack 只是解析依赖从而打包，loader 使webpack 能够转化文件，而 plugins 则使 webpack 能够拥有压缩，提取等更大强大的功能。webpack 的 Loader 主要用于对模块的转换，也就是对文件的转化，如将 Less、Sass 处理成 CSS，将图片处理成 data URL 等。会在根目录生成一个dist文件夹，文件里面有一个main.js文件，这里是默认行为，可以指定位置以及打包后的文件名。

2024-10-24 11:22:44 1231

原创小米商城移动端全栈开发实战

通过这个小米商城移动端全栈项目的开发，我不仅提升了自己的技术能力，还学会了如何在实际开发中解决问题。这个项目涵盖了从后端服务搭建到前端页面开发，再到动态数据渲染和接口鉴权等多个方面，是一次全面的技术实践。

2024-10-20 16:38:13 511

原创 Node.js数据库交互：MySQL实用指南

总结：本文详细介绍了MySQL数据库的配置、基本命令、数据类型、表的创建与修改、DML语言（增删改查）以及常用函数的应用，为数据库管理和操作提供了全面的指导。语法：DROP TABLE [IF EXISTS] 表名。：完全清空一个数据库表，表的结构和索引约束不会变！where 条件字句：检索数据中符合条件的值。order by的位置一般放在查询语句的最后。所有的语句都要以分号结尾。

2024-10-14 07:44:34 1147

原创移动端rem的使用方法

适配的原理是通过设置根元素的字体大小，来实现不同屏幕大小下元素大小的自适应。随着移动设备的多样化，如何让网页在不同尺寸的屏幕上都能保持良好的布局和体验，是开发者需要考虑的问题。这种方法可以确保你的网页在不同尺寸的移动设备上都能保持良好的用户体验。：首先，为html元素设置一个合适的字体大小，作为rem单位的基础。：针对不同设备，通过媒体查询调整根元素的字体大小，实现自适应布局。是“Root EM”的缩写，是一种相对长度单位，相对于根元素。这样，无论在任何设备上，只要根元素的字体大小一致，使用。

2024-10-06 22:49:38 413

原创 TypeScript 入门指南

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，这意味着任何有效的 JavaScript 代码都是有效的 TypeScript 代码。类型表示那些永不存在的值的类型，例如总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数的返回值类型。是的，TypeScript 提供了类型系统和现代 JavaScript 特性，使得代码更加健壮和易于维护。映射类型可以用来创建类型，这些类型是其他类型的属性的映射。函数的类型签名定义了函数的参数类型和返回类型。

2024-09-28 20:35:29 867

原创 #JavaScript Promise 教程

在 JavaScript 中，

2024-09-22 21:51:22 484

原创 # JavaScript 可选链（Optional Chaining）与空值合并（Nullish Coalescing）教程

在 JavaScript 的发展过程中，ES2020 引入了两个非常实用的新特性：可选链（Optional Chaining）和空值合并（Nullish Coalescing）。这两个特性极大地简化了代码，提高了开发效率和代码的可读性。本文将详细介绍这两个特性的使用方法和应用场景。可选链操作符?允许你读取位于连接对象链深处的属性，而不必显式地验证链中的每一环是否有效。如果链中的某一环是null或undefined，表达式短路返回undefined而不是抛出错误。空值合并运算符??

2024-09-22 18:12:21 416

原创数组方法大全（分类）

JavaScript 中的数组方法可以按照它们的主要功能进行分类。

2024-09-13 18:39:41 312

原创事件循环！

首先，JavaScript是一门单线程的语言，意味着同一时间内只能做一件事，但是这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是。事件是特定情况下触发的操作。这里的操作是用起来的，所以，事件就是在特定情况下触发的函数。在 JavaScript 中，事件有同步与异步之分。塞操作或者遇到异步事件为止。指定的时间间隔之后触发回调函数。并且注意一点，当设置定时器时，浏览器会将定时器任务放入任务队列中。在 JavaScript 中，任务队列中的任务会按照顺序执行，并且会等待当前执行。

2024-09-12 19:59:50 901

原创原型与原型链

构造函数（constructor）是构造函数原型上的一个方法，他的指向就是这个构造函数//我们创建一个Person构造函数//调用Person原型的构造函数,发现指向这个构造函数在原型的概念中，构造函数的原型会继承方法到实例上，那我们推测，构造函数的实例是不是也有constructor属性，constructor指向谁？//我们创建一个Person构造函数//创建实例//打印实例的构造函数//发现实例的constructor属性也指向了构造函数。

2024-09-08 18:42:43 519

原创 JavaScript 数组方法全攻略：从创建到高级操作一网打尽

本文全面介绍了 JavaScript 中的数组方法。从数组的创建与初始化开始，包括字面量方式和构造函数创建。接着详细阐述了数组的基本操作方法，如通过索引访问和遍历数组获取元素，以及直接赋值和使用特定索引修改元素。在添加与删除方法部分，介绍了 push、unshift、pop、shift 和 splice 等方法。排序方法涵盖了 sort 升序排序、自定义排序规则和 reverse 反转数组。查询方法包括 indexOf、lastIndexOf 和 includes。转换方法有 join、toString 以

2024-09-05 17:23:51 1304

2302_80412007的博客