手摸手教你前端和后端是如何实现导出 Excel 的？

前言

大家好呀，我是雪荷。在上篇文章（EasyExcel 初使用—— Java 实现多种写入 Excel 功能-CSDN博客）中给大家介绍了 Java 是如何写入 Excel 的，那么这篇算是对上篇文章的拓展，主要介绍前端和后端分别是如何导出数据至 Excel 的。

前端导出 Excel

我就用之前比赛的项目给大家演示吧，其组件库为 Ant Design Vue，框架为 Vue3，使用的第三方库为 XLSX。整体的实现并不困难只需写两个函数即可，话不多说直接上代码。

安装命令

npm install XLSX

引入 XLSX

import * as XLSX from 'xlsx';

vue 的 template 部分

<template><a-tableid="table-data"style="margin-top: 30px;":columns="columns":dataSource="data"class="antv-table"></a-table><a-button type="primary" @click="exportTableData">导出表格数据</a-button><a-button type="primary" @click="downloadExcel">Excel下载</a-button><a-button type="primary" @click="exportData">导出数据</a-button>
​
</template>

ts 导出 Excel 代码

// 将 Table 组件的数据转为 Excel 数据
const transData = (columns: any, tableList: any) => {const obj = columns.reduce((acc, cur) => {if (!acc.titles && !acc.keys) {acc.titles = [];acc.keys = [];}acc.titles.push(cur.title);acc.keys.push(cur.dataIndex);return acc;}, {});const tableBody = tableList.map(item => {return obj.keys.map(key => item[key]);});return [obj.titles, ...tableBody];
};
​
// 将数据写入 Excel 文件
const exportTableData = () => {const tableData = transData(columns,data.value);// 将一组 JS 数据数组转换为工作表const ws = XLSX.utils.aoa_to_sheet(tableData);// 创建 workbookconst wb = XLSX.utils.book_new();// 将 工作表 添加到 workbookXLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 将 workbook 写入文件XLSX.writeFile(wb, '销售数据.xlsx');
};

ts 请求后端接口代码

watchEffect(async () => {const res: any = await myAxios.post('/sale/data/list',);if (res?.code === 0) {data.value = res.data.map((item: SaleData, index: number) => ({key: index,id: item.id,name: item.name,price: item.price,totalNum: item.totalNum,userId: item.userId,datetime: item.datetime,}));} else {message.error('数据获取失败');}
});

后端代码

Controller 层：

 @PostMapping("/data/list")public BaseResponse<List<SaleData>> listSaleData() {List<SaleData> list = new ArrayList<>();list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L,"2024-01-01 13:00:00"));list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L,"2025-01-01 13:00:00"));list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L,"2024-03-01 13:00:00"));list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L,"2024-02-01 13:00:00"));return ResultUtils.success(list);}

SaleData：

@Data
@AllArgsConstructor
public class SaleData implements Serializable {
​@ExcelProperty("订单号")private Long id;
​@ExcelProperty("品种")private String name;
​@ExcelProperty("价格")private BigDecimal price;
​@ExcelProperty("数量")private Integer totalNum;
​@ExcelProperty("交易对象")private Long userId;
​@ExcelProperty("交易时间")private String datetime;
}

前端导出主要是通过 XLSX 这个库实现的，其根据 Ant Design 的 Table 组件的 columns 属性和后端返回的 List 构建成了一个 Excel 文件，最后利用 writeFile 方法导出 Excel 文件。

点击“导出表格数据”按钮，可以看到数据已导出至 Excel 中了。

image-20240729195452336

d0b3d3225e8f16c4acde85a471d64f6

优点：简单，便捷

缺点：

  1. 不灵活，不适合非固定表头和复杂的表头

  2. 前端导出不适合数据量大的场景，因为页面会卡死

后端导出 Excel

据我了解的后端实现导出 Excel 的功能主要有两种。一种是将 Excel 写入流中，前端拿到文件流再转为 blob 后进行下载，另一种是将 Excel 文件转为 base64 编码，前端将 base64 编码转为 blob 再下载。由此可见最终都是要转为 blob 的，拿到 blob 就好搞了。

后端将 Excel 写入流中

后端代码

Controller 层：

@PostMapping("/data/download")public void exportSaleDetails(HttpServletResponse response) throws UnsupportedEncodingException {List<SaleData> list = new ArrayList<>();list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L, "2024-01-01 13:00:00"));list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L, "2025-01-01 13:00:00"));list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L, "2024-03-01 13:00:00"));list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L, "2024-02-01 13:00:00"));
​// 设置响应头信息response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8");
​String fileName = "销售数据1.xlsx";response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName);
​// 写出Excel文件到响应try {EasyExcel.write(response.getOutputStream(), SaleData.class).sheet("合伙人业务订单").doWrite(list);} catch (IOException e) {e.printStackTrace();}}

ts 代码

const downloadExcel = () => {const response = myAxios.post('/sale/data/download', null, {responseType: 'blob',}).then((res) => { // 处理返回的文件流const content = resconst blob = new Blob([content])console.log(content)const fileName = '销售数据.xlsx';if ('download' in document.createElement('a')) { // 非IE下载const elink = document.createElement('a')elink.download = fileNameelink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href) // 释放URL 对象document.body.removeChild(elink)} else { // IE10+下载navigator.msSaveBlob(blob, fileName)}});
};

点击“Excel 下载”按钮导出数据。

219d096f29327fc8e8e9f4c17dabf0d

image-20240729200907785

优点：

  1. 传输效率高，网络负载小

  2. 内存占用，适合传输大文件

缺点：

  1. 会有跨域问题

后端返回 base 64 编码，前端再转为 blob

后端代码

 @PostMapping("/data/export")public BaseResponse<String> exportSaleData() throws UnsupportedEncodingException {List<SaleData> list = new ArrayList<>();list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L, "2024-01-01 13:00:00"));list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L, "2025-01-01 13:00:00"));list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L, "2024-03-01 13:00:00"));list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L, "2024-02-01 13:00:00"));
​// 生成 Excel 文件并转换为 Base64 编码ByteArrayOutputStream outputStream = new ByteArrayOutputStream();EasyExcel.write(outputStream, SaleData.class).sheet("Sheet1").doWrite(list);byte[] bytes = outputStream.toByteArray();String excelBase64 = Base64.getEncoder().encodeToString(bytes);
​// 返回 Base64 编码的 Excel 内容给前端return ResultUtils.success(excelBase64);}

ts 代码

const exportData = async () => {const response: any = await myAxios.post('/sale/data/export');if (response?.code === 0) {const excelBase64 = response.data; // 接收后端返回的 Base64 编码字符串console.log(excelBase64)const blob = b64toBlob(excelBase64, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');const fileName = '销售数据.xlsx';if ('download' in document.createElement('a')) { // 非IE下载const elink = document.createElement('a')elink.download = fileNameelink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href) // 释放URL 对象document.body.removeChild(elink)} else { // IE10+下载navigator.msSaveBlob(blob, fileName)}}
}
​
// 将 Base64 字符串转换为 Blob 对象
function b64toBlob(b64Data, contentType = '', sliceSize = 512) {const byteCharacters = atob(b64Data);const byteArrays = [];for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {const slice = byteCharacters.slice(offset, offset + sliceSize);const byteNumbers = new Array(slice.length);for (let i = 0; i < slice.length; i++) {byteNumbers[i] = slice.charCodeAt(i);}const byteArray = new Uint8Array(byteNumbers);byteArrays.push(byteArray);}return new Blob(byteArrays, {type: contentType});
}

主要分为三个阶段，首先后端将文件写入流中再将流转为 base64 编码返回给前端，第二步前端拿到 base64 编码将其转为 blob，最后根据 blob 进行下载。

点击“导出数据”按钮导出数据。

image-20240729201558898

e3d3341edc8985fd103c87c9dd764cf

优点：

  1. 传输数据是 base64 字符串便于调试

  2. 跨域问题少

缺点：

  1. 内存占用大，适合传输小文件

  2. 传输效率低

全部代码

前端

<!-- eslint-disable vue/multi-word-component-names -->
<template><a-tableid="table-data"style="margin-top: 30px;":columns="columns":dataSource="data"class="antv-table"></a-table>
​<a-button type="primary" @click="exportTableData">导出表格数据</a-button><a-button type="primary" @click="downloadExcel">Excel下载</a-button><a-button type="primary" @click="exportData">导出数据</a-button>
​
</template>
<script setup lang="ts">
import {ref, watchEffect} from "vue";
import myAxios from "@/plugins/myAxios";
import {message, TableColumnsType} from "ant-design-vue";
import * as XLSX from 'xlsx';
​
const columns: TableColumnsType = [{title: '订单号', width: 100, dataIndex: 'id', key: 'id', fixed: 'left'},{title: '品种', dataIndex: 'name', key: 'name', width: 150},{title: '价格', dataIndex: 'price', key: 'price', width: 150},{title: '数量', dataIndex: 'totalNum', key: 'totalNum', width: 150},{title: '交易对象', dataIndex: 'userId', key: 'userId', width: 150},{title: '交易时间', dataIndex: 'datetime', key: 'datetime', width: 150},
];
​
interface SaleData {id: number;name: string;price: number;totalNum: number;userId: number;datetime: string;
}
​
interface DataItem {key: number;id: number;name: string;price: number;totalNum: number;userId: number;datetime: string;
}
​
const data = ref<DataItem[]>([]);
​
watchEffect(async () => {const res: any = await myAxios.post('/sale/data/list',);if (res?.code === 0) {data.value = res.data.map((item: SaleData, index: number) => ({key: index,id: item.id,name: item.name,price: item.price,totalNum: item.totalNum,userId: item.userId,datetime: item.datetime,}));} else {message.error('数据获取失败');}
});
​
const transData = (columns: any, tableList: any) => {const obj = columns.reduce((acc, cur) => {if (!acc.titles && !acc.keys) {acc.titles = [];acc.keys = [];}acc.titles.push(cur.title);acc.keys.push(cur.dataIndex);return acc;}, {});const tableBody = tableList.map(item => {return obj.keys.map(key => item[key]);});return [obj.titles, ...tableBody];
};
​
const exportTableData = () => {const tableData = transData(columns,data.value);// 将一组 JS 数据数组转换为工作表const ws = XLSX.utils.aoa_to_sheet(tableData);// 创建 workbookconst wb = XLSX.utils.book_new();// 将 工作表 添加到 workbookXLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 将 workbook 写入文件XLSX.writeFile(wb, '销售数据.xlsx');
};
​
​
const downloadExcel = () => {const response = myAxios.post('/sale/data/download', null, {responseType: 'blob',}).then((res) => { // 处理返回的文件流const content = resconst blob = new Blob([content])console.log(content)const fileName = '销售数据.xlsx';if ('download' in document.createElement('a')) { // 非IE下载const elink = document.createElement('a')elink.download = fileNameelink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href) // 释放URL 对象document.body.removeChild(elink)} else { // IE10+下载navigator.msSaveBlob(blob, fileName)}});
};
​
const exportData = async () => {const response: any = await myAxios.post('/sale/data/export');if (response?.code === 0) {const excelBase64 = response.data; // 接收后端返回的 Base64 编码字符串console.log(excelBase64)const blob = b64toBlob(excelBase64, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');const fileName = '销售数据.xlsx';if ('download' in document.createElement('a')) { // 非IE下载const elink = document.createElement('a')elink.download = fileNameelink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href) // 释放URL 对象document.body.removeChild(elink)} else { // IE10+下载navigator.msSaveBlob(blob, fileName)}}
}
​
// 将 Base64 字符串转换为 Blob 对象
function b64toBlob(b64Data, contentType = '', sliceSize = 512) {const byteCharacters = atob(b64Data);const byteArrays = [];for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {const slice = byteCharacters.slice(offset, offset + sliceSize);const byteNumbers = new Array(slice.length);for (let i = 0; i < slice.length; i++) {byteNumbers[i] = slice.charCodeAt(i);}const byteArray = new Uint8Array(byteNumbers);byteArrays.push(byteArray);}return new Blob(byteArrays, {type: contentType});
}
​
​
</script>
<style scoped>
​
</style>

后端

Controller 层：

@Slf4j
@RestController
@RequestMapping("/sale")
public class SaleController {    @PostMapping("/data/download")public void exportSaleDetails(HttpServletResponse response) throws UnsupportedEncodingException {List<SaleData> list = new ArrayList<>();list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L, "2024-01-01 13:00:00"));list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L, "2025-01-01 13:00:00"));list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L, "2024-03-01 13:00:00"));list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L, "2024-02-01 13:00:00"));
​// 设置响应头信息response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8");
​String fileName = "销售数据1.xlsx";response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName);
​// 写出Excel文件到响应try {EasyExcel.write(response.getOutputStream(), SaleData.class).sheet("合伙人业务订单").doWrite(list);} catch (IOException e) {e.printStackTrace();}}
​@PostMapping("/data/export")public BaseResponse<String> exportSaleData() throws UnsupportedEncodingException {List<SaleData> list = new ArrayList<>();list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L, "2024-01-01 13:00:00"));list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L, "2025-01-01 13:00:00"));list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L, "2024-03-01 13:00:00"));list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L, "2024-02-01 13:00:00"));
​// 生成 Excel 文件并转换为 Base64 编码ByteArrayOutputStream outputStream = new ByteArrayOutputStream();EasyExcel.write(outputStream, SaleData.class).sheet("Sheet1").doWrite(list);byte[] bytes = outputStream.toByteArray();String excelBase64 = Base64.getEncoder().encodeToString(bytes);
​// 返回 Base64 编码的 Excel 内容给前端return ResultUtils.success(excelBase64);}@PostMapping("/data/list")public BaseResponse<List<SaleData>> listSaleData() {List<SaleData> list = new ArrayList<>();list.add(new SaleData(1L, "苹果", new BigDecimal("10.00"), 10, 1L,"2024-01-01 13:00:00"));list.add(new SaleData(2L, "梨子", new BigDecimal("12.00"), 10, 1L,"2025-01-01 13:00:00"));list.add(new SaleData(3L, "西瓜", new BigDecimal("5.00"), 10, 1L,"2024-03-01 13:00:00"));list.add(new SaleData(4L, "香蕉", new BigDecimal("7.00"), 10, 1L,"2024-02-01 13:00:00"));return ResultUtils.success(list);}
}

SaleData：

@Data
@AllArgsConstructor
public class SaleData implements Serializable {
​@ExcelProperty("订单号")private Long id;
​@ExcelProperty("品种")private String name;
​@ExcelProperty("价格")private BigDecimal price;
​@ExcelProperty("数量")private Integer totalNum;
​@ExcelProperty("交易对象")private Long userId;
​@ExcelProperty("交易时间")private String datetime;
}

总结

相信大家看完也能学会导出 Excel，可以根据具体的开发需求选择不同的方案，如果有更好的方案欢迎探讨哈。

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

代码随想录训练营 Day18打卡 二叉树 part06 530. 二叉搜索树的最小绝对差 501. 二叉搜索树中的众数 236. 二叉树的最近公共祖先

代码随想录训练营 Day18打卡 二叉树 part06 530. 二叉搜索树的最小绝对差 501. 二叉搜索树中的众数 236. 二叉树的最近公共祖先

代码随想录训练营 Day18打卡 二叉树 part06 一、 力扣530. 二叉搜索树的最小绝对差 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 示例 &#xff1a; 输入&#xff1a; …
阅读更多...
spring boot + vue3 接入钉钉实现扫码登录

spring boot + vue3 接入钉钉实现扫码登录

1&#xff1a;准备工作 1.1&#xff1a;进入钉钉开放平台创建开发者应用。应用创建和类型介绍&#xff0c;参考下方。 应用类型介绍 - 钉钉开放平台 (dingtalk.com) 应用能力介绍 - 钉钉开放平台 (dingtalk.com) 扫码登录第三方网站 - 钉钉开放平台 (dingtalk.com) 1.2&…
阅读更多...
KaiwuDB 产品总监李月飞：让中国物联网用上放心的数据库产品

KaiwuDB 产品总监李月飞：让中国物联网用上放心的数据库产品

​2024年7月17日&#xff0c;KaiwuDB 产品总监李月飞受邀于 2024 可信数据库发展大会“能源与政务数据库应用创新”分论坛发表演讲。以下是李月飞主题演讲《深耕数据良田&#xff0c;KaiwuDB 洞见能源产业数字新生力》精华实录。 数据&#xff0c;给能源变革带来新的可能 众所…
阅读更多...
TypeScript 简介

TypeScript 简介

文档 typeScript官网中文文档&#xff1a;https://www.tslang.cn/index.html中文文档(简洁点)&#xff1a;https://typescript.bootcss.comMDN 前言 JavaScript 引入编程社区已有 20 多年&#xff0c;如今已成为有史以来使用最广泛的跨平台语言之一。JavaScript 最初是一种用…
阅读更多...
SSL VPN详细概述

SSL VPN详细概述

为什么会出现SSL VPN呢&#xff1f;在这之前不是有IPSEC VPN吗&#xff1f; 通过这两个问题我们可以发现多半是IPSEC VPN在某些方面肯定有所欠缺&#xff0c;所以后面在出现了SSL VPN。 之前说过根据组网方式划分&#xff0c;可以分为 client to LAN 和 LAN to LAN 两种 而…
阅读更多...
CTF学习笔记汇总（非常详细）零基础入门到精通，收藏这一篇就够了

CTF学习笔记汇总（非常详细）零基础入门到精通，收藏这一篇就够了

CTF学习笔记汇总 Part.01 Web 01 SSRF 主要攻击方式如下&#xff1a; 01 对外网、服务器所在内网、本地进行端口扫描&#xff0c;获取一些服务的banner信息。 02 攻击运行在内网或本地的应用程序。 03 对内网Web应用进行指纹识别&#xff0c;识别企业内部的资产信息。 …
阅读更多...
深入分析 Android ContentProvider (十二)

深入分析 Android ContentProvider (十二)

文章目录 深入分析 Android ContentProvider (十二)Android 中 ContentProvider 的系统代码分析&#xff08;续&#xff09;1. ContentProvider 的内部实现机制1.1. ContentProvider 的创建与生命周期管理1.2. ContentProvider 的数据访问与处理1.3. ContentProvider 的权限管理…
阅读更多...
Go语言---sync.WaitGroup

Go语言---sync.WaitGroup

在Go语言中&#xff0c;给我们提供了用于线程同步的sync.WaitGroup&#xff0c;简单来讲&#xff0c;WaitGroup就是指等待一组&#xff0c;等待一个系列执行完成后才会继续向下执行。 WaitGroup数据结构 type WaitGroup struct {noCopy noCopystate atomic.Uint64 // 高 32 b…
阅读更多...
无人驾驶的未来：AI如何重塑我们的出行世界

无人驾驶的未来：AI如何重塑我们的出行世界

无人驾驶汽车&#xff0c;作为人工智能&#xff08;AI&#xff09;技术的集大成者&#xff0c;正以前所未有的速度改变着我们的出行方式。从机器学习到计算机视觉&#xff0c;再到人工智能生成内容&#xff08;AIGC&#xff09;&#xff0c;AI技术的每一次进步都在为无人驾驶汽…
阅读更多...
华为手机连接电脑后电脑无反应、检测不到设备的解决方法

华为手机连接电脑后电脑无反应、检测不到设备的解决方法

本文介绍华为手机与任意品牌电脑连接时&#xff0c;出现连接后电脑无反应、检测不到手机连接情况的解决方法。 最近&#xff0c;因为手机的存储空间愈发紧缺&#xff0c;所以希望在非华为电脑中&#xff0c;将华为手机内的照片、视频等大文件备份、整理一下。因此&#xff0c;需…
阅读更多...
公司里的IT是什么？

公司里的IT是什么？

公司里的IT是什么&#xff1f; 文章目录 公司里的IT是什么&#xff1f;1、公司里的IT2、IT技术3、IT行业4、IT行业常见证书 如果对你有帮助&#xff0c;就点赞收藏把&#xff01;(&#xff61;&#xff65;ω&#xff65;&#xff61;)&#xff89;♡ 前段时间&#xff0c;在公…
阅读更多...
《Windows API每日一练》24.1 WinSock简介

《Windows API每日一练》24.1 WinSock简介

本节将逐一介绍WinSock的主要特性和组件&#xff0c;套接字、WinSock动态库的使用。 本节必须掌握的知识点&#xff1a; Windows Socket接口简介 Windows Socket接口的使用 第178练&#xff1a;网络时间校验 24.1.1 Windows Socket接口简介 ■以下是WinSock的主要特性和组件…
阅读更多...
实时转换，轻松编辑：2024年高效语音转文字解决方案

实时转换，轻松编辑：2024年高效语音转文字解决方案

现在生活节奏越来越快了&#xff0c;很多时候一场会议内容的信息量就会呈几何式增长。用笔来记录肯定来不及&#xff0c;那还有一个方法就是录音或者录像。录制完成后我们可以使用语音转文字来快速获取会议内容是不是就方便了很多。 1.365在线转文字 链接传送&#xff1a;ww…
阅读更多...
华为云依赖引入错误

华为云依赖引入错误

问题&#xff1a;记录一次项目加载华为云依赖错误&#xff0c;如下&#xff1a; 错误信息&#xff1a;Could not find artifact com.huawei.storage:esdk-obs-java:pom:3.1.2.1 in bintray-qcloud-maven-repo (https://dl.bintray.com/qcloud/maven-repo/) 找到本地仓库&#…
阅读更多...
【practise】string_atoi

【practise】string_atoi

今天来分享一道比较平常的练习题&#xff0c;说实话我自己写了半天&#xff0c;自己写的很烂最后还是看的答案… 1.题目概要 题目链接&#xff1a;LINK 2.题目难点 这个题目有两个难点&#xff0c;如下&#xff1a; 拿到了全部都是数字字符的字符串&#xff0c;怎么将这个…
阅读更多...
从技术角度解读【与辉同行】文案（一）

从技术角度解读【与辉同行】文案（一）

视频文字内容 标题&#xff1a;走晋.山西 内容&#xff1a;将一段岁月熔成佳酿&#xff0c;三晋儿女荡气回肠。捧一把黄土架起火柴&#xff0c;华夏大地照亮火光。五千年黄土风云&#xff0c;历代千秋根固魂盈。三万顷汾河烟雨&#xff0c;唐风宋韵人杰地灵。当先辈手持石器抛挖…
阅读更多...
秘密打造「AI陶哲轩」 震惊数学圈！谷歌IMO梦之队首曝光，菲尔兹奖得主深度点评

秘密打造「AI陶哲轩」 震惊数学圈！谷歌IMO梦之队首曝光，菲尔兹奖得主深度点评

谷歌DeepMind正在做的&#xff0c;是要打造出世界上最强的AI数学家。 Perplexity AI的CEO对此做出了大胆预测——DeepMind继续研究下去的话&#xff0c;应该可以搞出一个「AI陶哲轩」了&#xff01; 这个预测可谓相当大胆。 要知道&#xff0c;陶哲轩在IMO竞赛圈&#xff0c;乃…
阅读更多...
ADI - 通过5 V至24 V输入提供双极性、双向DC-DC流入和流出电流

ADI - 通过5 V至24 V输入提供双极性、双向DC-DC流入和流出电流

大部分电子系统都依赖于正电压轨或负电压轨&#xff0c;但是有些应用要求单电压轨同时为正负电压轨。在这种情况下&#xff0c;正电源或负电源由同一端子提供&#xff0c;也就是说&#xff0c;电源的输出电压可以在整个电压范围内调节&#xff0c;并且可以平稳转换极性。例如&a…
阅读更多...
【CORS 报错】跨域请求问题：CORS 多种环境下的解决方案

【CORS 报错】跨域请求问题：CORS 多种环境下的解决方案

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、CORS错误的常见原因二、解决方案1. Vue3 Vite项目下的解决方案创建Vue3 Vite项目配置Vite的代理发送请求 2. jQuery项目下的解决方案使用CORS请求头使用JSONP 3. 其他环境下的解决方案使用服务器端代理设置CORS头使用…
阅读更多...
“再来一单“业务功能开发

“再来一单“业务功能开发

文章目录 概要整体架构流程技术细节小结 概要 再来一单”功能常见于餐饮、零售、外卖等行业&#xff0c;主要目的是为了简化用户的重复购买流程&#xff0c;提高用户体验和效率。 需求分析以及接口设计 再来一单就是将原订单中的商品重新加入到购物车中,所以本质上是"增…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023