首页 > web前端 > js教程 > 我如何在我的 React-Node.js 项目中添加 CSV 导入

我如何在我的 React-Node.js 项目中添加 CSV 导入

Mary-Kate Olsen
发布: 2024-12-16 11:09:14
原创
112 人浏览过

触摸底座很好。这是一个很酷的项目。它起作用了。但是,让我们面对现实吧——它有用吗? (Touch Base 是我制作的全栈 React 联系人管理应用程序)。

我在思考这个问题并意识到一些显而易见的事情。当用户开始使用 Touch Base 时,他们必须手动添加联系人。如果您有 5 个联系人,这可能没问题。如果您想要添加 1,000 个联系人,这很糟糕……而且您可能不想使用这个系统。当然,我知道我必须添加导入联系人的功能。

研究选项

我的第一个 Google 搜索是“csv importers”,或者类似的东西。我浏览了一些可用的选项并找到了 FlatFile。他们的主要标题是“收集、加载和迁移数据的最快方式”。完美……只是,这并不适合我。现在,这可能是我的错(他们看起来是一项令人惊叹的服务),但是实施他们的进口商的过程比我愿意为此付出的努力更多。这是添加一些侧边栏上下文的最佳时机:

最近,我真的很看重斗志。我想要把事情做好,快点。这并不是为了偷工减料,我只是不想有任何借口或不必要的延误。毕竟,我只是一个从事业余项目的人。所以我现在的态度是失败、学习、快速迭代。一直在做好工作的同时。

返回 FlatFile。尽管我很想使用他们有前途的软件,但我问自己是否真的需要他们所有的附加功能,以及与他们的文档进行斗争是否值得。绝对不是。于是我又继续搜索,最终找到了 Papa Parse。我记得在之前的搜索中看到过它。他们的主要标题是“适用于大男孩和女孩的强大的浏览器内 CSV 解析器”。 ?我在。

实施

首先,我向我的 API 添加了一条 POST 路由。

How I Added CSV Importing In My React-Node.js Project

verifyToken 是我在所有路由中使用的一个函数,它的作用正是验证用户 ID 令牌。我在我的应用程序中使用 multer,它是一个用于处理文件上传的 Node.js 中间件。 upload.single('file') 是一个 multer 函数,可帮助我将文件上传到我的 s3 存储桶。

在路线内,我通过解构获取用户 ID 和文件。

How I Added CSV Importing In My React-Node.js Project

就像 Papa Parse 状态的 npm 包文档一样,“在 Node.js 环境中使用时,Papa Parse 可以解析可读流而不是文件(除了纯字符串之外)。”

因此,我准备通过从我的 s3 存储桶创建所述流以及用于保存结果数据的空数组,将文件直接流式传输到 Papa Parse。不能忘记处理潜在的错误。

How I Added CSV Importing In My React-Node.js Project

然后我最终将流传递给 Papa Parse,设置我的配置选项并处理结果中出现的任何错误。

How I Added CSV Importing In My React-Node.js Project

在上面的代码中,complete 是一个带有回调函数的 Papa Parse 属性。解析完成后就会执行。然后,我将结果提供的数据作为 parsedData 进行保存。

之后,是时候对数据库运行一些查询并处理联系人了。但是,我需要存储一个与数据库的连接以首先运行查询。

How I Added CSV Importing In My React-Node.js Project

下一部分是 try catch 语句中的大量代码,因此我将直接将其提供给您并附上一些注释。

How I Added CSV Importing In My React-Node.js Project

如你所见,我

  • 获取现有联系人
  • 使用电子邮件过滤掉重复的联系人,因为没有两封电子邮件可以相同
  • 将不重复的联系人批量插入表中

前端

前端将在很大程度上特定于我的应用程序方法,但让我们在这里将这些点连接起来。

导入联系人页面只做一件事,因此非常简单。我使用本机文件上传按钮,这实际上是一个输入。

How I Added CSV Importing In My React-Node.js Project

当输入检测到更改时,我会触发handleFileUpload 函数。

在handleFileUpload函数内部,我首先将加载状态设置为true,以便在此过程发生时向用户显示我的小加载旋转器。

How I Added CSV Importing In My React-Node.js Project

当用户成功上传他们的 .csv 文件时,我将其附加到一个新的 formData 对象并将其发送到上面的后端路由来处理它。我在这里直接使用获取请求,因为它是我的应用程序中唯一会访问 /import-contacts 端点的位置。如果我的应用程序的另一部分需要访问该路线,我将使用上下文存储请求并使用它来避免重复代码。另外,您还可以看到我设置的错误处理...

How I Added CSV Importing In My React-Node.js Project

成功处理文件或出错后,加载状态将设置回 false,并且我会触发适当的 toast 警报,让用户以良好的方式准确了解发生了什么。

登录、上传联系人的 .csv 文件、获得成功的 Toast 警报,然后查看帐户中填充的所有新联系人,感觉真好。而且速度这么快。您可能会看到加载旋转器一秒钟。批量插入查询也有很大帮助。

从可能可用到可用

在添加此功能之前,我想知道该应用程序到底有多有用。现在,这是毫无疑问的。尽管它不是超级复杂,但这是您希望在此类应用程序中看到的功能,因此我发现它是实现的一个要求。我认为这使得这个项目变得更加严肃。除此之外,我从未对 .csv 文件做过任何事情,这使得工作变得非常有趣。 Papa Parse 与我已经使用的所有工具集成得很好,这使得它变得非常简单。我绝对推荐使用它。

如果您已经做到了这一步,为您阅读本文喝彩?...
为不糟糕的软件干杯?

p.s 我仍然想知道我的项目是否很糟糕?
如果您想查看,请再次查看这里的链接。

下次再见!

以上是我如何在我的 React-Node.js 项目中添加 CSV 导入的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板