阅读 7431

小程序-云开发之导入excel并解析

需求:用户将excel表格导入至小程序,解析后将表格内数据渲染至前端页面

首先,我们先根据需求来分析一下流程:

  1. 选择excel表格,上传
  2. 通过云函数解析,并存入云数据库
  3. 从数据库中读取数据,返回前端进行渲染

开工

一. 准备工作

  1. 通过微信开发者工具,开通云服务(自行查文档)
  2. 打开云开发界面 => 数据库:新建合集users (PS:合集名字随意)
  3. 找到小程序根目录下project.config.json文件进行如下修改:

二. 创建云函数文件夹

在上图中配置好的路径处(推荐根目录下)新建文件夹(名字和上图路径名一致),创建好文件夹后,右键打开,配置当前环境

三. 创建云函数:

  1. 右键cloudfunctions云函数文件夹,新建node.js云函数,函数名自定义,暂定upLoadExcel;
  2. upLoadExcel下会自动生成四个文件,index.js为入口文件
  3. 编写云函数(这里需要安装两个依赖:npm install --save wx-server-sdk@latestnpm install node-xlsx

4. 编写云函数逻辑主体(解析并存入数据库)

5. 到这里云函数就完成了,右键cloudfunctions文件夹=>同步云函数列表;右键upLoadExcel文件夹=>上传并部署:云端安装依赖
6. 打开云开发界面=>云函数,看到列表中出现upLoadExcel,就大功告成了。

四. 编写小程序端逻辑

  1. 首先要初始化,在app.js中添加如下代码

2. 打开需求实现页面,定义数据库及合集
const db = wx.cloud.database({})
const users = db.collection('users')
3. 编写主逻辑

4. 验证

五. 优化

为了避免合集数据量过大,每次上传新的excel时,将合集原有数据清空(思路很棒,开干)

  1. 同第三步前三条,创建一个名为deleteExcel的云函数
  2. 添加主体函数(云函数端可批量删除,小程序端只能单条删除

3. 编写OK,部署上去 4. 在小程序端,增加如下代码


测试了一下,效果不错,完美

效果图

再来看云端数据库合集中的数据:保证只有每次上传的表格中的数据就OK了

收工