/**  * 将大型数组分割成指定大小的块  * @param {Array} originalArray - 待分割的原始数组  * @param {number} chunkSize - 每个块（页）的大小  * @returns {Array<Array>} 包含所有块的数组  */ function paginateArray(originalArray, chunkSize) {     const paginatedArrays = [];     // 遍历原始数组，每次跳过一个chunkSize的长度     for (let i = 0; i < originalArray.length; i += chunkSize) {         // 使用 slice() 方法从当前索引 i 开始，截取 chunkSize 长度的子数组         paginatedArrays.push(originalArray.slice(i, i + chunkSize));     }     return paginatedArrays; }  // 示例：一个包含15个元素的数组，每页4个元素 const largeArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]; const pageSize = 4;  const pagedResult = paginateArray(largeArray, pageSize);  console.log(pagedResult); /* 输出结果: [   [0, 1, 2, 3],   [4, 5, 6, 7],   [8, 9, 10, 11],   [12, 13, 14] // 最后一页可能不足pageSize ] */  // 对于实际应用中53000个对象的数组，假设每页500个对象 const veryLargeArray = Array.from({ length: 53000 }, (_, i) => `Object ${i}`); const realPageSize = 500; const realPaginatedData = paginateArray(veryLargeArray, realPageSize);  console.log(`总页数: ${realPaginatedData.length}`); // 53000 / 500 = 106页 console.log(`第一页数据:`, realPaginatedData[0]); console.log(`最后一页数据:`, realPaginatedData[realPaginatedData.length - 1]);

Brizy

Brizy是一个面向机构和 SaaS 的白标网站生成器，可以在几分钟内创建网站页面。

166

查看详情

// 假设 suppliersData 已经是一个包含所有数据的数组 let allSuppliersData = []; // 存储所有供应商数据 let allClientsData = [];   // 存储所有客户数据 const PAGE_SIZE = 500; // 定义每页数据量  ipcMain.on('init', (event) => {     // 假设查询已经完成，并将所有数据存储在 allSuppliersData 和 allClientsData 中     // 实际应用中，这里应该是在数据库查询成功后填充这些数组     Promise.all([         suppliersdb.query('SELECT * FROM FANFOR0F_1').then(results => {             allSuppliersData = results;             console.log(`供应商数据总量: ${allSuppliersData.length}`);         }),         clientsdb.query('SELECT * FROM PDECON0F_1').then(results => {             allClientsData = results;             console.log(`客户数据总量: ${allClientsData.length}`);         })     ]).then(() => {         // 数据加载完成后，可以发送一个通知，或者直接发送第一页数据         event.sender.send('initialDataLoaded', {             suppliersTotal: allSuppliersData.length,             clientsTotal: allClientsData.length,             // 可以选择发送第一页数据，或者等待前端请求             initialSuppliersPage: paginateArray(allSuppliersData, PAGE_SIZE)[0],             initialClientsPage: paginateArray(allClientsData, PAGE_SIZE)[0]         });     }).catch(e => {         console.error('数据库加载错误:', e);         event.sender.send('databaseUpdateError', e);     }); });  // 提供一个IPC通道，让渲染进程请求特定页的数据 ipcMain.on('requestPagedData', (event, { dataType, pageNumber }) => {     let targetArray = [];     if (dataType === 'suppliers') {         targetArray = allSuppliersData;     } else if (dataType === 'clients') {         targetArray = allClientsData;     }      if (targetArray.length > 0) {         const paginated = paginateArray(targetArray, PAGE_SIZE);         const requestedPage = paginated[pageNumber - 1]; // pageNumber从1开始         event.sender.send('receivePagedData', { dataType, pageNumber, data: requestedPage });     } else {         event.sender.send('receivePagedData', { dataType, pageNumber, data: [], error: 'Data not loaded yet.' });     } });

<template>   <div>     <h1>供应商列表</h1>     <ul>       <li v-for="supplier in currentSuppliersPage" :key="supplier.id">{{ supplier.name }}</li>     </ul>     <button @click="loadNextPage('suppliers')" :disabled="currentPage.suppliers >= totalPages.suppliers">加载更多供应商</button>      <h1>客户列表</h1>     <ul>       <li v-for="client in currentClientsPage" :key="client.id">{{ client.name }}</li>     </ul>     <button @click="loadNextPage('clients')" :disabled="currentPage.clients >= totalPages.clients">加载更多客户</button>   </div> </template>  <script> export default {   data() {     return {       currentSuppliersPage: [],       currentClientsPage: [],       currentPage: { suppliers: 0, clients: 0 }, // 当前加载的页码（从0开始）       totalPages: { suppliers: 0, clients: 0 },       totalItems: { suppliers: 0, clients: 0 },       pageSize: 500 // 与主进程保持一致     };   },   mounted() {     window.ipcRenderer.send('init');      window.ipcRenderer.receive('initialDataLoaded', (payload) => {       this.totalItems.suppliers = payload.suppliersTotal;       this.totalItems.clients = payload.clientsTotal;       this.totalPages.suppliers = Math.ceil(payload.suppliersTotal / this.pageSize);       this.totalPages.clients = Math.ceil(payload.clientsTotal / this.pageSize);        // 接收并显示第一页数据       this.currentSuppliersPage = payload.initialSuppliersPage;       this.currentClientsPage = payload.initialClientsPage;       this.currentPage.suppliers = 1; // 标记已加载第一页       this.currentPage.clients = 1;     });      window.ipcRenderer.receive('receivePagedData', ({ dataType, pageNumber, data, error }) => {       if (error) {         console.error(`加载 ${dataType} 第 ${pageNumber} 页失败:`, error);         return;       }       if (dataType === 'suppliers') {         this.currentSuppliersPage = this.currentSuppliersPage.concat(data); // 追加数据         this.currentPage.suppliers = pageNumber;       } else if (dataType === 'clients') {         this.currentClientsPage = this.currentClientsPage.concat(data);         this.currentPage.clients = pageNumber;       }     });      window.ipcRenderer.receive('databaseUpdateError', (error) => {       console.error('数据库更新错误:', error);       // 处理错误显示     });   },   methods: {     loadNextPage(dataType) {       let nextPageNum;       if (dataType === 'suppliers') {         nextPageNum = this.currentPage.suppliers + 1;         if (nextPageNum > this.totalPages.suppliers) return;       } else if (dataType === 'clients') {         nextPageNum = this.currentPage.clients + 1;         if (nextPageNum > this.totalPages.clients) return;       }       window.ipcRenderer.send('requestPagedData', { dataType, pageNumber: nextPageNum });     }   } }; </script>

大家都在看：