热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

小程序中实现excel数据的批量导入

本文主要介绍关于小程序,低代码的知识点,对小程序中实现excel数据的批量导入和如何生成excel小程序有兴趣的朋友可以看下由【低代码布道师】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的微搭小

本文主要介绍关于小程序,低代码的知识点,对小程序中实现excel数据的批量导入和如何生成excel小程序有兴趣的朋友可以看下由【低代码布道师】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的微搭小课堂相关技术问题。

如何生成excel小程序

目录 1 建立数据源2 编制入库的代码2.1 创建低码方法2.2 低码中调用连接器 3 最终的代码4 总结
我们上一篇介绍了如何利用微搭的自定义连接器接入腾讯文档的数据,光有接入是不够的,更重要的是我们需要将采集的数据积累下来,变成企业的数字资产。

积累数据最好的方式就是把数据存入数据库,低码工具除了有可视化编程的便利外,还提供了线上的文档型数据库。文档数据库比传统数据库的优势是,文档数据库的返回结构是JSON格式,直接就可以在前端进行渲染。关系型数据库还得通过代码进行转译。

另外一个方面是文档数据库的类型更丰富,有附件、富文本、自动编号、数组、对象、图片、地理位置这些偏业务类型的字段。有了这些丰富多彩的字段,那我们就可以减少代码的编制,无疑对提高编程效率非常有帮助。

介绍了一些基础背景后我们开始介绍如何将腾讯文档的数据批量入库。

1 建立数据源

要想将数据入库,就先需要建立数据源。登录微搭控制台,点击数据源,点击新建数据模型

小程序中实现excel数据的批量导入


输入名称和标识

小程序中实现excel数据的批量导入


数据源建立之后需要创建字段,点击添加字段

小程序中实现excel数据的批量导入


初学者最大的疑问是我需要建哪些字段,字段是个什么概念?我们还是先看一下我们的腾讯文档的在线表格

小程序中实现excel数据的批量导入


会用excel的人都知道,excel里有行和列的概念。那我们的字段其实是列,每一列都对应一个字段。字段的类型其实是和单元格的内容是相关的。比如我的A2单元格是张三,明显是存的字符,那么我们的类型就是文本。C2是出生日期,应该是日期类型。D2是联系电话,可以选择文本也可以选择电话类型。

明白了这个基础概念之后,我们分别添加一下字段,一共是四个字段,姓名、性别、出生日期、联系电话

小程序中实现excel数据的批量导入


小程序中实现excel数据的批量导入


小程序中实现excel数据的批量导入


小程序中实现excel数据的批量导入

2 编制入库的代码

我们上一节介绍了如何创建连接器来对接腾讯文档,不会的同学可以翻看上一篇文章添加腾讯文档连接器

读取腾讯文档的数据分为读取sheet,根据sheet获取每一行的数据。因为是入库,还需要将解析好的数据封装到对象中,调用批量新增的方法入库。我们来一步步讲解一下。

2.1 创建低码方法

要想入库,先需要创建一个低码方法。点击左上角的低码编辑器进入到代码界面

小程序中实现excel数据的批量导入


低码编辑器打开之后会定位到当前页面,在handler旁边点击 +号来创建低码方法

小程序中实现excel数据的批量导入


首先需要输入一个方法名,方法名最好能望文知义,我们可以定义一个batchAdd方法

小程序中实现excel数据的批量导入


平台会自动生成代码结构

小程序中实现excel数据的批量导入


初学者因为没有系统的学习过编程,往往容易犯的错误是自由发挥,随意编制代码。我们讲解一下这里的知识点。一般我们在handler里定义的方法叫函数,函数由几部分组成,函数名、入参、出参(或者叫返回值)

export default function 是函数的定义,这里叫匿名函数,就是不给函数起一个名字。如果函数体里写了await了,这个函数需要改写成异步函数,变成 export default async function

小括号里边的叫入参,多个参数以逗号分隔。我们这里其实只有一个入参,是{event,data}。用一对儿大括号包裹的叫对象,对象里是具体的入参。

event是事件对象,一般我们可以获取到组件里的值,data是如果调用事件传参了,可以直接从data里获取值。具体如果希望看到值的我们可以使用打桩的技术,所谓的打桩就是在控制台输出具体的值。

比如我们可以这样写

export default function({
    event, data}) {
   
  console.log(event,data)
}

打好桩之后,如何看结果呢?事件必须绑定到组件上,组件产生的各种的动作可以触发事件。就像我们这个批量入库,需要用户主动触发,就需要放置一个按钮,并且绑定点击事件,来触发批量新增的方法。

小程序中实现excel数据的批量导入


小程序中实现excel数据的批量导入


事件绑定好之后在哪看结果呢?点击开发调试工具来看具体的输出

小程序中实现excel数据的批量导入


这时候点击一下按钮就可以看到对应的输出

小程序中实现excel数据的批量导入


输出的结果还是蛮复杂的,不同的组件产生的事件对象不同,里边的内容不同,我们会在具体的场景进行深入的讲解。为啥本篇会先讲一些基础操作呢?因为不少粉丝是按照教程的步骤一步步操作的,不懂基本的操作有时候会乱粘贴一气,然后就是各种各样的报错,还不知道从哪看错误,浪费了不少时间。

2.2 低码中调用连接器

我们上一篇是使用变量的方法调用了连接器,这一篇我们使用低码方法调用连接器。为了获取腾讯文档中的数据,先需要获取工作表的信息。我们复习一下变量中我们是如何调用的

小程序中实现excel数据的批量导入


这里是调用了getSheets方法,并且传入了bookID,低码中是通过api的方式来调用的,在方法中输入如下代码

const bookID = "DWkxMSFlkU1l2YkRo"; 
  const {
    sheetData } = await app.cloud.callConnector({
   
    name: 'txwd_jnegl1q', 
    methodName: 'getSheets', 
    params: {
   
      bookID,
    },
  });
console.log(sheetData)

这里的bookID是通过腾讯文档分享链接的时候获取到的,{sheetData}是解构赋值的意思,可以直接从返回结果里获取对应的值。可以看一下控制台打印的结果

小程序中实现excel数据的批量导入


要怎么看返回结果呢,一对儿中括号表示数组的意思,展开数组第一个元素的下标是0,数组里的元素是个对象,对象是以一对儿大括号表示的,对象里边又有具体的属性和方法。我们这里边需要的是sheetID,cloumnCount,rowCount。

了解了之后我们就定义变量来接收返回值,输入如下代码

let sheetID = sheetData[0].sheetID
  let rowCount = sheetData[0].rowCount
  let columnCount = sheetData[0].columnCount
  console.log(sheetID, rowCount, columnCount)

看控制台的打印结果

小程序中实现excel数据的批量导入


接着我们就需要根据返回的结果调用获取单元格的方法,我们使用变量的时候是这么做的

小程序中实现excel数据的批量导入


代码中是这样获取

const {
    rows } = await app.cloud.callConnector({
   
    name: 'txwd_jnegl1q', 
    methodName: 'getRows', 
    params: {
   
      bookID,
      sheetID,
      rows: `2-${
     rowCount}` 
    },
  });
console.log(rows)

这里小伙伴不明白的就是这一句2-${rowCount},用两个反引号包裹的表示模板字符串,里边如果使用${}这种语法的表示变量,代码只要一执行就会翻译成2-3,读取第二行、第三行的数据。我们看一下输出的结果

小程序中实现excel数据的批量导入


textTypes表示每一列的字段类型,textValues表示具体的值。字段类型我们不需要,只需要解析出具体的值就可以

这样每行的数据也解析出来了,就需要按照需要的格式整理入库了,下边是入库的代码

const newRecords = [];
  const columns = "xm|xb|csrq|lxdh"; 


  for(let r = 0; r < rowCount - 1; r++) {
   
    const {
    textValues } = rows[r];
    const inputParams = {
   };
    const cols = columns.split('|');
    cols.forEach((c, i) => {
   
      inputParams[c] = textValues[i];
    });

    newRecords.push(inputParams);
  }


  await app.cloud.callModel({
   
    name: 'txwdsjy_q6rop6n', // 数据模型标识
    methodName: 'wedaBatchCreate', // 新增多条的方法标识
    params: {
   
      records: newRecords,
    },
  });

这里columns是内数据源的每一个字段的字段标识,可以去数据源那块找到

小程序中实现excel数据的批量导入


其余的代码因为涉及到具体的编程知识,你直接复用就可以,感兴趣的同学可以学习一下Javascript,了解了语法之后就可以读的懂

写好之后点击按钮,发现有两条数据已经写入数据库了

小程序中实现excel数据的批量导入


但是有个问题是出生日期没有正确的读出来,入库的日期都是1970-01-01。如果有解决办法的小伙伴可以评论区留言,也方便大家学习。

3 最终的代码
export default async function ({
     event, data }) {
   
  console.log(event, data)
  const bookID = "DWkxMSFlkU1l2YkRo";
  const {
    sheetData } = await app.cloud.callConnector({
   
    name: 'txwd_jnegl1q', 
    methodName: 'getSheets', 
    params: {
   
      bookID,
    },
  });
  console.log(sheetData)
  let sheetID = sheetData[0].sheetID
  let rowCount = sheetData[0].rowCount
  let columnCount = sheetData[0].columnCount
  console.log(sheetID, rowCount, columnCount)
  const {
    rows } = await app.cloud.callConnector({
   
    name: 'txwd_jnegl1q', 
    methodName: 'getRows', 
    params: {
   
      bookID,
      sheetID,
      rows: `2-${
     rowCount}` 
    },
  });
  console.log(rows)
  const newRecords = [];
  const columns = "xm|xb|csrq|lxdh"; 

  
  for(let r = 0; r < rowCount - 1; r++) {
   
    const {
    textValues } = rows[r];
    const inputParams = {
   };
    const cols = columns.split('|');
    cols.forEach((c, i) => {
   
      inputParams[c] = textValues[i];
    });

    newRecords.push(inputParams);
  }


  await app.cloud.callModel({
   
    name: 'txwdsjy_q6rop6n', 
    methodName: 'wedaBatchCreate', 
    params: {
   
      records: newRecords,
    },
  });
}
4 总结

我们本篇详细的介绍了低代码中如何解析腾讯文档的数据,如何批量入库。虽然现在低码中还没有批量导入的功能,但是我们通过腾讯文档也是可以做到的,如果学会了赶紧照着做一下吧。

本文《小程序中实现excel数据的批量导入》版权归低代码布道师所有,引用小程序中实现excel数据的批量导入需遵循CC 4.0 BY-SA版权协议。


推荐阅读
  • 开发日志:高效图片压缩与上传技术解析 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 在《Cocos2d-x学习笔记:基础概念解析与内存管理机制深入探讨》中,详细介绍了Cocos2d-x的基础概念,并深入分析了其内存管理机制。特别是针对Boost库引入的智能指针管理方法进行了详细的讲解,例如在处理鱼的运动过程中,可以通过编写自定义函数来动态计算角度变化,利用CallFunc回调机制实现高效的游戏逻辑控制。此外,文章还探讨了如何通过智能指针优化资源管理和避免内存泄漏,为开发者提供了实用的编程技巧和最佳实践。 ... [详细]
  • 在 Vue 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • [转]doc,ppt,xls文件格式转PDF格式http:blog.csdn.netlee353086articledetails7920355确实好用。需要注意的是#import ... [详细]
  • MySQL 5.7 学习指南:SQLyog 中的主键、列属性和数据类型
    本文介绍了 MySQL 5.7 中主键(Primary Key)和自增(Auto-Increment)的概念,以及如何在 SQLyog 中设置这些属性。同时,还探讨了数据类型的分类和选择,以及列属性的设置方法。 ... [详细]
  • Java swing 连连看小游戏  开发小系统 项目源代码 实训实验毕设
    Javaswing连连看小游戏开发小系统项目源代码实训实验能满足学习和二次开发可以作为初学者熟悉Java的学习,作为老师阶段性学习的一个成功检验不再是单调的理解老师空泛的知识,导入 ... [详细]
  • 基于Net Core 3.0与Web API的前后端分离开发:Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 本文详细解析了 Android 系统启动过程中的核心文件 `init.c`,探讨了其在系统初始化阶段的关键作用。通过对 `init.c` 的源代码进行深入分析,揭示了其如何管理进程、解析配置文件以及执行系统启动脚本。此外,文章还介绍了 `init` 进程的生命周期及其与内核的交互方式,为开发者提供了深入了解 Android 启动机制的宝贵资料。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 触发器的稳态数量分析及其应用价值
    本文对数据库中的SQL触发器进行了稳态数量的详细分析,探讨了其在实际应用中的重要价值。通过研究触发器在不同场景下的表现,揭示了其在数据完整性和业务逻辑自动化方面的关键作用。此外,还介绍了如何在Ubuntu 22.04环境下配置和使用触发器,以及在Tomcat和SQLite等平台上的具体实现方法。 ... [详细]
  • 在开发过程中,我最初也依赖于功能全面但操作繁琐的集成开发环境(IDE),如Borland Delphi 和 Microsoft Visual Studio。然而,随着对高效开发的追求,我逐渐转向了更加轻量级和灵活的工具组合。通过 CLIfe,我构建了一个高度定制化的开发环境,不仅提高了代码编写效率,还简化了项目管理流程。这一配置结合了多种强大的命令行工具和插件,使我在日常开发中能够更加得心应手。 ... [详细]
  • 在使用 SQL Server 时,连接故障是用户最常见的问题之一。通常,连接 SQL Server 的方法有两种:一种是通过 SQL Server 自带的客户端工具,例如 SQL Server Management Studio;另一种是通过第三方应用程序或开发工具进行连接。本文将详细分析导致连接故障的常见原因,并提供相应的解决策略,帮助用户有效排除连接问题。 ... [详细]
author-avatar
手机用户2602932547
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有