当前位置: 首页 > news >正文

前端excel表格解析为json,并模仿excel显示

前端环境:elementUI  vue2   <style lang="scss" scoped>

页面效果

  • jsondata为mock数据,为方便调试其内容可清空,
  • 首行(字母坐标)随数据内容自动变化,首列也是一样,模拟excel 坐标的样式
<template><div class="mainBox"><div class="excel-uploader"><el-upload action="" :before-upload="handleFileUpload" :show-file-list="false"><el-button size="small" type="primary">导入表格</el-button></el-upload><!-- <div v-if="jsonData.length" class="json-preview"><h3>解析后的 JSON 数据:</h3><pre>{{ jsonData }}</pre></div> --></div><div class="excel-table-container"><table class="excel-table"><thead><tr><th></th><th v-for="(header, index) in headers" :key="index" class="editable-cell">{{ header }}</th></tr></thead><tbody><tr v-for="(row, rowIndex) in rows" :key="rowIndex"><th class="editable-cell indexno">{{ 1 + rowIndex }}</th><td v-for="(cell, cellIndex) in row" :key="cellIndex" class="editable-cell":class="{ selected: selectedCell.row === rowIndex && selectedCell.col === cellIndex }"@click="selectCell(rowIndex, cellIndex)"><span>{{ cell.value }}</span></td></tr></tbody></table></div>
</div>
</template><script>
import * as XLSX from 'xlsx';
import {saveTemplate,
} from "@/api/template";
export default {data() {return {headers: [],// ['A', 'B', 'C', 'D', 'E']rows: [['A1', 'B1', 'CQ', '', ''],['非货币性资产交换', 'B2', '', '', ''],// Add more rows as needed],selectedCell: { row: 0, col: 0 },isEditingCell: false,jsonData: [{"A1": {"value": "项目","formula": null},"B1": {"value": "会计确认的处置收入","formula": null},"C1": {"value": "处置收入调增","formula": null},"D1": {"value": "处置收入调减","formula": null},"E1": {"value": "税收计算的处置收入","formula": null},"F1": {"value": "处置投资的账面价值","formula": null},"G1": {"value": "处置投资的计税基础","formula": null},"H1": {"value": "会计确认的处置所得或损失","formula": null},"I1": {"value": "税收计算的处置所得","formula": null},"J1": {"value": "纳税调整金额","formula": null}},{"A2": {"value": "交易性金融资产","formula": null},"E2": {"value": 0,"formula": "B2+C2-D2"},"H2": {"value": 0,"formula": "B2-F2"},"I2": {"value": 0,"formula": "E2-G2"},"J2": {"value": 0,"formula": "I2-H2"}},{"A3": {"value": "可供出售金融资产","formula": null}},{"A4": {"value": "持有至到期投资","formula": null}},{"A5": {"value": "衍生工具","formula": null}},{"A6": {"value": "交易性金融负债","formula": null}},{"A7": {"value": "长期股权投资","formula": null},"E7": {"value": 0,"formula": "B7+C7-D7"},"H7": {"value": 0,"formula": "B7-F7"},"I7": {"value": 0,"formula": "E7-G7"},"J7": {"value": 0,"formula": "I7-H7"}},{"A8": {"value": "短期投资","formula": null},"E8": {"value": 0,"formula": "B8+C8-D8"},"H8": {"value": 0,"formula": "B8-F8"},"I8": {"value": 0,"formula": "E8-G8"},"J8": {"value": 0,"formula": "I8-H8"}},{"A9": {"value": "长期债券投资","formula": null}},{"A10": {"value": "其他","formula": null}},{"A11": {"value": "合计","formula": null},"B11": {"value": 0,"formula": "SUM(B2:B10)"},"E11": {"value": 0,"formula": "SUM(E2:E10)"}}],};},created() {this.transformJsonToTableData();},methods: {selectCell(row, col) {console.log("dff", row, col);this.selectedCell = { row, col };this.startEditing();},startEditing() {this.isEditingCell = true;},stopEditing() {this.isEditingCell = false;},isEditing(row, col) {return this.isEditingCell && this.selectedCell.row === row && this.selectedCell.col === col;},// excel 解析// handleFileUpload(file) {//如果只要 坐标和值用这个,{A1:"值"}//       const reader = new FileReader();//       reader.onload = (e) => {//         const data = new Uint8Array(e.target.result);//         const workbook = XLSX.read(data, { type: 'array' });//         // 假设我们只解析第一个工作表//         const firstSheetName = workbook.SheetNames[0];//         const worksheet = workbook.Sheets[firstSheetName];//         // 将工作表转换为坐标格式的 JSON//         const jsonData = this.sheetToJsonWithCoordinates(worksheet);//         this.jsonData = jsonData;//       };//       reader.readAsArrayBuffer(file);//       // 阻止上传动作,因为我们只是读取文件内容//       return false;//     },//     sheetToJsonWithCoordinates(worksheet) {//       const range = XLSX.utils.decode_range(worksheet['!ref']);//       const result = [];//       for (let row = range.s.r; row <= range.e.r; row++) {//         const rowData = {};//         for (let col = range.s.c; col <= range.e.c; col++) {//           const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });//           const cell = worksheet[cellAddress];//           if (cell && cell.v !== undefined) {//             rowData[cellAddress] = cell.v;//           }//         }//         result.push(rowData);//       }//       return result;//     }//   },handleFileUpload(file) {const reader = new FileReader();reader.onload = (e) => {const data = new Uint8Array(e.target.result);const workbook = XLSX.read(data, { type: 'array' });// 假设我们只解析第一个工作表const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName];// 将工作表转换为包含坐标、样式和公式的 JSONconst jsonData = this.sheetToJsonWithCoordinatesStylesAndFormulas(worksheet);this.jsonData = jsonData;};reader.readAsArrayBuffer(file);// 阻止上传动作,因为我们只是读取文件内容this.transformJsonToTableData()return false;},sheetToJsonWithCoordinatesStylesAndFormulas(worksheet) {const range = XLSX.utils.decode_range(worksheet['!ref']);const result = [];for (let row = range.s.r; row <= range.e.r; row++) {const rowData = {};for (let col = range.s.c; col <= range.e.c; col++) {const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });const cell = worksheet[cellAddress];if (cell && cell.v !== undefined) {rowData[cellAddress] = {value: cell.v,formula: cell.f || null, // 如果单元格有公式,则包含公式信息// style:this.getCellStyle(cell.s, rowData[cellAddress],cell)};}}result.push(rowData);}return result;},transformJsonToTableData() {// Determine the maximum column index neededlet maxColIndex = 0;this.jsonData.forEach(data => {const keys = Object.keys(data);keys.forEach(key => {const colIndex = key.charCodeAt(0) - 'A'.charCodeAt(0);if (colIndex > maxColIndex) {maxColIndex = colIndex;}});});// Generate headers based on the maximum column indexthis.headers = Array.from({ length: maxColIndex + 1 }, (_, i) => String.fromCharCode(65 + i));// Initialize rows based on the maximum number of columnsthis.rows = this.jsonData.map(data => {const row = Array(this.headers.length).fill({ value: '' });const keys = Object.keys(data);keys.forEach(key => {const colIndex = key.charCodeAt(0) - 'A'.charCodeAt(0);if (colIndex < row.length) {row[colIndex] = data[key];}});return row;});},},mounted() {this.ruleForm.createUserName = this.name}
};
</script><style scoped lang="stylus">
.excel-uploader {margin-bottom :12px;.json-preview {padding: 10px;border: 1px solid #ebeef5;border-radius: 4px;background-color: #f5f7fa;pre {white-space: pre-wrap; /* 保留换行符 */word-wrap: break-word; /* 长单词换行 */}}
}
.excel-table-container {width: 100%;overflow-x: auto;
}.excel-table {width: 100%;border-collapse: collapse;th, td { border: 1px solid #E6E8EA;padding: 8px;text-align: left;min-width: 100px;}th {background-color: #F4F6F8;min-width: 40px;}.editable-cell {&:hover {background-color: #e0e0e0;cursor: pointer;}&.selected {border: 2px solid #165DFF;}}
}
</style>

相关文章:

前端excel表格解析为json,并模仿excel显示

前端环境&#xff1a;elementUI vue2 <style lang"scss" scoped> 页面效果 jsondata为mock数据&#xff0c;为方便调试其内容可清空&#xff0c;首行&#xff08;字母坐标&#xff09;随数据内容自动变化&#xff0c;首列也是一样&#xff0c;模拟excel …...

NumPy 2.x 完全指南【十六】分割数组

文章目录 1. 数组分割1.1 split1.2 array_split1.3 vsplit1.4 hsplit1.5 dsplit1.6 unstack 1. 数组分割 数组分割是指将一个数组拆分为多个子数组的操作&#xff0c;常用于数据处理、并行计算、分块处理等场景。NumPy 提供了多种分割函数&#xff0c;允许用户沿不同方向&…...

vue3 + vite 使用tailwindcss

第一步&#xff1a;安装依赖 vite版本较低&#xff08;“vite”: “^4.0.0”&#xff09;所以就使用低版本的tailwindcss npm install -D tailwindcss3.4.1 postcss autoprefixer第二步&#xff1a;配置文件生成 npx tailwindcss init -p会自动生成两个文件postcss.config.js和…...

K个一组链表翻转

目录 1. 题意 2. 解题思路 3. 代码 1. 题意 给一个链表&#xff0c;按 k 进行翻转&#xff0c;也就是 k 2 &#xff0c;两两进行翻转&#xff0c;如果不够2则不动。 2. 解题思路 首先思考怎么翻转一个链表&#xff0c;反转链表&#xff1a;https://leetcode.cn/problems…...

逆向音乐APP:Python爬虫获取音乐榜单 (1)

1. 引言 在数字音乐时代&#xff0c;许多平台如音乐有榜单&#xff0c;限制非付费用户访问高音质或独家内容。然而&#xff0c;从技术研究的角度来看&#xff0c;我们可以通过逆向工程和Python爬虫技术解音乐的API接口&#xff0c;获取付费音乐的播放链接。 2. 技术准备 在当…...

STM32之串口通信WIFI上云

一、W模块的原理与应用 基本概念 如果打算让硬件设备可以通过云服务器进行通信&#xff08;数据上报/指令下发&#xff09;&#xff0c;像主流的云服务器有阿里云、腾讯云、华为云&#xff0c;以及其他物联网云平台&#xff1a;巴法云.......&#xff0c;硬件设备需要通过TCP…...

Python爬虫实战:获取天气网最近一周北京的天气数据,为日常出行做参考

1. 引言 随着互联网技术的发展,气象数据的获取与分析已成为智慧城市建设的重要组成部分。天气网作为权威的气象信息发布平台,其数据具有较高的准确性和实时性。然而,人工获取和分析天气数据效率低下,无法满足用户对精细化、个性化气象服务的需求。本文设计并实现了一套完整…...

【Java学习笔记】main方法

main 方法 一、深入理解 main 方法 特变注意&#xff01;&#xff01; 1. 在main()方法中&#xff0c;我们可以直接调用 mian 方法所在类的静态方法或静态属性 2. 不能访问该类中的非静态成员&#xff0c;必须创建该类的一个实例对象后&#xff0c;才能通过这个对象去访问类中…...

振动分析 - 献个宝

1.一个自制的振动能量分析工具 这个分析工具似乎真的定位到了故障的具体位置。 1.1对一组实验室虚拟信号的分析结果: 1.2 对现场真实数据的分析结果 依照边频带的调制,和边频的缝隙宽度,基本定位到问题。 追加几份待看的文档: 齿轮结构的频谱特征 - 知乎使用 FFT 获得…...

数学实验(Matlab绘图基础)

一、二维曲线的绘制 Matlab绘图原理 MATLAB绘图的核心原理基于数据点或函数离散化&#xff0c;通过描点连线生成图形。以下是具体解析&#xff1a; 1.数据离散化 二维数据通过&#xff08;x, y&#xff09;坐标点表示&#xff0c;连续函数需离散化处理&#xff08;如t0:0.01…...

【android bluetooth 协议分析 02】【bluetooth hal 层详解 3】【高通蓝牙hal主要流程介绍-上】

1. 背景 本节主要讨论 高通 蓝牙 hal 中&#xff0c;的一些流程。 看看你是否都清楚如下问题&#xff1a; 高通芯片电如何控制&#xff1f;串口是在哪里控制的&#xff1f;固件如何下载&#xff1f;初始化流程是怎么样的&#xff1f; 如果你已经对上述讨论的问题&#xff0c…...

Linux | tmux | 无法复制粘贴

问题&#xff1a;在Linux中使用tmux时&#xff0c;总是没法使用复制粘贴功能&#xff1b; 解决: 如果希望直接用鼠标选择并复制&#xff08;类似普通终端&#xff09;&#xff0c;可以&#xff1a; 在 ~/.tmux.conf 中添加&#xff1a;sh set -g mouse on;重新加载 tmux 配置…...

如何通过小贝加速实现精准网络故障排查

在日常使用电脑的过程中&#xff0c;我们常常需要监控系统运行状态、优化性能或排查网络问题。最近发现一款名为小贝加速的桌面工具&#xff0c;在此分享关于小贝加速如何实现网络监控。 系统优化 该工具提供了简洁明了的系统优化功能。通过扫描可以清理系统冗余文件、释放内存…...

Nginx 网站服务

目录 一&#xff1a;基于授权的访问控制 1&#xff1a;基于授权的访问控制简介 2&#xff1a;基于授权的访问控制步骤 二&#xff1a;基于客户端的访问控制 1&#xff1a;基于客户端的访问控制简介 2&#xff1a;基于客户端的访问控制步骤 三&#xff1a;Nginx 虚拟主机…...

Python 字典的用法和技巧

字典的创建与初始化 Python 字典是一种可变容器模型&#xff0c;可存储任意类型对象。字典的每个键值对用冒号分隔&#xff0c;键值对之间用逗号分隔&#xff0c;整个字典包括在花括号中。 # 创建一个空字典 empty_dict {}# 创建一个包含键值对的字典 my_dict {name: Alice…...

电力设备制造企业数字化转型路径研究:从生产优化到生态重构

电力设备制造业作为支撑能源革命的核心领域&#xff0c;其数字化转型不仅关乎企业降本增效&#xff0c;更是实现“双碳”目标与新型电力系统建设的关键抓手。本文基于行业标杆案例与实践经验&#xff0c;系统梳理电力设备企业数字化转型的五大核心路径。 一、生产流程智能化&a…...

初识GPU加速:如何利用GPU提升AI训练效率

随着人工智能(AI)和深度学习技术的快速发展,训练深度神经网络(DNN)已经变得越来越复杂和计算密集。传统的CPU已经无法满足大量计算任务的需求,因此,GPU(图形处理单元)成为了训练深度学习模型时的必备工具。本篇文章将介绍如何利用GPU加速AI训练效率,以及在使用GPU时应…...

深入解析异步编程:Java NIO、Python `async/await` 与 C# `async/await` 的对比

在现代编程中&#xff0c;异步编程已成为处理 I/O 密集型任务&#xff08;如网络请求、文件操作等&#xff09;的高效方式。不同的编程语言提供了各自的异步编程模型&#xff0c;以提高程序的性能和资源利用率。本文将深入解析 Java 的 NIO、Python 的 async/await 和 C# 的 as…...

阿里云数据盘级别

数据盘PL0、PL1、PL2和PL3的区别体现在性能、容量范围以及应用场景等方面。具体分析如下&#xff1a; 性能 PL0&#xff1a;单盘最大IOPS为10,000&#xff0c;最大吞吐量为180MB/s。适用于中小型MySQL和SQLServer等数据库场景&#xff0c;中小规模ELK日志集群&#xff0c;SAP和…...

使用 Spring AI Alibaba 集成阿里云百炼大模型应用

随着人工智能技术的飞速发展&#xff0c;大模型在各个领域的应用越来越广泛。阿里云百炼大模型提供了强大的语言理解和生成能力&#xff0c;但如何将其高效地集成到实际应用中&#xff0c;一直是开发者关注的焦点。本文将详细介绍如何使用 Spring AI Alibaba 集成阿里云百炼大模…...

阿里云合集(不定期更新)

一、阿里云申请免费域名证书流程&#xff1a;https://blog.csdn.net/humors221/article/details/143266059 二、阿里云发送国内短信怎样编程&#xff1a;https://blog.csdn.net/humors221/article/details/139544193 三、阿里云ECS服务器磁盘空间不足的几个文件&#xff1a;h…...

零基础设计模式——创建型模式 - 抽象工厂模式

第二部分&#xff1a;创建型模式 - 抽象工厂模式 (Abstract Factory Pattern) 我们已经学习了单例模式&#xff08;保证唯一实例&#xff09;和工厂方法模式&#xff08;延迟创建到子类&#xff09;。现在&#xff0c;我们来探讨创建型模式中更为复杂和强大的一个——抽象工厂…...

ConcurrentHashMap导致的死锁事故

事故现象 某线上服务共100台容器&#xff0c;第二天上午流量高峰期部分容器&#xff08;约10%&#xff09;cpu飙升&#xff0c;升至100%。 部分堆栈信息 堆栈信息如下如所示&#xff1a; 当前线程堆栈显示在JsonContext.get方法中调用computeIfAbsent&#xff0c;其Lambda表…...

Python高效网络爬虫开发指南

Python 网络爬虫入门与实战 一、引言 随着互联网数据的爆炸性增长&#xff0c;获取和分析这些数据变得越来越重要。网络爬虫作为数据采集的重要工具&#xff0c;在这其中扮演了不可或缺的角色。 二、环境搭建 首先我们需要安装Python环境以及一些必要的库&#xff1a; req…...

关于C++使用位运算交换变量值的分析

1、使用临时变量交换 交换变量的值&#xff0c;最常见的方法就是用临时变量。 void swap1(int& a, int& b){int c a;a b;b c; }清晰明了。 2、位运算版 对于整数类型&#xff0c;相信很多人都见过下面方法&#xff0c;可以使用位运算&#xff0c;从而不借用临时…...

06 接口自动化-框架封装思想建立之httprunner框架(下)

文章目录 一、httprunner如何实现数据驱动第一种&#xff1a;直接在脚本里面指定参数列表&#xff0c;最简单。适合于参数比较少的情况。第二种&#xff1a;使用CSV文件&#xff0c;适合于参数比较大的情况。第三种方式&#xff1a;使用函数生成数据&#xff0c;适用于数据变化…...

Dirsearch 深度使用教程:从基础扫描到携带 Cookie 探索网站

在网络安全测试和网站信息收集过程中&#xff0c;Dirsearch 是一款强大的开源工具&#xff0c;能够快速扫描网站&#xff0c;找出潜在的目录和文件。而当面对需要登录才能访问的网站资源时&#xff0c;通过携带 Cookie 扫描&#xff0c;Dirsearch 可以模拟已登录状态&#xff0…...

垃圾回收(GC)基础原理全面解析

掌握 GC 原理,是高效 Java 开发的第一步! 前言 垃圾回收(Garbage Collection,简称 GC)是 Java 的核心优势之一,它让开发者无需手动管理内存,极大降低了内存泄露和悬挂指针的风险。但当应用进入高并发、大数据量的场景时,GC 机制本身反而会成为性能瓶颈。 理解 GC 的原…...

海康NVR录像回放SDK原始流转FLV视频流:基于Java的流媒体转码(无需安装第三方插件ffmpeg)

wlinker-video-monitor 代码地址&#xff1a;https://gitee.com/wlinker/wlinker-video-monitor 背景与需求 在安防监控、智能楼宇等场景中&#xff0c;海康威视设备作为行业主流硬件&#xff0c;常需要将录像回放功能集成到Web系统中。然而&#xff0c;海康设备的原始视频流…...

【项目】SpringBoot +MybatisPlus集成多数据源

引言 应项目需求&#xff0c;需要引入另外的Mysql数据库&#xff0c;但是项目已经引入一个Mysql&#xff0c;这时有几种方案 通过Dynamic-DataSource 框架&#xff0c;无缝集成 但是是动态切换数据源的&#xff0c;跟项目需求不符合&#xff0c;于是采取第二种通过自定义数据…...

Suricata 3规则介绍、以及使用

列出更新源列表&#xff08;有好多个规则源&#xff0c;后面有介绍的&#xff09; suricata-update list-sourcesName: sslbl/ja3-fingerprintsVendor: Abuse.chSummary: Abuse.ch Suricata JA3 Fingerprint RulesetLicense: CC0-1.0 Name: malsilo/win-malwareVendor: malsil…...

基于OpenCV的物体跟踪:CSRT算法

文章目录 引言一、系统概述二、CSRT算法简介三、核心代码解析1. 初始化跟踪器和摄像头2. 主循环结构3. 目标选择与跟踪初始化4. 目标跟踪与结果显示5. 资源释放 四、系统使用说明五、完整代码六、总结 引言 目标跟踪是计算机视觉领域的重要应用之一&#xff0c;广泛应用于视频…...

面向未来,遨游推出5G-A智能防爆对讲机等系列终端

从5G扬帆到5G-A启航&#xff0c;遨游通讯始终立于技术潮头。在通信技术加速向5G-A演进的关键节点&#xff0c;遨游通讯旗舰产品AORO M6 Pro智能防爆对讲机&#xff0c;不仅实现了芯片到系统架构的全面自主可控&#xff0c;更通过5G-A技术的高速率、低时延、广连接与通感一体能力…...

qt浏览文件支持惯性

#include <QApplication> #include <QListWidget> #include <QScroller> #include <QScrollerProperties>int main(int argc, char *argv[]) {QApplication app(argc, argv);// 创建列表控件并添加示例项QListWidget listWidget;for (int i 0; i <…...

算子窗口操作

抠图 (提取图像感兴趣的区域) * 使用halcon 抠图* 窗体属性设设置: 设置窗体绘制图案的模式 magrin边框模式(只有一个边框) * fill填充模式(边框内部会有一个遮罩层) dev_set_draw (fill)* 设置颜色 dev_set_color (green) * 设置线宽dev_set_line_width (5)read_image (Im…...

如何提灯验车

✅ 重点  车标倾斜特别严重  导航定位不准  发动机顿挫异响  自动门把手关闭时异响  底盘有划痕和主驾位与扶手箱位置间隙过小磨损  蓝牙钥匙解锁异常&#xff0c;开关解锁不灵敏  空调无法制冷  灯罩有划痕  开启大灯就有嗡嗡嗡的异响 ✅ 一、文件与证件检…...

人工智能在生物医学研究中的创新应用

随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;其在生物医学领域的应用逐渐成为研究热点。AI不仅为生物医学研究提供了强大的工具&#xff0c;还在疾病诊断、药物研发、基因编辑等方面展现出巨大的潜力。本文将探讨人工智能在生物医学研究中的创新应用&…...

迁移学习实战:用预训练模型解决小样本图像分类

🚀 迁移学习实战:用预训练模型解决小样本图像分类(PyTorch实现) 当我们没有成千上万的训练样本时,如何训练一个表现良好的图像分类模型?答案是——迁移学习。本篇将带你用 PyTorch 快速上手迁移学习,用预训练模型(如 ResNet18)解决小样本分类问题。 🧠 一、什么是迁…...

html,js获取扫码设备的输入内容

<script type"text/javascript"><!-- window.onload function () {// 获取扫描的二维码内容 var code ""; var lastTime, nextTime; var lastCode, nextCode; document.onkeypress function (e) { nextCode e.which; ne…...

项目执行中缺乏风险管理,如何预防潜在问题?

要预防潜在问题&#xff0c;必须在项目执行中融入建立全面的风险识别机制、制定应对策略、实施动态监控、强化团队风险意识、定期评估与复盘。其中&#xff0c;建立全面的风险识别机制至关重要。项目初期若未进行系统性的风险识别&#xff0c;就很难在项目过程中及时应对变化&a…...

树形展示三级分类数据

vue3 实现多级分类_产品设计 平台端添加多个二级三级分类的页面-CSDN博客...

大模型如何助力数学可视化?

大家好&#xff0c;我是 i 学习的老章 在数学学习和教学中&#xff0c;将抽象概念可视化对于理解至关重要。Manim 是一个强大的数学动画引擎&#xff0c;由著名数学科普视频作者 3Blue1Brown 开发并广为人知。 老章较早之前就介绍过 manim&#xff1a;B 站上爆红的数学视频&a…...

什么是endpoints?

在 Kubernetes 中&#xff0c;Endpoints 是一个资源对象&#xff0c;它表示服务&#xff08;Service&#xff09;到 Pod 的网络连接。 Endpoints 的主要作用是将服务的虚拟 IP 地址映射到实际的 Pod IP 地址&#xff0c;从而实现服务发现和负载均衡。 1.Endpoints 的作用 服务…...

基于 Redis 实现短信验证码登录功能的完整方案

&#x1f9f1; 一、技术栈与依赖配置 使用 Spring Boot Redis 实现短信验证码登录&#xff0c;以下是推荐的 Maven 依赖&#xff1a; <dependencies><!-- Spring Boot Web --><dependency><groupId>org.springframework.boot</groupId><ar…...

监控易一体化运维:拥有全部核心技术,助力国产化信创运维

在数字化转型浪潮与信创产业蓬勃发展的当下&#xff0c;企业对运维系统的要求愈发严苛。随着数字化领域的巨大变迁&#xff0c;一款强大且适配信创环境的运维系统对企业的重要性不言而喻。今天&#xff0c;让我们一同深度剖析监控易系统在信创领域展现出的卓越优势。 信创产业&…...

微 PE , USM 魔术师两款 PE 对比

微 PE 和 USM 魔术师两款 PE 各有特点&#xff1a; 纯净度 微 PE&#xff1a;没有植入强制性、商业性软件和链接&#xff0c;也没有病毒和木马&#xff0c;非常纯净。USM 魔术师&#xff1a;同样无广告、无流氓、无捆绑、无后门&#xff0c;从官方途径下载能保证纯净度。 功能…...

测试模版1

本篇技术博文摘要 &#x1f31f; 引言 &#x1f4d8; 在这个变幻莫测、快速发展的技术时代&#xff0c;与时俱进是每个IT工程师的必修课。我是盛透侧视攻城狮&#xff0c;一名什么都会一丢丢的网络安全工程师&#xff0c;也是众多技术社区的活跃成员以及多家大厂官方认可人员&a…...

elementUI 中el-date-picker和el-select的样式调整

1. el-date-picker <el-date-picker class"select1" size"small" v-model"timeRangeArr" type"daterange" align"right" unlink-panels range-separator"至" start-placeholder"开始日期" end-pla…...

基于亚马逊云科技构建音视频直播审核方案

1. 前言 随着互联网内容形态的多样化发展&#xff0c;用户生成内容&#xff08;UGC&#xff09;呈现爆发式增长。社交平台、直播、短视频、语聊房等应用场景中&#xff0c;海量的音视频内容需要进行实时审核&#xff0c;以维护平台安全与用户体验。 然而&#xff0c;企业在构…...

Vue3 组件之间传值

在 Vue3 中&#xff0c;组件之间的数据传递主要有以下几种方式&#xff0c;适用于不同的场景&#xff1a; 一、父组件向子组件传值&#xff1a;props 1. 子组件定义 props <!-- ChildComponent.vue --> <script setup> // 组合式 API&#xff08;推荐&#xff09…...