vue中或者react中的excel导入和导出

excel导入和导出是后台管理系统常见的功能。

       当我们把信息化系统给用户使用时，用户经常需要把以前在excel里录入的数据导入的信息化系统里，这样为用户提供了很大的方便。

        在用户使用信息化系统时，也需要把网页表格里的数据导出到excel里，方便进行打印，排版等等。

一、安装依赖的模块：

1、file-saver 用于文件操作

2、xlsx用于excel文件处

npm i xlsx@0.17.0 -Snpm i file-saver@2.0.5 -S

二、导出功能实现

在自己的项目中新建一个js文件模块。放入如下代码：

1、使用dom元素导出
// 1、根据dom元素导出成excel文件：// 自动分析dom元素导出excel
// 参数：
// table：表格的dom元素对象
// filename：导出的文件名（不用写扩展名）
export function excelExport(table, filename) {// workbook,const wb = XLSX.utils.table_to_book(table);console.log("wb", wb);/* Export to file (start a download) */const defaultCellStyle = {font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },fill: { fgColor: { rgb: 'FFFFAA00' } },}const wopts = {bookType: 'xlsx',bookSST: false,type: 'binary',cellStyle: true,defaultCellStyle: defaultCellStyle,showGridLines: false,}const wbout = XLSX.write(wb, wopts)const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })saveAs(blob, filename + '.xlsx')
}function s2ab(s) {console.log("s", s);var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) {view[i] = s.charCodeAt(i) & 0xFF;}return buf;
}

调用示例：

excelExport(document.getElementById("t2"), "student");// t2是一个table标签的id。其实是包含表格标签的id，会自动分析的。
2、使用json数组数据导出

// 2、根据json数据（数组）导出成excel文件：// 参数：
// data：json数组
// headers：excel的表头
// filename：导出的文件名（不用写扩展名）
export function excelExportUseJson(data, headers, filename) {// 使用深克隆不影响原table数据的展示const json = cloneDeep(data)json.forEach(item => {for (let key in item) {if (headers.hasOwnProperty(key)) {item[headers[key]] = item[key]}delete item[key]}})// excel 对象const wb = XLSX.utils.book_new()// 创建sheetconst ws = XLSX.utils.json_to_sheet(json, { header: Object.values(headers) })// excel 添加sheet名称wb.SheetNames.push(filename)// excel 添加sheetwb.Sheets[filename] = wsconst defaultCellStyle = {font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },fill: { fgColor: { rgb: 'FFFFAA00' } },}const wopts = {bookType: 'xlsx',bookSST: false,type: 'binary',cellStyle: true,defaultCellStyle: defaultCellStyle,showGridLines: false,}const wbout = XLSX.write(wb, wopts)const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })saveAs(blob, filename + '.xlsx')
}function cloneDeep(obj) {if (typeof obj !== 'object' || obj === null) {return obj;}let clonedObj = Array.isArray(obj) ? [] : {};for (let key in obj) {if (obj.hasOwnProperty(key)) {clonedObj[key] = cloneDeep(obj[key]);}}return clonedObj;
}

调用示例：
 

调用示例：const books = [​    {​      id:"878911",​      name:"三国演义"​    },     ​    {​      id:"878912",​      name:"西游记"​    }]excelExportUseJson(books,{id:"编号",name:"书名"},"student02");

三、导入功能实现


// 1、导入成dom元素：// 参数：
// data：文件对象（用<input type=file /> 选择到file对象
// domId：导入的excel显示的容器export function httpRequestToHTML(data, domId) {const file = dataconst types = file.name.split('.')[1]const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some((item) => item === types)if (!fileType) {this.$message.error('格式错误！请重新选择')return}const reader = new FileReader()reader.readAsArrayBuffer(file, 'utf-8');return new Promise(function (resolve, reject) {reader.onloadend = function (e) {const data = e.target.resultconsole.log('data', data)const wb = XLSX.read(data, {type: 'buffer'})const ws = wb.Sheets[wb.SheetNames[0]]console.log('ws', ws)const htmlStr = XLSX.utils.sheet_to_html(ws)resolve(htmlStr); }});
}// 2、导入成json数据。
// 参数：
// data：文件对象（用<input type=file /> 选择到file对象export function httpRequestToJSON(data) {const file = dataconst types = file.name.split('.')[1]const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some((item) => item === types)if (!fileType) {this.$message.error('格式错误！请重新选择')return}const reader = new FileReader()reader.readAsArrayBuffer(file, 'utf-8');return new Promise(function (resolve, reject) {reader.onloadend = function (e) {const data = e.target.resultconsole.log('data', data)const wb = XLSX.read(data, {type: 'buffer'})const ws = wb.Sheets[wb.SheetNames[0]]let arr = XLSX.utils.sheet_to_json(ws);resolve(arr);}});
}// 封装：把excel转成html或者json。
// 参数：
//    file:(excel)文件对象
//    outtype:是导出的类型(取值：html，json)// 调用示例：
// excelTo(文件对象，"html")
// excelTo(文件对象，"json")
export function excelImport(file,outtype="json") {const types = file.name.split('.')[1]const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some((item) => item === types)if (!fileType) {this.$message.error('格式错误！请重新选择')return}const reader = new FileReader()reader.readAsArrayBuffer(file, 'utf-8');return new Promise(function (resolve, reject) {reader.onloadend = function (e) {const data = e.target.resultconsole.log('data', data)const wb = XLSX.read(data, {type: 'buffer'})const ws = wb.Sheets[wb.SheetNames[0]];let result = "";switch(outtype.toLocaleLowerCase()){case "html":result = XLSX.utils.sheet_to_html(ws);break;case "json":result = XLSX.utils.sheet_to_json(ws);break;default:this.$message.error('输出类型错误，只能取值为 html或者json')}resolve(result);}});
}

调用示例：

const importFn=(e)=>{if(e.target.files && e.target.files.length>0){httpRequestToHTML(e.target.files[0],"TableContainer")}
}<input type="file" onChange={importFn} />
<div id="TableContainer"></div>

四、如果想看完整代码的，在下面：

1、导入导出的工具库：excelUtils.js
// 此工具库是：excel的导入和导出import * as XLSX from 'xlsx';
// import * as fs from 'file-saver';
import { saveAs } from "file-saver"// 一、excel的导出：
// 1、根据dom元素导出成excel文件：// 自动分析dom元素导出excel
// 参数：
// table：表格的dom元素对象
// filename：导出的文件名（不用写扩展名）
export function excelExport(table, filename) {// workbook,const wb = XLSX.utils.table_to_book(table);console.log("wb", wb);/* Export to file (start a download) */const defaultCellStyle = {font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },fill: { fgColor: { rgb: 'FFFFAA00' } },}const wopts = {bookType: 'xlsx',bookSST: false,type: 'binary',cellStyle: true,defaultCellStyle: defaultCellStyle,showGridLines: false,}const wbout = XLSX.write(wb, wopts)const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })saveAs(blob, filename + '.xlsx')
}function s2ab(s) {console.log("s", s);var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) {view[i] = s.charCodeAt(i) & 0xFF;}return buf;
}// 2、根据json数据（数组）导出成excel文件：// 参数：
// data：json数组
// headers：excel的表头
// filename：导出的文件名（不用写扩展名）
export function excelExportUseJson(data, headers, filename) {// 使用深克隆不影响原table数据的展示const json = cloneDeep(data)json.forEach(item => {for (let key in item) {if (headers.hasOwnProperty(key)) {item[headers[key]] = item[key]}delete item[key]}})// excel 对象const wb = XLSX.utils.book_new()// 创建sheetconst ws = XLSX.utils.json_to_sheet(json, { header: Object.values(headers) })// excel 添加sheet名称wb.SheetNames.push(filename)// excel 添加sheetwb.Sheets[filename] = wsconst defaultCellStyle = {font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },fill: { fgColor: { rgb: 'FFFFAA00' } },}const wopts = {bookType: 'xlsx',bookSST: false,type: 'binary',cellStyle: true,defaultCellStyle: defaultCellStyle,showGridLines: false,}const wbout = XLSX.write(wb, wopts)const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })saveAs(blob, filename + '.xlsx')
}function cloneDeep(obj) {if (typeof obj !== 'object' || obj === null) {return obj;}let clonedObj = Array.isArray(obj) ? [] : {};for (let key in obj) {if (obj.hasOwnProperty(key)) {clonedObj[key] = cloneDeep(obj[key]);}}return clonedObj;
}// 二、从excel文件导入到项目里。// 1、导入成dom元素：// 参数：
// data：文件对象（用<input type=file /> 选择到file对象
// domId：导入的excel显示的容器export function httpRequestToHTML(data, domId) {const file = dataconst types = file.name.split('.')[1]const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some((item) => item === types)if (!fileType) {this.$message.error('格式错误！请重新选择')return}const reader = new FileReader()reader.readAsArrayBuffer(file, 'utf-8');return new Promise(function (resolve, reject) {reader.onloadend = function (e) {const data = e.target.resultconsole.log('data', data)const wb = XLSX.read(data, {type: 'buffer'})const ws = wb.Sheets[wb.SheetNames[0]]console.log('ws', ws)const htmlStr = XLSX.utils.sheet_to_html(ws)resolve(htmlStr); }});
}// 2、导入成json数据。
// 参数：
// data：文件对象（用<input type=file /> 选择到file对象export function httpRequestToJSON(data) {const file = dataconst types = file.name.split('.')[1]const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some((item) => item === types)if (!fileType) {this.$message.error('格式错误！请重新选择')return}const reader = new FileReader()reader.readAsArrayBuffer(file, 'utf-8');return new Promise(function (resolve, reject) {reader.onloadend = function (e) {const data = e.target.resultconsole.log('data', data)const wb = XLSX.read(data, {type: 'buffer'})const ws = wb.Sheets[wb.SheetNames[0]]let arr = XLSX.utils.sheet_to_json(ws);resolve(arr);}});
}// 封装：把excel转成html或者json。
// 参数：
//    file:(excel)文件对象
//    outtype:是导出的类型(取值：html，json)// 调用示例：
// excelTo(文件对象，"html")
// excelTo(文件对象，"json")
export function excelImport(file,outtype="json") {const types = file.name.split('.')[1]const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some((item) => item === types)if (!fileType) {this.$message.error('格式错误！请重新选择')return}const reader = new FileReader()reader.readAsArrayBuffer(file, 'utf-8');return new Promise(function (resolve, reject) {reader.onloadend = function (e) {const data = e.target.resultconsole.log('data', data)const wb = XLSX.read(data, {type: 'buffer'})const ws = wb.Sheets[wb.SheetNames[0]];let result = "";switch(outtype.toLocaleLowerCase()){case "html":result = XLSX.utils.sheet_to_html(ws);break;case "json":result = XLSX.utils.sheet_to_json(ws);break;default:this.$message.error('输出类型错误，只能取值为 html或者json')}resolve(result);}});
}
2、组件代码：
<template><el-button @click="drawer = true" v-if="crud.charAt(0) === '1'">添加轮播图</el-button><el-button @click="toExcel01">excel导出(用dom元素)</el-button><el-button @click="toExcel02">excel导出(用json数组)</el-button><!-- <el-button @click="fromExcel">excel导入</el-button> --><!-- <input type="file" @change="fromExcel" /> --><el-upload ref="upload" class="upload-demo" :limit="1" :on-change="changeFn" :on-exceed="handleExceed" :auto-upload="false" :show-file-list="false"><template #trigger><el-button type="primary">excel导入</el-button></template></el-upload><el-button @click="batchSave">批量提交</el-button><el-button @click="clearAll">清空轮播图数据</el-button><el-divider /><el-table ref="table" id="table01" :data="bannerList" height="600px" style="width: 100%"><el-table-column prop="bannerid" label="编号" width="180" /><el-table-column label="图片" width="180"><template #default="scope"><img class="img" :src="scope.row.img" /></template></el-table-column><el-table-column label="是否启用" v-if="crud.charAt(2) === '1'"><template #default="scope"><el-switch v-model="scope.row.flag" /></template></el-table-column><el-table-column label="跳转连接"><template #default="scope"><el-link :href="scope.row.link" type="primary" target="_blank">跳转连接</el-link></template></el-table-column><el-table-column prop="alt" label="图片提示" /><el-table-column label="操作" v-if="crud.charAt(2) === '1' || crud.charAt(3) === '1'"><template #default="scope"><el-button type="danger" v-if="crud.charAt(3) === '1'" >删除</el-button><el-button type="danger" v-if="crud.charAt(2) === '1'">修改</el-button></template></el-table-column></el-table><el-drawer v-model="drawer" title="添加轮播图" direction="rtl" :before-close="handleClose"><AddBannerVue ref="addBannerRef" @ok="okHandle" @cancel="closeDrawer"></AddBannerVue></el-drawer><hr /><div id="container"></div>
</template><script lang="ts" setup>
import { useRoute } from "vue-router";
import { getBannerApi, addBannerApi,clearBannerApi } from "@/api/banner";
import { onMounted, reactive, ref } from "vue";
import { ElMessageBox } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile,UploadFile } from 'element-plus'
import AddBannerVue from "./AddBanner.vue";
import type { IBanner } from "@/myTypes"
import { excelExport, excelExportUseJson, excelImport } from "@/utils/excelUtils";const $route = useRoute();//this.$routeconst crud: string = $route.meta.crud as string;const bannerList = reactive<Array<IBanner>>([]);// 清空轮播图const clearAll=()=>{clearBannerApi().then(res=>{if(res.data.code==="200"){ElMessageBox.alert("清空成功", "提示", {confirmButtonText: "确定",callback: () => {getBannerList();}});}}).catch(err=>{console.log("清空失败",err);})
}// 获取轮播图的数据
function getBannerList() {getBannerApi().then(res => {if (res.data.code === "200") {bannerList.length = 0;bannerList.push(...res.data.data);}}).catch(err => {console.log("获取轮播图失败，err", err);})
}// 在初次渲染完毕后，获取轮播图数据
// onMounted(()=>getBannerList());
getBannerList();// 添加相关：
// 
const drawer = ref(false);function okHandle() {closeDrawer();getBannerList();
}// 关闭抽屉
const closeDrawer = () => {drawer.value = false;
}const addBannerRef = ref();const handleClose = (done: () => void) => {ElMessageBox.confirm('亲，您真的要关闭吗？').then(() => {console.log("点了确定");addBannerRef.value.clearData();done();}).catch(() => {// catch errorconsole.log("点了取消");})
}onMounted(() => console.log("父组件：mounted"))const toExcel01 = () => {excelExport(document.getElementById("table01"), "banners");
}const toExcel02 = () => {// const arr = bannerList.map(item => ({//     bannerid: item.bannerid,//     img: item.img,//     flag: item.flag ? "是" : "否"// }))// excelExportUseJson(arr, {//     bannerid: "编号",//     img: "图片",//     flag: "是否启用"// }, "bannerList");excelExportUseJson(bannerList, {bannerid: "编号",img: "图片",flag: "是否启用",link: "跳转连接",alt: "图片提示"}, "bannerList");
}// 从excel文件中导入
const fromExcel = (e: any) => {if (e.target.files && e.target.files.length > 0) {excelImport(e.target.files[0],).then((arr: any) => {bannerList.length = 0;arr.forEach((item: any) => {bannerList.push({bannerid: item["编号"],img: item["图片"],flag: item["是否启用"],link: item["跳转连接"],alt: item["图片提示"]});})})}
}function batchSave() {let count = 0;bannerList.forEach((item: any) => {addBannerApi(item).then(() => {console.log(`添加成功了${++count}条`);})})
}const upload = ref<UploadInstance>();const handleExceed: UploadProps['onExceed'] = (files) => {upload.value!.clearFiles()const file = files[0] as UploadRawFileupload.value!.handleStart(file);
}const changeFn=(file:UploadFile)=>{console.log("excelImport:file",file);excelImport(file.raw as File).then((arr: any) => {bannerList.length = 0;arr.forEach((item: any) => {bannerList.push({bannerid: item["编号"],img: item["图片"],flag: item["是否启用"],link: item["跳转连接"],alt: item["图片提示"]});})})}</script><style lang="scss" scoped>
.img {width: 100%;height: 100px;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/141996.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

计算机竞赛 深度学习乳腺癌分类

计算机竞赛 深度学习乳腺癌分类

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…
阅读更多...
构建自己的物料解决方案——构建物料库，实现前端设计

构建自己的物料解决方案——构建物料库，实现前端设计

01: 数据拦截简化数据获取流程 /** * 响应拦截器&#xff1a; * 服务端返回数据之后&#xff0c;前端 .then 之前被调用 */ service.interceptors.response.use((response) > {const { success, message, data } response.dataif (success) {return data}// TODO&#xff…
阅读更多...
法规标准-UN R48标准解读

法规标准-UN R48标准解读

UN R48是做什么的&#xff1f; UN R48全名为关于安装照明和灯光标志装置的车辆认证的统一规定&#xff0c;主要描述了对各类灯具的布置要求及性能要求&#xff1b;其中涉及自动驾驶功能的仅有6.25章节【后方碰撞预警信号】&#xff0c;因此本文仅对此章节进行解读 功能要求 …
阅读更多...
Python中的设计模式 -- 单例

Python中的设计模式 -- 单例

迷途小书童 读完需要 2分钟 速读仅需 1 分钟 当我们谈到单例模式时&#xff0c;可以想象一个非常特殊的餐厅&#xff0c;这个餐厅只有一个桌子&#xff0c;无论多少人来用餐&#xff0c;都只能坐在这个桌子上。这个桌子就是餐厅的单例&#xff0c;它保证了整个餐厅中只有一个桌…
阅读更多...
Element登录+注册

Element登录+注册

Element登录注册 1.1 定义1.3 完成用户注册登录界面搭建1.3.3 下载js依赖1.3.4 创建用户登录注册组件1.3.5 配置路由 二、数据交互2.1 数据导入2.3 安装引用相关模块 2.3.1 安装相关模块2.3.2 引用相关模块2.4 axios之get请求2.5 axios之post请求 四、注册 1.1 定义 ElementUI是…
阅读更多...
bash中执行比较的几种方法

bash中执行比较的几种方法

bash 脚本中的 test 命令用于检查表达式的有效性&#xff0c;检查命令或表达式为 true 或者 false。此外&#xff0c;它还可以用于检查文件的类型和权限。 如果命令或表达式有效&#xff0c;则 test 命令返回0&#xff0c;否则返回1。 使用 test 命令 test 命令的基本语法如…
阅读更多...
腾讯mini项目-【指标监控服务重构】2023-08-29

腾讯mini项目-【指标监控服务重构】2023-08-29

今日已办 Collector 指标聚合 由于没有找到 Prometheus 官方提供的可以聚合指定时间区间内的聚合函数&#xff0c;所以自己对接Prometheus的api来聚合指定容器的cpu_avg、cpu_99th、mem_avg 实现成功后对接小组成员测试完提供的时间序列和相关容器&#xff0c;将数据记录在表格…
阅读更多...
Qt/C++音视频开发56-udp推流和拉流/组播和单播推流

Qt/C++音视频开发56-udp推流和拉流/组播和单播推流

一、前言 之前已经实现了rtsp/rtmp推流&#xff0c;rtsp/rtmp/hls/flv/ws-flv/webrtc等拉流&#xff0c;这种一般都需要依赖一个独立的流媒体服务程序&#xff0c;有没有一种更便捷的方式不需要这种依赖&#xff0c;然后又能实现推拉流呢&#xff0c;当然有的那就是udpp推流&a…
阅读更多...
前端项目练习（练习-004-webpack-02）

前端项目练习（练习-004-webpack-02）

学习前&#xff0c;首先&#xff0c;创建一个web-004项目&#xff0c;内容和web-003一样。&#xff08;注意将package.json中的name改为web-004&#xff09; 前面的例子&#xff0c;成功将js文件打包到了dist中&#xff0c;但是我们有三个文件&#xff0c;css&#xff0c;js和h…
阅读更多...
利用C++开发一个迷你的英文单词录入和测试小程序-增强功能

利用C++开发一个迷你的英文单词录入和测试小程序-增强功能

小玩具基本完成之后&#xff0c;在日常工作中&#xff0c;记录一些单词&#xff0c;然后定时再复习下&#xff0c;还真的有那么一点点用&#xff08;毕竟自己做的小玩具&#xff09;。 在使用过程中&#xff0c;遇到不认识的单词&#xff0c;总去翻译软件翻译&#xff0c;然后…
阅读更多...
使用matlab产生二维动态曲线视频文件具体举例

使用matlab产生二维动态曲线视频文件具体举例

使用matlab产生二维动态曲线视频文件举例 在进行有些函数变化过程时候&#xff0c;需要用到直观的动态显示&#xff0c;本博文将举例说明利用Matlab编程进行二维动态曲线的生成视频文件。 一、问题描述 利用matlab编程实现 y 1 s i n ( t ) , y 2 c o s ( t ) , y 3 s i …
阅读更多...
安卓生成公钥和md5签名

安卓生成公钥和md5签名

安卓公钥和md5证书签名 大家好&#xff0c;最近需要备案app&#xff0c;用到了公钥和md5&#xff0c;MD5签名我倒是知道&#xff0c;然而对于公钥却一下子不知道了&#xff0c; 现在我讲一下我的流程。 首先是md5证书签名的查看&#xff0c; 生成了apk和签名.jks后&…
阅读更多...
3D设计软件Rhinoceros 6 mac 犀牛6中文版功能特征

3D设计软件Rhinoceros 6 mac 犀牛6中文版功能特征

Rhinoceros Mac中文版是一款3D设计软件“犀牛”&#xff0c;在众多三维建模软件中&#xff0c;Rhinoceros mac因为其体积小、功能强大、对硬件要求低而广受欢迎&#xff0c;对于专业的3D设计人员来说它是一款非常不错的3D建模软件&#xff0c;Rhinoceros Mac中文版能轻易整合3D…
阅读更多...
tensorflow-卷积神经网络-图像分类入门demo

tensorflow-卷积神经网络-图像分类入门demo

猫狗识别 数据预处理&#xff1a;图像数据处理&#xff0c;准备训练和验证数据集卷积网络模型&#xff1a;构建网络架构过拟合问题&#xff1a;观察训练和验证效果&#xff0c;针对过拟合问题提出解决方法数据增强&#xff1a;图像数据增强方法与效果迁移学习&#xff1a;深度…
阅读更多...
DAZ To UMA⭐三.导入Blender的配置, 及Blender快捷键

DAZ To UMA⭐三.导入Blender的配置, 及Blender快捷键

文章目录 🟥 Blender快捷键1️⃣ 3D视图快捷键2️⃣ 视角快捷键3️⃣ 编辑快捷键4️⃣ 对物体的操作🟧 Blender导入FBX的配置🟩 设置脸部骨骼大小1️⃣ 切换视角2️⃣ 缩小脸部骨骼3️⃣ 本节效果预览🟦 设置眼角膜透明度🟥 Blender快捷键 1️⃣ 3D视图快捷键 快捷键…
阅读更多...
【C语言】进阶——结构体+枚举+联合

【C语言】进阶——结构体+枚举+联合

①前言&#xff1a; 在之前【C语言】初阶——结构体 &#xff0c;简单介绍了结构体。而C语言中结构体的内容还有更深层次的内容。 一.结构体 结构体(struct)是由一系列具有相同类型或不同类型的数据项构成的数据集合&#xff0c;这些数据项称为结构体的成员。 1.结构体的声明 …
阅读更多...
CSS实现鼠标悬停图片上升显示

CSS实现鼠标悬停图片上升显示

文章目录 前言一、实现效果二、实现思路 前言 当我们想在图片上面放置一些文字内容时&#xff0c;发现不管怎么放置&#xff0c;要么就是图片影响到文字的观感&#xff0c;要么就是文字挡住图片的细节&#xff0c;那么怎么可以既看到图片的细节又可以看到对图片的文字描述呢&a…
阅读更多...
mysqld_exporter监控MySQL服务

mysqld_exporter监控MySQL服务

一、MySQL授权 1、登录MySQL服务器对监控使用的账号授权 CREATE USER exporterlocalhost IDENTIFIED BY 123456 WITH MAX_USER_CONNECTIONS 3; GRANT PROCESS, REPLICATION CLIENT, SELECT ON *.* TO exporterlocalhost; flush privileges;2、上传mysqld_exporter安装包&#…
阅读更多...
springboot整合MeiliSearch轻量级搜索引擎

springboot整合MeiliSearch轻量级搜索引擎

一、Meilisearch与Easy Search点击进入官网了解&#xff0c;本文主要从小微型公司业务出发&#xff0c;选择meilisearch来作为项目的全文搜索引擎&#xff0c;还可以当成来mongodb来使用。 二、starter封装 1、项目结构展示 2、引入依赖包 <dependencies><dependenc…
阅读更多...
基于图像形态学处理的路面裂缝检测算法matlab仿真

基于图像形态学处理的路面裂缝检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ...................................................... %1&#xff1a;从文件夹中读取多个…
阅读更多...
最新文章

Copyright @ 2022~2023