Cara Saya Menambah Pengimportan CSV Dalam Projek React-Node.js Saya

Pangkalan Sentuh baik. Ia adalah projek yang hebat. Ia berjaya. Tetapi, mari kita hadapi itu—adakah ia boleh digunakan? (Touch Base ialah apl pengurusan kenalan React tindanan penuh yang saya buat).

Saya sedang memikirkan perkara ini dan menyedari sesuatu yang jelas. Apabila pengguna mula menggunakan Pangkalan Sentuh mereka perlu menambah kenalan secara manual. Yang mungkin baik jika anda mempunyai 5 kenalan. Jika anda mempunyai 1,000 kenalan yang ingin anda tambahkan, ini payah… dan anda mungkin tidak mahu menggunakan sistem ini. Jadi sudah tentu, saya tahu saya perlu menambah keupayaan untuk mengimport kenalan.

Pilihan Penyelidikan

Carian Google pertama saya ialah "pengimport csv", atau sesuatu seperti itu. Saya melihat beberapa pilihan yang tersedia dan menemui FlatFile. Tajuk utama mereka berbunyi "Cara terpantas untuk mengumpul, menaiki kapal dan memindahkan data." Sempurna... kecuali, itu bukan semua untuk saya. Sekarang, ini mungkin salah saya (mereka kelihatan seperti perkhidmatan yang menakjubkan) tetapi proses melaksanakan pengimport mereka mengambil lebih banyak usaha daripada yang saya sanggup lakukan untuk ini. Ini adalah masa yang sesuai untuk konteks bar sisi kecil:

Sejak kebelakangan ini, saya sangat menghargai kekosongan. Saya mahu menyelesaikan sesuatu dengan cepat. Ini bukan tentang memotong sudut, saya hanya tidak mahu mempunyai sebarang alasan atau kelewatan yang tidak perlu. Lagipun, saya hanya seorang yang bekerja dalam projek sampingan. Oleh itu, sikap saya sekarang adalah gagal, belajar, dan cepat lelaran. Semua sambil melakukan kerja yang baik.

Kembali ke FlatFile. Walaupun saya ingin menggunakan perisian yang menjanjikan mereka, saya bertanya kepada diri sendiri sama ada saya benar-benar memerlukan semua loceng dan wisel mereka dan jika melawan dokumen mereka berbaloi. Pasti tidak. Jadi saya kembali ke pencarian saya dan mendarat di Papa Parse. Saya teringat melihatnya dalam carian saya sebelum ini. Tajuk utama mereka berbunyi "Penghurai CSV dalam penyemak imbas yang berkuasa untuk lelaki dan perempuan besar." ? Saya telah masuk.

Pelaksanaan

Perkara pertama dahulu, saya menambahkan laluan POST pada API saya.

verifyToken ialah fungsi yang saya gunakan dalam semua laluan saya yang melakukan perkara itu—mengesahkan token id pengguna. Saya menggunakan multer dalam apl saya yang merupakan perisian tengah node.js untuk mengendalikan muat naik fail. upload.single('file') ialah fungsi multer yang membantu saya memuat naik fail ke baldi s3 saya.

Di dalam laluan, saya mengambil id pengguna dan fail melalui pemusnahan.

Seperti dokumen pakej npm untuk keadaan Papa Parse, "Papa Parse boleh menghuraikan Strim Boleh Baca dan bukannya Fail apabila digunakan dalam persekitaran Node.js (selain rentetan biasa)."

Jadi saya bersedia untuk menstrim fail terus ke Papa Parse dengan mencipta strim tersebut daripada baldi s3 saya serta tatasusunan kosong untuk menyimpan data hasil. Tidak boleh lupa tentang pengendalian kemungkinan ralat.

Kemudian akhirnya saya menghantar strim kepada Papa Parse, menetapkan pilihan konfigurasi saya dan mengendalikan sebarang ralat yang datang daripada hasil carian.

Dalam kod di atas, lengkap ialah sifat Papa Parse yang mengambil fungsi panggil balik. Ia dilaksanakan sebaik sahaja penghuraian selesai. Saya kemudian mengambil data yang disediakan oleh hasil sebagai parsedData.

Selepas ini, tiba masanya untuk menjalankan beberapa pertanyaan pada pangkalan data dan memproses kenalan. Tetapi, saya perlu menyimpan sambungan db untuk menjalankan pertanyaan dahulu.

Bahagian seterusnya ini ialah banyak kod dalam pernyataan cuba tangkap, jadi saya hanya akan memberikannya kepada anda terus dengan beberapa ulasan mengenainya.

Seperti yang anda lihat, saya

• ambil kenalan sedia ada
• tapis kenalan pendua menggunakan e-mel, kerana tiada dua e-mel boleh sama
• masukkan secara pukal kenalan bukan pendua ke dalam jadual

Hadapan

Halaman hadapan akan sebahagian besarnya khusus untuk pendekatan saya terhadap apl, tetapi mari kita sambungkan titik di sini.

Halaman Import Kenalan melakukan satu perkara jadi ia sangat mudah. Saya menggunakan butang muat naik fail asli yang sebenarnya merupakan input.

Apabila input mengesan perubahan, saya mencetuskan fungsi handleFileUpload.

Di dalam fungsi handleFileUpload, saya mula-mula menetapkan keadaan pemuatan kepada benar supaya saya boleh memaparkan pemutar pemuatan kecil saya kepada pengguna semasa proses ini berlaku.

Apabila pengguna berjaya memuat naik fail .csv mereka, saya menambahkannya pada objek formData baharu dan menghantarnya ke laluan belakang saya di atas untuk memprosesnya. Saya terus menggunakan permintaan pengambilan di sini kerana ia adalah satu-satunya tempat dalam apl saya yang akan mencapai titik akhir /import-contacts. Jika bahagian lain aplikasi saya perlu menekan laluan, saya akan menyimpan permintaan menggunakan konteks dan menggunakannya untuk mengelakkan kod berulang. Selain itu, anda boleh melihat pengendalian ralat yang telah saya sediakan…

Setelah berjaya mengendalikan fail atau jika ia ralat, keadaan pemuatan akan ditetapkan semula kepada palsu dan saya mencetuskan amaran roti bakar yang sesuai untuk memberitahu pengguna dengan tepat apa yang berlaku dengan cara yang baik.

Seronok rasanya untuk log masuk, memuat naik fail .csv kenalan, dapatkan makluman roti bakar yang berjaya, dan kemudian lihat semua kenalan baharu diisi dalam akaun anda. Dan ia begitu pantas. Anda mungkin melihat pemutar pemuatan hanya seketika. Pertanyaan sisipan pukal juga banyak membantu di sana.

Daripada Mungkin Boleh Digunakan kepada Boleh Digunakan

Sebelum menambah ciri ini, saya tertanya-tanya sejauh mana apl itu benar-benar boleh digunakan. Sekarang, tidak ada persoalan tentang itu. Walaupun ia tidak terlalu rumit, ia adalah ciri yang anda jangkakan untuk melihat dalam jenis aplikasi ini jadi saya mendapati ia satu keperluan untuk dilaksanakan. Saya fikir ia menjadikannya lebih serius sedikit projek. Selain itu, saya tidak pernah melakukan apa-apa dengan fail .csv yang menjadikan ini sangat menyeronokkan untuk diusahakan. Papa Parse disepadukan dengan baik dengan semua alatan yang telah saya gunakan yang menjadikannya sangat mudah. Saya pasti mengesyorkan menggunakannya.

Jika anda berjaya sejauh ini, tahniah kepada anda kerana membaca ini?...
dan bersorak kepada perisian yang tidak menyusahkan ?

p.s saya masih tertanya-tanya sama ada projek saya meleset ?
Jika anda ingin menyemaknya, ini pautannya sekali lagi.

Sehingga lain kali!

Atas ialah kandungan terperinci Cara Saya Menambah Pengimportan CSV Dalam Projek React-Node.js Saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!