Dapatkah javascript digunakan untuk meminta data dalam database?

Jika Anda sedang mengembangkan aplikasi web, Anda hampir pasti akan terus berinteraksi dengan database. Dan ketika tiba waktunya untuk memilih cara Anda akan berinteraksi, pilihannya bisa sangat banyak

Pada artikel ini, kita akan melihat secara detail 5 cara berbeda untuk berinteraksi dengan database Anda menggunakan JavaScript, dan kita akan membicarakan pro dan kontra dari masing-masing cara. Kita akan mulai dengan pilihan tingkat terendah — Perintah SQL — lalu beralih ke abstraksi tingkat yang lebih tinggi.  

Memilih perpustakaan database yang tepat untuk aplikasi JavaScript Anda dapat berdampak besar pada pemeliharaan, skalabilitas, dan kinerja kode Anda, jadi sebaiknya luangkan waktu untuk mencari tahu pilihan Anda

Contoh Aplikasi Kami

Kami akan menggunakan aplikasi Express biasa yang dihosting di Heroku sebagai contoh kami. Semua kode untuk artikel ini ada di repositori GitHub ini. Jangan ragu untuk mengkloningnya dan ikuti

Prasyarat

Untuk menjalankan contoh aplikasi, Anda memerlukan perangkat lunak berikut di mesin Anda

• Lingkungan terminal mirip unix (Mac OSX dan Linux baik-baik saja. Jika Anda menggunakan Windows, Anda memerlukan Subsistem Windows untuk Linux)
• git (dan akun github)
• npm (versi 6 atau lebih baru)
• Alat baris perintah Heroku

Jika Anda belum memiliki akun Heroku, Anda harus mendaftar untuk mendapatkan akun gratis. Jika Anda tidak ingin mendaftar ke Heroku, Anda juga dapat menjalankan aplikasi secara lokal terhadap instance Postgres lokal. Jika Anda merasa nyaman dengan itu, seharusnya cukup mudah untuk melihat perubahan apa yang perlu Anda lakukan daripada menerapkannya ke Heroku

Setelah Anda menginstal semua hal di atas, jalankan

  "database": "dfb3aad8c026in",

Bangun dan Terapkan Aplikasi Hello World

Untuk memulai, kami akan menyiapkan yang berikut ini

• Aplikasi Express sepele yang hanya menyajikan halaman web "Hello, World".
• Database Postgres
• Dua tabel, mewakili "pengguna" dan "komentar" (pengguna memiliki banyak komentar)
• Beberapa contoh data (dalam hal ini, dihasilkan melalui mockaroo. com)

Saya telah membuat contoh aplikasi yang akan mengatur semua ini untuk Anda (asalkan Anda telah menjalankan

  "database": "dfb3aad8c026in",

  "database": "dfb3aad8c026in",

  "database": "dfb3aad8c026in",

Ini akan memakan waktu beberapa menit untuk selesai. Sambil menunggu, Anda dapat melihat makefile untuk melihat perintah yang relevan, yang melakukan hal berikut

• Buat aplikasi Heroku baru
• Tambahkan instance database Postgres
• Terapkan aplikasi ke Heroku
• Jalankan perintah di Heroku untuk menyiapkan tabel database dan mengimpor data sampel CSV
• Buka URL aplikasi Heroku Anda di jendela browser baru

Di akhir proses ini, Anda akan melihat "Halo, Dunia" di halaman web

Mengambil Data Dengan SQL

Oke - kita sudah siap. Kami telah membuat database dengan dua tabel dan beberapa data sampel. Tapi kami belum melakukan apa-apa dengannya. Langkah selanjutnya adalah mengaktifkan aplikasi web kita untuk mengambil data dari database

Setiap kali Anda berinteraksi dengan database relasional, Anda melakukannya dengan mengirimkan perintah SQL ke soket jaringan tempat database mendengarkan. Hal ini berlaku untuk semua pustaka yang akan kita lihat dalam artikel ini — pada tingkat terendah, mereka semua mengirim perintah SQL ke database dan mengambil keluaran apa pun yang dihasilkan

Jadi, cara pertama yang akan kita lihat untuk berinteraksi dengan database kita adalah melakukan hal itu — mengirim perintah SQL. Untuk melakukan ini, kita akan menginstal pustaka pg JavaScript, yang memungkinkan kita mengirim SQL ke database Postgres dan mengambil hasilnya

Untuk menginstal pustaka pg, jalankan perintah berikut

  "database": "dfb3aad8c026in",

Ini akan mengambil dan menginstal perpustakaan, dan itu akan menambahkannya ke paket Anda. json dan kunci-paket. file json. Mari lakukan perubahan itu

  "database": "dfb3aad8c026in",

  "username": "clqcouauvejtvw",

Untuk berbicara dengan database kami, kami memerlukan beberapa detail

• Nama host mesin Postgres sedang berjalan
• Port jaringan Postgres sedang mendengarkan
• Nama database tempat data kita berada
• Nama pengguna dan sandi dengan izin untuk mengakses data tersebut

Sebagian besar pustaka basis data akan mengizinkan kami membuat koneksi baik dengan menyediakan objek ke pustaka yang memiliki kunci dan nilai untuk semua detail itu, atau dengan menggabungkan semuanya menjadi satu "URL basis data", yang akan kami lakukan.

Saat Anda menambahkan database ke aplikasi Heroku, Anda secara otomatis mendapatkan variabel lingkungan yang disebut DATABASE_URL, berisi semua detail yang Anda perlukan untuk terhubung ke database. Anda dapat melihat nilai DATABASE_URL Anda dengan menjalankan

  "username": "clqcouauvejtvw",

Ini akan menampilkan semua variabel lingkungan yang dapat digunakan aplikasi Anda. Seharusnya hanya ada satu untuk saat ini, jadi Anda akan melihat sesuatu seperti ini di keluaran

DATABASE_URL.

  "username": "clqcouauvejtvw",

  "username": "clqcouauvejtvw",

Dalam kasus contoh kita, yang rusak seperti ini

SQL

xxxxxxxxxx

1

13

1

{

2

3

  "hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",

4

5

  "port": 5432,

6

7

  "database": "dfb3aad8c026in",

8

9

  "username": "clqcouauvejtvw",

10

11

  "password": "1b079cad50f3ff9b48948f15a7fa52123bc6795b875348d66886407a266c0f5b"

12

13

}

Nilai DATABASE_URL Anda akan berbeda, tetapi strukturnya akan sama

Sekarang kita telah menginstal perpustakaan pg, dan kita tahu bagaimana menghubungkan ke database kita, mari kita jalankan contoh pertama kita untuk berinteraksi dengan database. Kami hanya akan mengambil daftar pengguna dan menampilkannya di halaman web kami. Di bagian atas indeks kami. js, kami akan memerlukan pustaka pg kami, dan membuat objek koneksi basis data

JavaScript

xxxxxxxxxx

1

1

const { Pool } = require('pg');

2

3

{

Di blok

  "username": "clqcouauvejtvw",

  "username": "clqcouauvejtvw",

Terakhir, kita akan mengimplementasikan fungsi listUsers

JavaScript

xxxxxxxxxx

1

23

1

{

2

3

{

4

5

{

6

7

{

8

9

{

10

11

{

12

13

{

14

15

{

16

17

  "hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",

18

19

  "hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",

20

21

  "hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",

22

23

}

Kode ini menunggu hingga koneksi dibuat ke database kami, lalu mengirimkan kueri SQL menggunakan fungsi kueri dan mengambil hasilnya

Sekarang, langkah ini bisa gagal karena banyak alasan berbeda, jadi dalam kode kami menguji untuk memastikan kami memiliki beberapa data dan, jika kami melakukannya, kami memberikan hasil. baris ke pengguna kunci dari objek hasil kami. Selanjutnya, kami meneruskan hasil ke fungsi render, lalu melepaskan koneksi database kami

Di views/pages/index. ejs kami memiliki akses ke objek hasil, sehingga kami dapat menampilkan data pengguna kami seperti ini

HTML

xxxxxxxxxx

1

11

1

  "hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",

2

3

  "hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",

4

5

  "hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",

6

7

  "hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",

8

9

  "hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",

10

11

  "port": 5432,

Anda dapat melihat kode dengan perubahan ini di sini. ________6______6   dan  

  "username": "clqcouauvejtvw",

Mari terapkan perubahan ini agar kita dapat melihat data di aplikasi Heroku kita

  "username": "clqcouauvejtvw",

  "username": "clqcouauvejtvw",

  "password": "1b079cad50f3ff9b48948f15a7fa52123bc6795b875348d66886407a266c0f5b"

Ini akan memakan waktu satu atau dua menit untuk diterapkan. Ketika perintah itu selesai dieksekusi, muat ulang browser Anda dan Anda akan melihat daftar pengguna di halaman web

Contoh MySQL

Contoh di atas adalah untuk Postgres, tetapi kode untuk database relasional umum lainnya akan serupa. Misalnya, jika Anda menggunakan MySQL

• Alih-alih  

    "database": "dfb3aad8c026in",

  8 gunakan  

    "password": "1b079cad50f3ff9b48948f15a7fa52123bc6795b875348d66886407a266c0f5b"

  2   (gunakan mysql2, bukan mysql - mysql2 lebih cepat dan mendukung async/menunggu)
• Dalam indeks. js Anda akan membutuhkan mysql seperti ini

  "password": "1b079cad50f3ff9b48948f15a7fa52123bc6795b875348d66886407a266c0f5b"

• Fungsi listUsers akan terlihat seperti ini

JavaScript

xxxxxxxxxx

1

25

1

{

2

3

  "port": 5432,

4

5

  "port": 5432,

6

7

  "port": 5432,

8

9

  "port": 5432,

10

11

  "port": 5432,

12

13

  "port": 5432,

14

15

  "port": 5432,

16

17

  "database": "dfb3aad8c026in",

18

19

  "database": "dfb3aad8c026in",

20

21

  "database": "dfb3aad8c026in",

22

23

}

tampilan/halaman/indeks. ej tetap sama

Anda dapat melihat contoh proyek dengan perubahan ini di sini

Kesimpulan

Kami telah membahas banyak hal di sini, tetapi ini semua mendasar untuk memahami cara kerja semua akses database. Di bagian selanjutnya, kita akan melihat bagaimana pembuat kueri dan pustaka pemodelan objek-relasional dibangun di atas fondasi ini untuk memungkinkan Anda bekerja dengan data database dalam kode dengan cara yang lebih terasa seperti bekerja dengan fungsi dan objek JavaScript

Bisakah Anda meminta database dengan JavaScript?

Bisakah JavaScript digunakan untuk manajemen basis data?

Bagaimana cara menggunakan JavaScript untuk mengambil data dari database?