JS监听元素滚动事件
使用监听 scroll 可以实现监听页面滚动或者元素滚动是否到底
案例代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384<template> <div class="app-container"> <div class="box"> <div v-for="(item,index) in count" :key="index" class="item"> {{ item }} </div> </div> </div></template> ...
JS跨标签监听消息
当涉及到同时打开多个tab页，操作一个tab，希望其他的tab也会同时进行更新状态。就可以用下面的方法来处理
新建 crossTagMsg.js新建 crossTagMsg.js，编写如下代码
123456789101112131415161718192021222324252627/** * 跨标签监听storage *//** * 发送消息 * @param type 消息类型 * @param payload 消息内容 */export function sendMsg(type, payload) { localStorage.setItem('@@' + type, JSON.stringify({ payload, temp: new Date().getTime(), // 用时间戳避免发送重复消息时不会触发监听方法 }))}/** * 监听消息 * @param handler 监听到后触发的回调操作 */export function listenMsg(handler ...
Java使用Easyexcel实现excel导出,附前端下载方法
后端代码添加依赖首先安装依赖
123456<!--添加easyExcel--><dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.1.1</version></dependency>
设置excel表头映射文件然后添加一个VO类，声明excel中的表头字段
123456789101112131415161718package com.szx.edu.entity.vo;import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;import com.alibaba.excel.annotation.ExcelProperty;import lombok.Data;@Data@ExcelIgnoreUnannotatedpublic class ExportEventVo ...
js实现接口请求重试
方法封装首先新建 haveload.js ，文件中对Ajax请求进行二次封装，代码如下
123456789101112131415161718192021222324252627282930import request from '@/utils/request'// 可以重试的请求方法-get方法export function retryServerGet(url, maxCount = 1, params = {}) { return new Promise((resolve, reject) => { request .get(url, {params}) .then(res => { resolve(res) }) .catch(err => { maxCount <= 1 ? r ...
为网站增加樱花飘落效果全站背景唯美樱花JS美化
为网站增加樱花飘落效果全站背景唯美樱花JS美化这个是给网站加上一个全站的樱花动态飘落唯美效果，加上后默认是网站所有页面都有效果，不想全局都显示，可以使用wordpress页面标签判断限制，在需要的页面显示，比如只想在首页等，
效果预览
使用方法总是用CDN链接的方式，经常性的失效，影响体验，所以这里提供了源码，就不用担心失效问题了，永久使用，
在网页中使用：在把下方的樱花效果的js代码，放到网页的<body></body>中合适的位置即可。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241 ...
使用vue3从0搭建后台管理系统
项目简介源码地址 https://gitee.com/szxio/zx-vue-next
描述本项目是使用 vue3 来开发的后台管理系统模板。页面简单大方，使用悬浮式的风格，将菜单栏，顶部面包屑，中间操作区域等合理划分，功能丰富，支持主题颜色自定义，一键开启黑色主题，浅色、深色菜单动态切换等。路由采用动态路由，依托若依后端接口，拥有强大的权限管理功能。对若依感兴趣的点此跳转，希望各位小伙伴能够在学习本项目的过程中或多或少的有所收获。
如果感觉对你有所帮助，请点击 Star，感谢支持。
本文档同步至以下网站：
https://songzx0106.github.io/
https://blog.csdn.net/SongZhengxing_?type=blog
技术栈
vue3
element-plus
Pinia
vue-router
js-cookie
sass
….
页面截图
本地运行本项目后端借用了若依的后台框架，在她的基础上稍作了修改。
可以在本地启动本项目中的 java 代码。再启动前端查看效果。
若依启动成功截图
创建项目使用 vite 来创建我们的工程
1 ...
树形结构和一维数组互转
一维数组转树形结构12345678910111213141516171819202122const data = [ {id: 1, name: "1-1",}, {id: 2, name: "2-1",}, {id: 3, name: "3-1",}, {id: 4, name: "1-2", parentId: 1}, {id: 5, name: "1-3", parentId: 1}, {id: 6, name: "2-2", parentId: 2}, {id: 7, name: "2-3", parentId: 2}, {id: 8, name: "2-4", parentId: 7},]// 扁平化结构转树形结构 ...
前端实现文件下载
首先请求接口添加 responseType，声明响应类型
1234567export function functionName(year) { return request({ method: 'get', url: `/xxxxx/${year}`, responseType: 'blob' // 使用blob下载 })}
接收返回值并下载
12345678910111213functionName(this.year).then(res=>{ const objectUrl = URL.createObjectURL( new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) ) const lin ...
Vue3中使用动态ref
vue 中写法
1<van-form @submit="onSubmit" label-width="4em" :ref="(el)=>setItemRef(el, 'test'+1)">
js接收
123456789101112const iframeRefs = {}const setItemRef = (el, key) => { if (el) { iframeRefs[key] = el }}onMounted(()=>{ const iframeKey = 'test1' const iframe = iframeRefs[iframeKey] console.log(iframe)})
多媒体文本化
text-image可以将文字、图片、视频进行「文本化」
只需要通过简单的配置即可使用
源码地址：https://gitee.com/szxio/text-image
开始1234567891011121314151617181920<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <canvas id="demo"></canvas> <script src="./text-image/dist/text-image.iife.js"></script> <script> textImage.createTextImage({ ...
