Membuat Aplikasi Nuxt Pertama Anda – Kedai Buku CRUD

Ketahui cara membuat aplikasi Nuxt.


CRUD – Buat, Baca, Kemas kini, Padam

Saya menganggap bahawa anda sudah mengetahui asas-asas Vue JS dan / atau anda agak biasa dengan kerangka tersebut. Nuxt JS adalah rangka kerja yang mantap, dibina di atas Vue JS. Ia pada dasarnya sama dengan Vue JS. Lalu mengapa, Nuxt?

Bagi kebanyakan orang, keputusan untuk menggunakan Nuxt JS biasanya untuk kemampuan SSRnya.

Apa itu SSR?

SSR adalah singkatan untuk Server Side Rendering.

Biasanya, untuk kebanyakan Aplikasi Halaman Tunggal (SPA), fail yang diberikan disuntik secara automatik ke DOM setelah halaman dimuat. Oleh itu, bot, perayap SEO akan menemui halaman kosong semasa memuatkan halaman. Namun, untuk SSR, kerana kemampuannya untuk membuat pra-aplikasi pada pelayan sebelum halaman, halaman tersebut dapat diindeks dengan mudah oleh perayap SEO. Ia juga menjadikan aplikasi ini lebih berprestasi daripada SPA biasa.

Nuxt JS memberi kemampuan kepada pembangun untuk membuat aplikasi SSR dengan mudah. Aplikasi Vue JS SPA biasa juga dapat dikonfigurasi untuk menggunakan SSR, tetapi prosesnya agak membebankan, dan Nuxt JS menyediakan pembungkus untuk menangani semua konfigurasi tersebut. Selain SSR, Nuxt juga menyediakan cara mudah untuk menyiapkan projek VueJS anda dengan lebih cekap.

Walaupun Nuxt JS masih Vue JS, ia mempunyai beberapa perbezaan mendasar bagaimana struktur foldernya disusun.

Fokus artikel ini adalah untuk anda dapat membina aplikasi dengan Nuxt; oleh itu, kami tidak akan menyelami arsitektur folder Nuxt, namun, saya akan menerangkan dengan cepat beberapa perkara penting yang mungkin kami perlukan di sini.

Halaman

Folder halaman adalah salah satu perbezaan mendasar dari Vue SPA biasa. Ini mewakili folder Views dalam arsitektur Vue biasa, lebih banyak lagi, di Nuxt, fail yang dibuat dalam folder Pages secara automatik disediakan sebagai rute. Maksudnya, apabila anda membuat fail index.vue dalam folder halaman, yang secara automatik menjadi laluan root anda, iaitu localhost: 3000 /.

Juga, apabila anda membuat nama fail lain.vue, ia menjadi laluan – mewujudkan about.vue membolehkan anda mengakses localhost: 3000 / about.

Anda juga boleh membuat folder dalam folder Pages. Sekiranya anda membuat folder bernama ‘contact’ dan di dalam folder tersebut, anda mempunyai email.vue, maka anda boleh mengakses localhost: 3000 / contact / email. Ia semudah itu. Dengan cara ini, anda tidak perlu membuat fail router.js secara manual seperti yang biasa anda lakukan dengan Vue JS untuk membuat laluan anda.

Komponen

Masih sama dengan Vue JS, komponen yang dibuat tidak disediakan sebagai laluan secara automatik.

Statik

Folder statik menggantikan folder awam dalam aplikasi Vue JS biasa, berfungsi hampir sama. Fail di sini tidak dapat disusun; mereka dilayan dengan cara yang sama seperti yang disimpan.

Anda boleh membaca semua tentang seni bina dan struktur di Halaman dokumentasi Nuxt JS.

Sekarang, Mari kita bina sesuatu yang menarik …

Membina aplikasi kedai buku

Kami akan membina aplikasi kedai buku, di mana pengguna dapat menambahkan buku yang telah mereka baca ke kategori tertentu yang mereka suka. Ia akan kelihatan seperti ini.

Jadi, kita akan mempunyai susun atur yang sederhana seperti di atas, hanya 3 lajur yang mengandungi bahagian buku yang berlainan. Buku yang baru dibaca, buku kegemaran, dan ya, buku terbaik dari yang terbaik (Saya akan mengaku, saya tidak tahu apa yang perlu disebut bahagian itu, ��)

Oleh itu, tujuannya adalah untuk dapat menambahkan tajuk, pengarang dan keterangan buku pada kad di mana-mana bahagian, mengedit buku yang sudah ditambahkan dan membuang buku yang ada. Kami tidak akan menggunakan pangkalan data apa pun, jadi semuanya berlaku di negeri ini.

Pertama, kami memasang Nuxt:

npm pasang create-nuxt-app

Kedua, setelah memasang Nuxt, anda kini boleh membuat projek dengan arahan,

buat-nuxt-aplikasi bukuStore

Saya memilih untuk menamakan aplikasi saya ‘bookStore’; anda boleh namakan sesuatu yang lebih menarik ^ _ ^

Kemudian, mari kita ikuti petunjuk yang tinggal, masukkan keterangan,

Nama pengarang, taipkan nama atau tekan enter untuk mengekalkan lalai

Pilih pengurus pakej, mana sahaja yang anda selesa, keduanya baik-baik saja

Pilih kerangka UI. Untuk projek ini, saya akan menggunakan Vuetify, sekali lagi, sebarang kerangka UI yang anda selesa akan berlaku dengan baik.

Pilih rangka pelayan tersuai; kami tidak memerlukannya, saya tidak akan memilih apa-apa

Modul tambahan, pilih yang anda mahukan, atau pilih keduanya, kami tidak akan menggunakannya untuk aplikasi ini.

Linting adalah penting. Mari bersama ESLint.

Walaupun ujian itu penting, kita tidak akan melihatnya hari ini, jadi tidak ada

Mod rendering, ya SSR.

Catatan: Memilih SSR tidak bermaksud kita tidak mendapat kelebihan memiliki SPA, aplikasinya tetap menjadi SPA tetapi dengan SSR. Pilihan lain bermaksud hanya SPA dan tidak ada SSR.

Tekan enter dan teruskan,

Dan projek kami sedang mencipta,

Setelah dibuat, kita sekarang boleh masuk ke direktori dan jalankan

benang dev

jika anda menggunakan npm sebagai pengurus pakej anda, gunakan,

npm jalankan dev

Secara lalai, aplikasi berjalan di localhost: 3000. Lawati pautan di penyemak imbas anda, dan anda akan melihat halaman Nuxt lalai.

Sekarang mari kita mulakan dengan membuat komponen yang kita perlukan. Kami akan mempunyai kad yang memaparkan setiap maklumat buku, dan kami akan mempunyai mod yang mengandungi borang untuk memasukkan maklumat buku baru atau mengedit yang ada.

Untuk membuat komponen, cukup buat fail baru di folder komponen. Inilah kod untuk komponen kad saya.

// BookCard.vue

{{tajuk buku}}
{{bukuAuthor}}
{{bukuDeskripsi}}

lalai eksport {
alat peraga: ["tajuk buku", "bukuPengarang", "keterangan buku"]
};

Penjelasan ringkas mengenai apa yang dilakukan di atas. Gambar itu dikodkan keras; kita tidak akan bersusah payah untuk sekarang. Judul buku, pengarang buku, dan keterangan buku diturunkan ke komponen ini dari halaman induk sebagai alat peraga. Sekiranya anda tidak biasa dengan alat peraga, bayangkan mereka sebagai titik masuk dengan komponen ini dapat diisi dengan data.

Sekarang ke komponen seterusnya, modalnya.

//BookModal.vue

Tambah Buku

Tambah

Sekarang, itu adalah markup untuk modal; kita perlu menjadikan model-v sebagai sifat data; oleh itu, kami akan menambahkan tag skrip di bawah tag.

lalai eksport {
data () {
kembali {
kategori: "",
tajuk: "",
pengarang: "",
keterangan: "",
};
},
}

Juga, terdapat dropdown ‘Pilih Kategori’ yang mengharapkan data ‘kategori’. Kami akan menambahkannya pada data.

lalai eksport {
data () {
kembali {
terbuka: palsu,
kategori: "",
tajuk: "",
pengarang: "",
keterangan: "",
kategori: ["Buku yang baru dibaca", "Buku kegemaran", "Terbaik dari yang terbaik"]
};
},
}

Sekarang, kita memerlukan cara untuk menukar modalnya terbuka dan tutup, buat masa ini, kita hanya akan memiliki harta data ‘terbuka’ seperti di atas. Kami akan melihatnya dengan teliti selepas ini.

Mari buat halaman paparan kami dengan cepat di mana kami akan mempunyai tiga kotak / lajur, satu untuk setiap bahagian buku. Mari panggil index.vue halaman, lihat kod di bawah.

//index.vue

Buku yang Baru Dibaca

Buku Kegemaran

Terbaik dari yang terbaik

Sekarang kita mempunyai grid, kita perlu menambahkan komponen kad kita ke setiap grid, untuk setiap buku yang ditambahkan. Oleh itu, kami akan mengimport komponen BookCard.vue kami.

Buku yang Baru Dibaca

Edit
Keluarkan

Buku Kegemaran

Edit
Keluarkan

Terbaik dari yang terbaik

Edit
Keluarkan

Sekarang, kami telah mengimport komponen BookCard dan telah mengikat propsnya untuk mendapatkan hasil dari loop; ini memastikan bahawa untuk setiap entri yang ditambahkan ke mana-mana bahagian, ada kad yang dibuat untuknya. Juga, pada setiap kad, kami akan memasukkan butang untuk mengedit atau mengeluarkan kad.

Sekarang, kita perlu mengimport kad dari skrip dan menentukan tatasusunan yang akan menyimpan rekod untuk setiap kategori.

import BookCard dari "@ / komponen / Kad Buku";

lalai eksport {
komponen: {
Kad Buku,
},
data () {
kembali {
Buku terkini: [],
Buku favourite: [],
terbaik dari yang terbaik: []
};
},
};

Seterusnya, kita perlu mempunyai butang di tajuk yang akan membuka modal setiap kali kita perlu menambahkan buku. Kami akan melakukannya dalam fail ‘default.vue’. Kami akan menambah butang ke tajuk bar aplikasi lalai.

Tambah Buku

Seterusnya, kita memerlukan kaedah openModal di bahagian skrip. Dalam aplikasi Vue JS biasa, ada bas acara yang membolehkan anda berkomunikasi dengan komponen lain dan bahkan menyebarkan data, di Nuxt JS, masih ada bus acara dan anda masih boleh membuatnya dengan cara yang sama. Jadi, kami akan menggunakan bus acara untuk menyampaikan data yang membuka modal di halaman index.vue (yang belum kami import) dari file layout / default.vue.

Mari lihat bagaimana ia dilakukan.

Untuk membuat bus acara global, buka fail di direktori root projek, beri nama eventBus.js dan tampal kod di bawahnya.

import Vue dari ‘vue’

eksport const eventBus = Vue baru ()

Ya, itu sahaja. Sekarang kita boleh menggunakannya.

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

Seterusnya, kami akan kembali ke komponen BookModal kami, dan mendengar bila eventBus memancarkan ‘open-add-book-modal’. Kami akan menambahkannya ke bahagian skrip.

import {eventBus} dari "@ / eventBus";

dibuat () {
eventBus. $ pada ("buka-tambah-buku-modal", ini.buka = ​​benar);
},

Sekarang, kita boleh membuka dan menutup modal kita, tetapi belum menambah buku. Mari tambahkan kaedah ke Modal kami untuk menjadikannya menyimpan apa yang ditambahkan ke keadaan (ingat kami tidak menggunakan pangkalan data atau penyimpanan tempatan). Kami menambahkannya di sebelah ‘create ()’

kaedah: {
simpanBuku () {
biarkan kadData = {
tajuk: ini.title,
pengarang: this.author,
keterangan: ini.keterangan,
kategori: ini.kategori
};
eventBus. $ emit ("buku simpanan", kadData);
ini.open = palsu;
}
}

Seterusnya, kita memerlukan cara untuk mengisi kembali modal ketika kita mengedit data dari salah satu kad. Oleh itu, mari kita buat beberapa penyesuaian pada ‘yang dibuat ()’

dibuat () {
eventBus. $ pada ("buka-tambah-buku-modal", data => {
sekiranya (data) {
ini.category = data.category;
ini.title = data.title;
ini.author = data.author;
ini.deskripsi = data.deskripsi;
}
ini.buka = ​​benar;
});
},

Kini, BookModal kelihatan seperti ini secara keseluruhan,

//BookModal.vue

Tambah Buku

Tambah

import {eventBus} dari "@ / eventBus";
lalai eksport {
data () {
kembali {
terbuka: palsu,
kategori: "",
tajuk: "",
pengarang: "",
keterangan: "",
kategori: ["Buku yang baru dibaca", "Buku kegemaran", "Terbaik dari yang terbaik"]
};
},
dibuat () {
eventBus. $ pada ("buka-tambah-buku-modal", data => {
sekiranya (data) {
ini.category = data.category;
ini.title = data.title;
ini.author = data.author;
ini.deskripsi = data.deskripsi;
}
ini.buka = ​​benar;
});
},
kaedah: {
simpanBuku () {
biarkan kadData = {
tajuk: ini.title,
pengarang: this.author,
keterangan: ini.keterangan,
kategori: ini.kategori
};
eventBus. $ emit ("buku simpanan", kadData);
ini.open = palsu;
}
}
};

Seterusnya, kita sekarang boleh kembali ke halaman index.vue untuk mengimport komponen BookModal. Kami akan menambahkannya ke bahagian skrip.

import BookCard dari "@ / komponen / Kad Buku";
import BookModal dari "@ / komponen / BookModal";
import {eventBus} dari "@ / eventBus";

lalai eksport {
komponen: {
Kad Buku,
Modal Buku
},
data () {
kembali {
Buku terkini: [],
Buku favourite: [],
terbaik dari yang terbaik: []
};
},

Juga, dalam badan, kita akan menambah,

Kami memerlukan kaedah untuk mengedit dan mengeluarkan kad. Pada templat sebelumnya, saya sudah meneruskan kaedah edit dan hapus ke butang seperti yang ditunjukkan di bawah, begitu juga, saya meneruskan argumen yang diperlukan untuk setiap kaedah.

Edit Buang

Mari buat kaedah.

kaedah: {
buang (kategori, indeks) {
jika (kategori === "Buku yang baru dibaca") {
this.recentBooks.splice (indeks, 1);
}
jika (kategori === "Buku kegemaran") {
this.favouriteBooks.splice (indeks, 1);
}
jika (kategori === "Terbaik dari yang terbaik") {
this.bestOfTheBest.splice (indeks, 1);
}
},
sunting (item, indeks) {
jika (item.category === "Buku yang baru dibaca") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.recentBooks.splice (indeks, 1);
}
jika (item.category === "Buku kegemaran") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.favouriteBooks.splice (indeks, 1);
}
jika (item.category === "Terbaik dari yang terbaik") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.bestOfTheBest.splice (indeks, 1);
}
}
}

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

dibuat () {
eventBus. $ pada ("buku simpanan", kadData => {
jika (cardData.category === "Buku yang baru dibaca") {
this.recentBooks.push (kadData);
}
jika (cardData.category === "Buku kegemaran") {
this.favouriteBooks.push (kadData);
}
jika (cardData.category === "Terbaik dari yang terbaik") {
ini.bestOfTheBest.push (kadData);
}
});
},

Sekarang, secara keseluruhan, halaman index.vue kami kelihatan seperti ini

Buku yang Baru Dibaca

Pandangan

Edit
Keluarkan

Buku Kegemaran

Edit
Keluarkan

Terbaik dari yang terbaik

Edit
Keluarkan

import BookCard dari "@ / komponen / Kad Buku";
import BookModal dari "@ / komponen / BookModal";
import {eventBus} dari "@ / eventBus";

lalai eksport {
komponen: {
Kad Buku,
Modal Buku
},
data () {
kembali {
Buku terkini: [],
Buku favourite: [],
terbaik dari yang terbaik: []
};
},
dibuat () {
eventBus. $ pada ("buku simpanan", kadData => {
jika (cardData.category === "Buku yang baru dibaca") {
this.recentBooks.push (kadData);
this.recentBooks.sort ((a, b) => b – a);
}
jika (cardData.category === "Buku kegemaran") {
this.favouriteBooks.push (kadData);
ini.favouriteBooks.sort ((a, b) => b – a);
}
jika (cardData.category === "Terbaik dari yang terbaik") {
ini.bestOfTheBest.push (kadData);
ini.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
kaedah: {
buang (kategori, indeks) {
jika (kategori === "Buku yang baru dibaca") {
this.recentBooks.splice (indeks, 1);
}
jika (kategori === "Buku kegemaran") {
this.favouriteBooks.splice (indeks, 1);
}
jika (kategori === "Terbaik dari yang terbaik") {
this.bestOfTheBest.splice (indeks, 1);
}
},
sunting (item, indeks) {
jika (item.category === "Buku yang baru dibaca") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.recentBooks.splice (indeks, 1);
}
jika (item.category === "Buku kegemaran") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.favouriteBooks.splice (indeks, 1);
}
jika (item.category === "Terbaik dari yang terbaik") {
eventBus. $ emit ("buka-tambah-buku-modal", barang);
this.bestOfTheBest.splice (indeks, 1);
}
}
}
};

Sekiranya anda berjaya sejauh ini, Kerja Hebat !!! Awak hebat!

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

Mari lihat bagaimana.

Dengan menggunakan projek kami sekarang, katakanlah kami ingin menambahkan halaman dinamik untuk semua kad buku dengan butang pandangan untuk melihat lebih banyak perincian mengenai buku.

Mari tambah butang tontonan dengan cepat, dan gunakan a untuk melawat halaman. Ya, menggantikan dan ia berfungsi.

Pandangan

Seterusnya, kami membuat folder dinamik dengan awalan nama dengan garis bawah. iaitu, _title dan di dalam folder itu, kita akan mempunyai fail index.vue yang akan diberikan ketika kita mengunjungi laluan tersebut.

Hanya untuk demonstrasi, kami hanya akan mengakses harta tanah parameter dalam fail.

// _title / index.vue

{{$ route.params.title}}

Sekarang, apabila kita mengklik paparan, ia membuka halaman lain di mana kita dapat melihat tajuk yang telah kita lalui sepanjang laluan tersebut. Ini dapat dikembangkan untuk melakukan apa sahaja yang kita mahukan sehubungan dengan halaman dinamik.

Itu sahaja untuk pelajaran ini!

Kod lengkap untuk ini boleh didapati di sini repositori. Anda dipersilakan untuk menyumbang kepada kod tersebut. Sekiranya anda berminat untuk menguasai kerangka kerja, maka saya akan mencadangkannya Kursus Udemy.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector