Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular

Membuat Aplikasi Blogging Menggunakan Angular & MongoDB: Delete Post

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Edit Post

Malay (Melayu) translation by Neurion (you can also view the original English article)

Di bahagian sebelumnya dalam siri tutorial ini, anda belajar bagaimana untuk melaksanakan fungsinya untuk mengedit butiran kiriman blog.

Di bahagian ini, anda akan melaksanakan fungsi untuk memadamkan pos blog sedia ada dan untuk melaksanakan fungsi log keluar pengguna.

Bermula

Mari bermula dengan mengklonkan kode sumber dari bahagian terakhir siri tutorial.

Navigasi ke direktori projek dan pasangkan dependencies yang diperlukan.

Sebaik sahaja anda memasang dependencies, mulakan semula aplikasi klien dan pelayan.

Tunjukkan penyemak imbas anda ke http://localhost 4200 dan anda akan mempunyai aplikasi berjalan.

Menambah Pengesahan Padam

Anda telah menambah ikon padam pada catatan blog tersenarai. Apabila pengguna mengklik ikon memadam sepadan dengan mana-mana catatan blog, anda perlu menunjukkan pop konfirmasi padam. Jika pengguna mengesahkan proses pemadaman maka hanya catatan blog yang perlu dihapuskan.

Mari mulakan dengan menambah pengesahan pop timbul modal apabila pengguna mengklik butang padam. Tambahkan kod pop modal berikut ke fail show-post.component.html.

Ubah suai ikon padam untuk menyertakan atribut data-target seperti yang ditunjukkan:

Simpan perubahan di atas dan mulakan semula pelayan klien. Masuk ke dalam aplikasi dan klik pada ikon memadam sepadan dengan mana-mana blog post, dan anda akan mendapat modal pengesahan muncul.

Angular Blog App - Delete Confirmation Pop Up

Mewujudkan API Posting Blog Padam

Mari buat titik akhir API REST untuk memadam catatan blog. Dalam fail server/app.js, buat titik akhir API REST untuk mengendalikan penghapusan catatan blog berdasarkan id post blog. Berikut adalah cara endpoint API REST kelihatan:

Mulakan dengan menyambung ke pangkalan data MongoDB menggunakan pelanggan Mongoose.

Anda akan menggunakan kaedah findByIdAndRemove untuk mencari catatan blog menggunakan id dan memadamkannya. Sebaik sahaja catatan blog telah berjaya dihapuskan, anda akan mengembalikan status sebagai respons. Berikut adalah cara endpoint API REST kelihatan:

Membuat Panggilan ke API Padam

Apabila pengguna mengklik ikon padam, anda perlu menyimpan butir-butir pos dalam pemboleh ubah. Jika pengguna meneruskan pilihan memadam selepas pengesahan, anda akan membuat panggilan ke API REST padam.

Tambah kaedah yang dipanggil setDelete pada klik butang padam dalam show-post.component.html. Inilah caranya:

Di dalam fail show-post.ponent.ts, tentukan pembolehubah yang dipanggil post_to_delete.

Tentukan kaedah yang dipanggil setDelete di dalam show-post.component.ts untuk memastikan butiran pos dihapuskan.

Apabila pengguna mengklik butang batalkan popup, anda perlu memanggil kaedah yang dipanggil unsetDelete untuk menetapkan post_to_delete ke null. Inilah caranya:

Inilah caranya butang Cancel kod HTML untuk paparan show-post.component.html:

Sekarang mari kita tentukan kaedah perkhidmatan yang dipanggil deletePost di dalam fail show-post.service.ts. Inilah caranya:

Untuk memanggil kaedah perkhidmatan dari ShowPostComponent, tentukan kaedah yang dipanggil deletePost yang akan melanggan kaedah deletePost dari ShowPostService. Inilah cara kaedah deletePost dari ShowPostComponent kelihatan:

Sebaik sahaja siaran telah dipadamkan, anda perlu menyegarkan semula senarai siaran, oleh itu anda perlu membuat panggilan ke kaedah getAllPost. Anda juga perlu menutup popup sebaik sahaja penghapusan berjaya.

Pertama, import rujukan kepada ViewChild dan ElementRef dalam fail show-post.component.ts.

Tentukan pembolehubah closeBtn untuk membuat rujukan kepada butang tutup popup.

Sekarang, apabila panggilan padam berjaya, anda perlu menutup pop konfirmasi padam.

Berikut ialah cara kaedah deletePost yang diubah suai:

Inilah bagaimana paparan show-post-component.ts kelihatan:

Simpan perubahan di atas dan mulakan semula aplikasi klien dan pelayan. Masuk ke aplikasi dan klik ikon padam yang sepadan dengan mana-mana pos blog. Anda akan mempunyai kotak pengesahan muncul. Sahkan penghapusan catatan blog, dan catatan blog akan dihapuskan dan senarai postingan blog akan dikemas kini.

Mengendalikan Sesi Pengguna Semasa Pendaftaran

Apabila pengguna mendaftar masuk ke aplikasi, anda akan menyimpan nama pengguna yang log masuk di dalam localstorage. Ubah suai kaedah validateLogin di dalam LoginComponent untuk menyimpan nama pengguna log masuk di localstorage.

Apabila hasil daripada panggilan API disahkan, tambah kod berikut untuk menyimpan nama pengguna log masuk.

Berikut adalah cara kaedah validateLogin kelihatan:

Sekarang, di dalam fail home.component.html, tambahkan kaedah yang dipanggil logout ke butang log keluar.

Di dalam fail home.component.ts, buat kaedah yang dipanggil logout. Di dalam kaedah logout, anda perlu membersihkan storan setempat untuk loggedInUser ialah cara kaedahnya kelihatan:

Dalam kaedah pembina HomeComponent, anda perlu menambah cek untuk kunci simpanan tempatan loggedInUser. Sekiranya tidak dijumpai, anda perlu mengarah semula ke halaman log masuk. Inilah bagaimana file home.component.ts kelihatan:

Simpan perubahan di atas dan mulakan semula pelayan klien. Cuba akses ke halaman rumah dengan memuat URL http:// localhost: 4200/ rumah dalam tetingkap penyemak imbas. Anda akan dialihkan ke halaman log masuk.

Masuk ke aplikasi dan klik butang log keluar. Anda akan dilog keluar dan dialihkan semula ke halaman log masuk.

Wrapping It Up

Dalam bahagian tutorial ini, anda belajar bagaimana untuk melaksanakan penghapusan catatan blog dengan menambah ikon ke senarai postingan blog. Anda juga membuat API REST untuk memadamkan butiran catatan blog dari pangkalan data MongoDB menggunakan klien Mongoose.

Anda hanya melaksanakan ciri-ciri asas aplikasi blog, dan aplikasi ini boleh terus dibangunkan untuk memasukkan lebih banyak ciri.

Bagaimana pengalaman pembelajaran anda untuk membuat aplikasi blog menggunakan Angular dan MongoDB? Tolong beritahu kami fikiran dan saran anda dalam komen di bawah.

Kod sumber dari tutorial ini boleh didapati di GitHub.

Dan akhirnya, ingatlah bahawa JavaScript adalah bahasa web. Ia bukan tanpa lengkung pembelajaran, tetapi jika anda mencari sumber tambahan untuk belajar atau menggunakan dalam kerja anda, periksa apa yang ada di EnvatoMarket.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.