Axios取消请求，以及全局取消请求封装
前提准备首先编写一个测试接口，模拟接口延迟返回，请求5秒后再返回结果
使用 node + koa 来实现
1234567891011121314151617181920const Router = require("koa-router");const router = new Router();router.get("/getLongData", async (ctx, res) => { // 获取get请求的参数 // console.log(ctx.query); await new Promise((resolve) => { setTimeout(() => { resolve(); }, 5000); }); ctx.body = { code: 200, message: "请求成功！", };});module.exports = router;
AbortCont ...
React + SpringBoot 开发用户中心管理系统
技术栈前端技术栈
“react”: “^18.2.0”,
ant-design-pro
后端技术栈
SpringBoot 2.6.x
项目源码地址
https://gitee.com/szxio/user-center
前端项目搭建快速搭建一个后端管理系统项目框架
初始化antDesignPro 官网： https://pro.ant.design/zh-CN。开箱即用的中台前端/设计解决方案
我们提供了 pro-cli 来快速的初始化脚手架。
12345# 使用 npmnpm i @ant-design/pro-cli -gpro create user-centercd user-centerpnpm install
去除国际化1pnpm i18n-remove
执行这个命令可以去掉项目中的国际化配置，再次启动可能会报引用错误，把多余的引用去掉即可
启动1pnpm start
访问
后端项目搭建初始化使用idea开发工具自带 Spring Initializr 完成项目创建
如果Java版本无法选中8，可以切换上面的 Server URL 为阿里的源 htt ...
封装一个websocket，支持断网重连、心跳检测，拿来开箱即用
代码封装编写 WebSocketClient.js
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148import { EventDispatcher } from './dispatcher'export class WebSocketClient extends EventDispatcher { constructor ...
大屏无限滚动效果实现
实现效果
实现思路
首先固定最外层的高度，并且设置超出高度后隐藏
设置每一行的高度为固定35PX，默认显示10行，所以最外层高度就是 35 * 10 + 表头的高度
遍历时克隆一份表格数据，用于视差效果显示
设置滚动动画，让表格行所在的父元素 tableTr 不断往上移动，当移动到末尾数据时，此时定义的移动距离 position 刚好时总高度的一半
然后重置 position 的距离为0，因为我们克隆了一份数据，此时便不会有闪跳的情况，给人的感觉就是继续往上滚动，从而实现无限滚动的效果
完整代码
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711 ...
前端使用Compressor.js实现图片压缩上传
前端使用Compressor.js实现图片压缩上传Compressor.js官方文档
安装
1npm install compressorjs
使用
在使用ElementUI或者其他UI框架的上传组件时，都会有上传之前的钩子函数，在这个函数中可以拿到原始file，这里我用VantUI的上传做演示
1234567<van-uploader :max-count="prop.limit" v-model="state.fileList" :after-read="afterRead" :before-read="beforeRead" @delete="deleteFile"/>
afterRead函数时上传之前的钩子，可以获取到file
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 ...
鸿蒙开发HarmonyOS4.0入门与实践
课程地址：https://www.bilibili.com/video/BV1Sa4y1Z7B1/
源码地址：https://gitee.com/szxio/harmonyOS4
准备工作官网地址鸿蒙开发者官网：https://developer.huawei.com/consumer/cn/develop/
工具下载打开 HUAWEI DevEco Studio和SDK下载和升级 | 华为开发者联盟网站，选择对应的文件点击下载安装即可
入门案例安装好之后，选择一个空白项目创建
等待工具加载完成，打开这个 pages/Index.ets 文件
这个文件是一个入口文件，点击工具的右侧 Previewer 按钮，会出来预览界面，我们在左侧改动代码会实时的在这里显示
如果点击 Previewer 按钮出来的是一对文字，可以关掉工具，重启一下即可
上面我们修改了文字的颜色，并且给文字添加了一个点击事件，点击之后改变文字的内容为 Hello ArkTS
华为手机模拟器安装安装文档：https://b11et3un53m.feishu.cn/wiki/LGprwXi1biC7TQk ...
Java实现短信发送并校验，华为云短信配合Redis实现发送与校验
安装sms4j和redis12345678910<dependency> <groupId>org.dromara.sms4j</groupId> <artifactId>sms4j-spring-boot-starter</artifactId> <version>3.2.1</version></dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId></dependency>
sms4j使用使用sms4j可以非常简单的实现短信发送功能，并且适配了主流的云平台
官方文档地址
添加配置1234567891011121314151617181920212223242526272829303132333 ...
使用 vue3-sfc-loader 在运行时动态加载 .vue 文件
vue3-sfc-loadervue3-sfc-loader ，它是Vue3/Vue2 单文件组件加载器。
在运行时从 html/js 动态加载 .vue 文件。无需 Node.js 环境，无需 (webpack) 构建步骤。
主要特征
支持 Vue 3 和 Vue 2（参见dist/）
仅需要 Vue 仅运行时构建
提供esm和umd捆绑包（示例）
嵌入式ES6模块支持（含import()）
TypeScript 支持、JSX 支持
自定义 CSS、HTML和脚本语言支持，请参阅pug和stylus示例
SFC 自定义块支持
通过日志回调正确报告模板、样式或脚本错误
专注于组件编译。网络、样式注入和缓存由您决定（参见下面的示例）
轻松构建您自己的版本并自定义您需要支持的浏览器
编写Node接口编写Node接口提供服务，用于返回vue文件
项目初始化和安装
1234mkdir nodeServecd nodeServenpm iniy -ynpm install express cors
项目完整结构
123456nodeServer├── index.js├── load ...
巧用CSS的clamp函数
纯CSS实现箭头根据高度显示或隐藏参考文章：https://mp.weixin.qq.com/s/CsKXJhHOQQzfVEyD0ghiTw
方式一：@container方法实现1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> body { ...
手写Vue3核心源码
Monorepo介绍Monorepo 是管理项目代码的一种方式，只在一个仓库中管理多个模块/包
一个仓库可以维护多个模块，不用到处找仓库
方便版本管理和依赖管理，模块之间的引用和调用都非常方便
缺点：仓库的体积变大，打包和安装依赖都会变慢
例如Vue3源码、element-plus 等都已经采用这种方式来管理项目
了解更多可以查看这个文档：https://www.modb.pro/db/626876
Vue3项目结构1234567891011121314151617181920 +---------------------+ | | | @vue/compiler-sfc | | | +-----+--------+------+ ...