Membuat Aplikasi Nuxt Pertama Anda – Toko Buku CRUD

Pelajari cara membuat aplikasi Nuxt.


CRUD – Buat, Baca, Perbarui, Hapus

Saya berasumsi bahwa Anda sudah mengetahui dasar-dasar Vue JS dan / atau Anda sedikit akrab dengan kerangka kerja. Nuxt JS adalah kerangka kerja yang kuat, dibangun di atas Vue JS. Ini pada dasarnya sama dengan Vue JS. Lalu mengapa, Nuxt?

Bagi kebanyakan orang, keputusan untuk menggunakan Nuxt JS biasanya untuk kemampuan SSR-nya.

Apa itu RSK??

SSR adalah singkatan untuk Server Side Rendering.

Biasanya, untuk sebagian besar Aplikasi Halaman Tunggal (SPA), file yang diberikan secara otomatis disuntikkan ke DOM setelah halaman dimuat. Karenanya, bot, perayap SEO akan menemukan halaman kosong pada pemuatan halaman. Namun, untuk SSR, karena kemampuannya untuk pre-render aplikasi di server sebelum halaman, halaman itu dapat dengan mudah diindeks oleh crawler SEO. Juga, itu mungkin membuat aplikasi lebih performan daripada SPA biasa.

Nuxt JS memberi pengembang kemampuan untuk membuat aplikasi SSR dengan mudah. Aplikasi Vue JS SPA Reguler juga dapat dikonfigurasi untuk menggunakan SSR, tetapi prosesnya agak rumit, dan Nuxt JS menyediakan pembungkus untuk menangani semua konfigurasi itu. Selain SSR, Nuxt juga menyediakan cara mudah untuk mengatur proyek VueJS Anda dengan lebih efisien.

Meskipun Nuxt JS masih Vue JS, ia memiliki beberapa perbedaan mendasar dalam bagaimana arsitektur foldernya terstruktur.

Fokus artikel ini adalah agar Anda dapat melakukannya membangun aplikasi dengan Nuxt; karenanya, kami tidak akan menyelam jauh ke dalam arsitektur folder Nuxt, namun, saya akan segera menjelaskan beberapa yang penting yang mungkin kami butuhkan di sini.

Halaman

Folder halaman adalah salah satu perbedaan mendasar dari Vue SPA biasa. Ini mewakili folder Views dalam arsitektur Vue biasa, lebih dari itu, di Nuxt, file yang dibuat dalam folder Pages secara otomatis disediakan sebagai rute. Artinya, ketika Anda membuat file index.vue di folder halaman, yang secara otomatis menjadi rute root Anda, yaitu, localhost: 3000 /.

Juga, ketika Anda membuat nama file.vue lainnya, itu menjadi rute – membuat about.vue memungkinkan Anda mengakses localhost: 3000 / about.

Anda juga dapat membuat folder di dalam folder Halaman. Jika Anda membuat folder bernama ‘kontak’ dan di dalam folder itu, Anda memiliki email.vue, maka Anda dapat mengakses localhost: 3000 / kontak / email. Sesederhana itu. Dengan cara ini, Anda tidak perlu secara manual membuat file router.js seperti yang biasanya Anda lakukan dengan Vue JS untuk membuat rute Anda.

Komponen

Masih hampir sama dengan Vue JS, komponen yang dibuat tidak secara otomatis ditetapkan sebagai rute.

Statis

Folder statis menggantikan folder publik di aplikasi Vue JS biasa, fungsinya hampir sama. File di sini tidak bisa dikompilasi; mereka dilayani dengan cara yang sama mereka disimpan.

Anda dapat membaca semua tentang arsitektur dan struktur di Halaman dokumentasi JSL.

Sekarang, mari kita bangun sesuatu yang menarik …

Membangun aplikasi toko buku

Kami akan membangun aplikasi toko buku, di mana pengguna dapat menambahkan buku yang telah mereka baca ke kategori tertentu yang mereka sukai. Ini akan terlihat seperti ini.

Jadi, kita akan memiliki tata letak sederhana seperti di atas, hanya 3 kolom yang berisi berbagai bagian buku. Baru-baru ini membaca buku, buku favorit, dan yeah, buku-buku terbaik terbaik (saya akui, saya tidak tahu harus memanggil apa bagian itu, ��)

Jadi tujuannya di sini adalah untuk dapat menambahkan judul, penulis, dan deskripsi buku ke kartu di bagian mana pun, mengedit buku yang sudah ditambahkan, dan menghapus buku yang sudah ada. Kami tidak akan menggunakan basis data apa pun, jadi semuanya terjadi di negara bagian.

Pertama, kami menginstal Nuxt:

npm instal create-nuxt-app

Kedua, setelah menginstal Nuxt, Anda sekarang dapat membuat proyek dengan perintah,

buat-nuxt-app bookStore

Saya memilih untuk memberi nama aplikasi saya ‘bookStore’; Anda dapat memberi nama sesuatu yang lebih keren ^ _ ^

Lalu, mari kita menelusuri petunjuk yang tersisa, masukkan deskripsi,

Nama penulis, ketikkan nama atau tekan enter untuk mempertahankan default

Pilih manajer paket, mana yang Anda sukai, keduanya baik-baik saja

Pilih kerangka kerja UI. Untuk proyek ini, saya akan menggunakan Vuetify, sekali lagi, setiap kerangka UI yang Anda sukai akan baik-baik saja.

Pilih kerangka kerja server khusus; kami tidak membutuhkan apa pun, saya tidak akan memilih

Modul tambahan, pilih apa yang Anda inginkan, atau pilih keduanya, kami tidak akan menggunakannya untuk aplikasi ini.

Linting itu penting. Ayo pergi dengan ESLint.

Meskipun pengujian itu penting, kami tidak akan melihatnya hari ini, jadi tidak ada

Mode rendering, ya SSR itu.

Catatan: Memilih SSR bukan berarti kami tidak mendapatkan manfaat dari memiliki SPA, aplikasi tetap menjadi SPA tetapi dengan SSR. Pilihan lainnya hanya berarti SPA dan tidak ada SSR.

Tekan enter dan lanjutkan,

Dan proyek kami sedang dibuat,

Setelah membuat, kita sekarang bisa masuk ke direktori dan menjalankan

dev benang

jika Anda menggunakan npm sebagai manajer paket Anda, gunakan,

npm jalankan dev

Secara default, aplikasi berjalan di localhost: 3000. Kunjungi tautan di browser Anda, dan Anda akan melihat halaman Nuxt default.

Sekarang mari kita mulai dengan membuat komponen yang kita butuhkan. Kami akan memiliki kartu yang menampilkan informasi buku masing-masing, dan kami akan memiliki modal yang berisi formulir untuk memasukkan informasi buku baru atau mengedit yang sudah ada.

Untuk membuat komponen, cukup buat file baru di folder komponen. Ini adalah kode untuk komponen kartu saya.

// BookCard.vue

{{judul buku}}
{{bookAuthor}}
{{Deskripsi buku}}

ekspor standar {
Atribut: ["judul buku", "buku Pengacara", "Deskripsi buku"]
};

Penjelasan singkat tentang apa yang dilakukan di atas. Gambar di-hardcode; kami tidak akan repot tentang itu untuk saat ini. Judul buku, penulis buku, dan deskripsi buku diturunkan ke komponen ini dari halaman induk sebagai alat peraga. Jika Anda tidak terbiasa dengan alat peraga, bayangkan mereka sebagai titik masuk melalui komponen ini dapat diisi dengan data.

Sekarang untuk komponen selanjutnya, modal.

//BookModal.vue

Tambahkan Buku

Menambahkan

Sekarang, itulah markup untuk modal; kita perlu membuat model-v sebagai properti data; oleh karena itu, kami akan menambahkan tag skrip di bawah tag.

ekspor standar {
data () {
kembali {
kategori: "",
judul: "",
penulis: "",
deskripsi: "",
};
},
}

Juga, ada dropdown ‘Pilih Kategori’ yang mengharapkan data ‘kategori’. Kami akan menambahkannya ke data.

ekspor standar {
data () {
kembali {
buka: salah,
kategori: "",
judul: "",
penulis: "",
deskripsi: "",
kategori: ["Buku yang baru dibaca", "Buku favorit", "Terbaik dari yang terbaik"]
};
},
}

Sekarang, kita perlu cara untuk beralih modal kita buka dan tutup, untuk sekarang, kita hanya akan memiliki properti data ‘terbuka’ seperti di atas. Kita akan melihat lebih dekat pada hal itu selanjutnya.

Mari kita cepat membuat halaman tampilan di mana kita akan memiliki tiga kisi / kolom, satu untuk setiap bagian dari buku ini. Mari kita panggil index.vue halaman, lihat kode di bawah ini.

//index.vue

Baru-baru ini Membaca Buku

Buku Favorit

Terbaik dari yang terbaik

Sekarang setelah kita memiliki kisi-kisi kita, kita perlu menambahkan komponen kartu kita ke setiap kisi, untuk setiap buku yang ditambahkan. Karenanya, kami akan mengimpor komponen BookCard.vue kami.

Baru-baru ini Membaca Buku

Edit
Menghapus

Buku Favorit

Edit
Menghapus

Terbaik dari yang terbaik

Edit
Menghapus

Sekarang, kami telah mengimpor komponen BookCard dan telah mengikat propsnya ke hasil dari loop; ini memastikan bahwa untuk setiap entri yang ditambahkan ke bagian mana pun, ada kartu yang dibuat untuk itu. Juga, pada setiap kartu, kami akan menyertakan tombol untuk mengedit atau mengeluarkan kartu.

Sekarang, kita perlu mengimpor kartu dari skrip dan menentukan array yang akan menyimpan catatan untuk masing-masing kategori.

impor BookCard dari "@ / komponen / BookCard";

ekspor standar {
komponen: {
Kartu Buku,
},
data () {
kembali {
buku terbaru: [],
favouriteBooks: [],
terbaik dari yang terbaik: []
};
},
};

Selanjutnya, kita perlu memiliki tombol di header yang akan membuka modal setiap kali kita perlu menambahkan buku. Kami akan melakukan ini di file ‘default.vue’. Kami akan menambahkan tombol ke tajuk bilah aplikasi default.

Tambahkan Buku

Selanjutnya, kita perlu membuat metode openModal di bagian skrip. Dalam aplikasi Vue JS biasa, ada bus peristiwa yang memungkinkan Anda berkomunikasi dengan komponen lain dan bahkan meneruskan data, di Nuxt JS, masih ada bus peristiwa dan Anda masih bisa membuatnya dengan cara yang sama. Jadi, kita akan menggunakan bus peristiwa untuk meneruskan data membuka modal di halaman index.vue (yang belum kita impor) dari file layout / default.vue.

Mari kita lihat bagaimana hal itu dilakukan.

Untuk membuat event global bus, buka file di direktori root proyek, beri nama eventBus.js dan tempel kode di bawah ini di dalamnya.

mengimpor Vue dari ‘vue’

export const eventBus = Vue baru ()

Ya, itu saja. Sekarang kita bisa menggunakannya.

impor {eventBus} dari "@ / eventBus";
metode: {
openModal () {
eventBus. $ emit ("buka-tambah-buku-modal");
}
}

Selanjutnya, kita akan kembali ke komponen BookModal kita, dan mendengarkan ketika eventBus mengeluarkan ‘modal buku-terbuka-tambah’. Kami akan menambahkan ini ke bagian skrip.

impor {eventBus} dari "@ / eventBus";

dibuat () {
eventBus. $ on ("buka-tambah-buku-modal", this.open = true);
},

Sekarang, kami dapat membuka dan menutup modal kami, tetapi belum menambahkan buku apa pun. Mari kita tambahkan metode ke Modal kita untuk membuatnya menyimpan apa yang ditambahkan ke status (ingat kita tidak menggunakan basis data atau penyimpanan lokal apa pun). Kami menambahkan ini di sebelah ‘dibuat ()’

metode: {
saveBook () {
biarkan cardData = {
title: this.title,
penulis: penulis ini,
deskripsi: deskripsi ini,
kategori: kategori ini
};
eventBus. $ emit ("simpan buku", cardData);
this.open = false;
}
}

Selanjutnya, kita perlu cara untuk mengisi kembali modal ketika kita mengedit data dari salah satu kartu. Jadi mari kita buat beberapa penyesuaian pada ‘Created ()’

dibuat () {
eventBus. $ on ("buka-tambah-buku-modal", data => {
jika (data) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = true;
});
},

Sekarang, BookModal terlihat seperti ini secara keseluruhan,

//BookModal.vue

Tambahkan Buku

Menambahkan

impor {eventBus} dari "@ / eventBus";
ekspor standar {
data () {
kembali {
buka: salah,
kategori: "",
judul: "",
penulis: "",
deskripsi: "",
kategori: ["Buku yang baru dibaca", "Buku favorit", "Terbaik dari yang terbaik"]
};
},
dibuat () {
eventBus. $ on ("buka-tambah-buku-modal", data => {
jika (data) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = true;
});
},
metode: {
saveBook () {
biarkan cardData = {
title: this.title,
penulis: penulis ini,
deskripsi: deskripsi ini,
kategori: kategori ini
};
eventBus. $ emit ("simpan buku", cardData);
this.open = false;
}
}
};

Selanjutnya, kita sekarang dapat kembali ke halaman index.vue untuk mengimpor komponen BookModal. Kami akan menambahkan ini ke bagian skrip.

impor BookCard dari "@ / komponen / BookCard";
mengimpor BookModal dari "@ / komponen / BookModal";
impor {eventBus} dari "@ / eventBus";

ekspor standar {
komponen: {
Kartu Buku,
BookModal
},
data () {
kembali {
buku terbaru: [],
favouriteBooks: [],
terbaik dari yang terbaik: []
};
},

Juga, di dalam tubuh, kami akan menambahkan,

Kami membutuhkan metode untuk mengedit dan mengeluarkan kartu. Dalam templat sebelumnya, saya sudah melewati metode edit dan menghapus ke tombol seperti yang ditunjukkan di bawah ini, juga, saya melewati argumen yang diperlukan untuk setiap metode.

Edit Hapus

Mari kita buat metodenya.

metode: {
hapus (kategori, indeks) {
if (kategori === "Buku yang baru dibaca") {
this.recentBooks.splice (index, 1);
}
if (kategori === "Buku favorit") {
this.favouriteBooks.splice (index, 1);
}
if (kategori === "Terbaik dari yang terbaik") {
this.bestOfTheBest.splice (index, 1);
}
},
edit (item, indeks) {
if (item.category === "Buku yang baru dibaca") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.recentBooks.splice (index, 1);
}
if (item.category === "Buku favorit") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.favouriteBooks.splice (index, 1);
}
if (item.category === "Terbaik dari yang terbaik") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.bestOfTheBest.splice (index, 1);
}
}
}

Ingat, BookModal memancarkan, dan acara yang disebut save-book, kita perlu pendengar untuk acara itu di sini.

dibuat () {
eventBus. $ on ("simpan buku", cardData => {
if (cardData.category === "Buku yang baru dibaca") {
this.recentBooks.push (cardData);
}
if (cardData.category === "Buku favorit") {
this.favouriteBooks.push (cardData);
}
if (cardData.category === "Terbaik dari yang terbaik") {
this.bestOfTheBest.push (cardData);
}
});
},

Sekarang, dalam satu tampilan utuh, halaman index.vue kami terlihat seperti ini

Baru-baru ini Membaca Buku

Melihat

Edit
Menghapus

Buku Favorit

Edit
Menghapus

Terbaik dari yang terbaik

Edit
Menghapus

impor BookCard dari "@ / komponen / BookCard";
mengimpor BookModal dari "@ / komponen / BookModal";
impor {eventBus} dari "@ / eventBus";

ekspor standar {
komponen: {
Kartu Buku,
BookModal
},
data () {
kembali {
buku terbaru: [],
favouriteBooks: [],
terbaik dari yang terbaik: []
};
},
dibuat () {
eventBus. $ on ("simpan buku", cardData => {
if (cardData.category === "Buku yang baru dibaca") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Buku favorit") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Terbaik dari yang terbaik") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
metode: {
hapus (kategori, indeks) {
if (kategori === "Buku yang baru dibaca") {
this.recentBooks.splice (index, 1);
}
if (kategori === "Buku favorit") {
this.favouriteBooks.splice (index, 1);
}
if (kategori === "Terbaik dari yang terbaik") {
this.bestOfTheBest.splice (index, 1);
}
},
edit (item, indeks) {
if (item.category === "Buku yang baru dibaca") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.recentBooks.splice (index, 1);
}
if (item.category === "Buku favorit") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.favouriteBooks.splice (index, 1);
}
if (item.category === "Terbaik dari yang terbaik") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.bestOfTheBest.splice (index, 1);
}
}
}
};

Jika Anda sampai sejauh ini, Great Job !!! Kamu Menakjubkan!

Seperti disebutkan sebelumnya, setiap file .vue yang dibuat dalam folder halaman secara otomatis disediakan sebagai rute, demikian pula, untuk setiap folder yang dibuat dalam folder halaman. Ini tidak hanya berlaku untuk halaman statis, dan halaman dinamis dapat dibuat dengan cara ini juga!

Mari kita lihat caranya.

Menggunakan proyek kami saat ini, katakanlah kami ingin menambahkan halaman dinamis untuk semua kartu buku dengan tombol lihat untuk melihat detail lebih lanjut tentang buku.

Ayo cepat tambahkan tombol tampilan, dan gunakan untuk mengunjungi halaman. Ya, menggantikan dan berfungsi.

Melihat

Selanjutnya, kami membuat folder dinamis dengan mengawali nama dengan garis bawah. yaitu, _title dan di dalam folder itu, kami akan memiliki file index.vue yang di-render ketika kami mengunjungi rute itu.

Hanya untuk demonstrasi, kami hanya akan mengakses properti params di dalam file.

// _title / index.vue

{{$ route.params.title}}

Sekarang, ketika kita mengklik tampilan, itu membuka halaman lain di mana kita dapat melihat judul yang telah kita lewati rute. Ini dapat dikembangkan untuk melakukan apa pun yang kita inginkan sejauh menyangkut halaman dinamis.

Itu saja untuk pelajaran ini!

Kode lengkap untuk ini dapat ditemukan di sini gudang. Anda dipersilakan berkontribusi pada kode. Jika Anda tertarik untuk menguasai kerangka kerja, maka saya akan menyarankan ini Udemy tentu saja.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map