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

Membuat Aplikasi Blogging Menggunakan Angular & MongoDB: Edit 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: Add Post
Creating a Blogging App Using Angular & MongoDB: Delete Post

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

Di bahagian sebelumnya dalam siri tutorial ini, anda belajar bagaimana membuat komponen tambah pos untuk menambah catatan blog baru. Anda belajar bagaimana membuat titik akhir REST API untuk menambah jawatan baru ke pangkalan data MongoDB.

Dalam bahagian tutorial ini, anda akan belajar cara melaksanakan fungsi untuk mengedit postingan blog yang ada dari senarai postingan blog.

Bermula

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

Navigasi ke direktori projek dan pasangkan dependencies yang diperlukan.

Setelah Anda memiliki dependensi yang terinstal, restart klien dan aplikasi server.

Arahkan browser Anda ke http://localhost:4200 dan Anda akan menjalankan aplikasi.

Menambahkan Tampilan Pos Sunting

Di ShowPostComponent, Anda akan menambahkan dua ikon untuk mengedit dan menghapus posting blog. Anda akan menggunakan Font Awesome untuk menampilkan ikon edit dan hapus.

Unduh dan sertakan folder keren font di folder assets.

Font Awesome In Assets Folder

Di halaman src/app/index.html, sertakan referensi ke font gaya CSS yang mengagumkan.

Sekarang modifikasi file show-post/show-post.component.html untuk menyertakan HTML untuk ikon edit dan hapus.

Berikut adalah bagaimana file show-post.component.html terlihat:

Simpan perubahan di atas dan mulai ulang aplikasi klien. Masuk ke aplikasi dan Anda akan dapat melihat ikon edit dan hapus yang terkait dengan setiap posting blog yang terdaftar.

Angular Blog App - Edit And Delete Icon

Mengisi Edit Detail dalam Popup

Ketika pengguna mengklik ikon edit yang terkait dengan setiap posting blog, Anda perlu mengisi rincian posting blog di add post popup untuk memperbarui.

Tambahkan metode klik ke ikon edit.

Di dalam CommonService, Anda perlu menentukan yang dapat diamati untuk melacak kapan tombol edit diklik. Tentukan yang bisa diamati seperti yang ditunjukkan:

Tentukan variabel lain untuk melacak posting yang akan diedit.

Setiap kali tombol edit diklik, Anda akan menyimpan pos untuk diedit di CommonService dan memicu pengamatan untuk memberi tahu tentang kiriman pos. Tentukan dua metode untuk mengatur posting yang akan diedit dan untuk memberitahukan posting edit.

Di dalam metode klik, Anda akan memanggil metode setPostToEdit dari CommonService. Berikut ini bagaimana metode editPost terlihat:

Anda akan memiliki detail posting di layanan umum ketika pengguna mengklik tombol edit. Untuk menampilkan munculan posting tambahan untuk pembaruan, Anda perlu mengklik tombol tambah posting secara terprogram.

Di dalam file home/home.component.html, tambahkan pengenal # ke tombol tambah posting.

Import ViewChild dan ElementRef di dalam fail home.component.ts.

Tentukan rujukan pada butang tambah di dalam fail home.component.ts.

Di dalam constructor HomeComponent, langgan postEdit_Observable dari CommonService. Apabila memanggil panggilan balik langganan postEdit_Observable, gunakan butang klik tambah untuk menunjukkan pop timbul. Inilah bagaimana file home.component.ts kelihatan:

Anda perlu melanggan postEdit_Observable dalam fail add-post.component.ts untuk menetapkan siaran untuk diedit pada variabel post. Inilah cara kaedah ngOnInit dalam add-post.component.ts kelihatan:

Simpan perubahan di atas dan mulakan semula pelayan klien. Log masuk ke aplikasi dan klik pada butang edit terhadap sebarang catatan blog. Anda akan dapat melihat butiran pos yang dihuni dalam pop pos tambahan.

Angular Blog App - Update Post

Membuat REST API Post Update

Dalam server/app.js, mari tentukan satu lagi titik akhir API REST untuk mengemas kini butiran pos berdasarkan ID jawatan. Inilah caranya:

Mari kita gunakan Mongoose dahulu untuk menyambung ke pangkalan data MongoDB.

Setelah sambungan ditubuhkan, anda menggunakan kaedah update pada model Pos.

Anda akan mengemas kini jawatan berdasarkan ID jawatan yang diluluskan. Seperti yang dilihat dalam kod di atas, anda telah menetapkan jawatan _id tersebut untuk dikemas kini. Dalam pilihan kedua, anda telah menentukan medan untuk dikemas kini, yang itu title dan description.

Sebaik sahaja butiran dikemas kini, anda akan mengembalikan status bersama dengan bilangan baris yang terjejas semasa kemas kini. Berikut ialah cara titik akhir REST API untuk kemas kini pos kelihatan:

Membuat Panggilan API REST untuk Kemas Kini

ID yang dikembalikan untuk setiap jawatan dari MongoDB adalah _id, jadi anda perlu mengubah suai id model src/app/models/post.model.ts kami. Inilah caranya:

Apabila anda mengklik butang tambah pos, kaedah yang dipanggil akan addPost. Di dalam kaedah addPost dalam add-post.component.ts, anda akan menyemak jika objek post mempunyai _id. Sekiranya ada _id, maka anda perlu memanggil kaedah kemas kini dari perkhidmatan, yang lain anda akan memanggil kaedah perkhidmatan tambah post.

Buat satu kaedah yang dipanggil updatePost di dalam fail add-post.service.ts.

Inilah cara kaedah addPost yang diubahsuai dari fail add-post.component.ts kelihatan:

Simpan perubahan di atas dan mulakan semula kedua pelayan sudut dan nod. Log masuk ke aplikasi dan cuba menyunting siaran. Anda akan mempunyai pop timbul yang dipaparkan untuk mengedit butiran mengenai mengklik butang edit. Klik butang tambah dan butiran akan dikemas kini dan dipaparkan dalam senarai postingan blog.

Wrapping It Up

Dalam tutorial ini, anda melaksanakan fungsi untuk mengemas kini butiran pos blog sedia ada. Anda telah mencipta titik akhir REST API belakang untuk mengemas kini butiran catatan blog berdasarkan ID pos blog. Anda menggunakan klien Mongoose untuk mengemas kini butiran jawatan blog dalam pangkalan data MongoDB.

Di bahagian seterusnya, anda akan melaksanakan fungsi padamkan dan log keluar.

Bagaimana pengalaman anda setakat ini? Jangan beritahu kami fikiran, cadangan, atau sebarang pembetulan dalam ulasan di bawah.

Kod sumber dari tutorial ini boleh didapati di GitHub.

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.