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

Mulai Membangun Blog Anda Dengan Parse.js: Refactor

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog With Parse.js: Edit
Get Started Building Your Blog With Parse.js: Delete, Logout, and Single Blog View

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam enam sesi sebelumnya, Anda telah membangun sistem blogging dari nol. Semuanya berjalan, dan itu hebat! Namun, kode itu sendiri sangat berantakan — kami telah merapikan bersama-sama dan meninggalkan banyak kode berulang dan solusi sementara di belakang. Sesi ini akan fokus pada bagaimana Anda dapat membersihkan hal-hal dan memperbaiki beberapa masalah, kami telah memiliki.

1. Gabung index.html dan admin.html

Pertama-tama, karena kita memiliki sebuah router sekarang (jika Anda melewatkan sesi, periksa Bagian 5: Router), kita tidak lagi perlu dua terpisah .html dan .js file. Mari kita menggabungkannya bersama-sama.

Langkah 1: Menggabungkan File

Pada titik ini, saya akan menyarankan penggabungan admin.html dan admin.js dan mengganti sebagai index.html dan blog.js karena mereka memiliki lebih banyak logika dan kode, tetapi Anda dapat melakukannya baik cara. Ini harus cukup sederhana.

Jika Anda mengubah nama file, hanya pastikan Anda link ke blog.js di index.html baru (sebelumnya admin.html). Juga, ingat untuk menyalin atas #blogs-tpl dari file index.html yang lama ke yang baru dan Salin atas BlogsView dari file blog.js lama ke yang baru.

Sekarang mengunjungi http://localhost/your-directory/ dan Anda harus melihat layar login dengan default (atau admin layar jika Anda login sudah).

rename admin page

Langkah 2: Update Router

Kemudian, kita dapat menambahkan pola URL baru router untuk mencocokkan URL akar untuk fungsi baru; kita dapat menyebutnya index():

Fungsi index() ini harus membuat apa yang ada sebelumnya di homepage.

Dan untuk melihatnya bekerja, mari kita default redirect ke URL itu ketika router dimulai:

Langkah 3: Update Nav

Hal berikutnya adalah untuk memperbarui bar navigasi di atas. Mari kita mengubah file HTML ke URL berikut:

Dan bagi mereka untuk bekerja, kita perlu menambahkan event ke .blog-nav-item menggunakan blogRouter.navigate() daripada default link event:

Dan mari kita tambahkan logika untuk beralih kelas .active, terlalu:

Sekarang jika Anda klik di sekitar, segala sesuatu harus bekerja!

2. Gabung Tambah dan Edit

Pindah, kita bisa melihat AddBlogView dan EditBlogView yang cukup mirip. Jadi adalah update() akan membuat dan create() fungsi di kelas Blog. Mari kita menggabungkan mereka juga.

Langkah 1: Menggabungkan #add-tpl dan #edit-tpl

Pertama, mari kita menggabungkan dua buah template di index.html menjadi #write-tpl.

Anda dapat melihat bahwa itu adalah pada dasarnya #edit-tpl dengan perubahan nama kelas dan judul form dinamis. Kami hanya akan melewati "" ke dalam title dan content ketika menambahkan blog baru.

Langkah 2: Gabungkan update() dan create() Fungsi

Selanjutnya, mari kita menggabungkan fungsi update() akan membuat dan create() di kelas Blog. Kita dapat rantai this.set().save() fungsi untuk update() akan membuat dan create(). Untuk bidang yang tidak perlu disentuh oleh update() akan membuat fungsi, kita dapat mengisi dengan nilai saat ini:

Langkah 3: Menggabungkan AddBlogView dan EditBlogView

Sekarang, saatnya untuk menggabungkan kedua-dua view:

Perhatikan bagaimana Anda dapat menggunakan if(this.model) untuk pivot antara menambahkan dan mengedit fungsi.

Langkah 4: Update Router

Akhirnya, mari kita link ke WriteBlogView ini baru dalam router. Hanya mengubah kedua view ke WriteBlogView dan itu masih tetap bekerja seperti biasa.

Perhatikan bahwa Anda juga harus mengirim visitor kembali ke halaman login jika mereka belum masuk.

3. Tambahkan Access Control List to Blogs

Sekarang bahwa kita telah mengambil semua kode berulang, kita sekarang dapat melanjutkan ke beberapa fitur kami dapat meningkatkan.

Banyak dari Anda bertanya bagaimana kami menjaga data aman jika API adalah dalam kode. Parse.js menyediakan tingkat-kelas dan tingkat item Access Control Lists (ACL) untuk membantu mengelola akses pengguna. Kami telah berbicara tentang tingkat-kelas ACL di Bagian 3: User Login. Hari ini, saya akan menunjukkan Anda bagaimana untuk menambahkan ACL item-level.

Sebagai contoh, mari kita asumsikan kita ingin setiap blog hanya untuk dapat diedit oleh penulis asli.

Untuk membuat hal itu terjadi, kita perlu untuk mengatur field ACL dalam fungsi update() akan membuat:

4. Root dan Static URL

Isu lain yang banyak dari Anda mungkin merasa adalah cukup sulit untuk menguji sistem blog Anda menciptakan. Setiap kali Anda menguji, Anda harus kembali ke http://localhost/your-directory/ untuk trigger router.

Mari selesaikan masalah ini dulu.

Langkah 1: Tambahkan Root di BlogRouter.start()

Parse.js membuatnya sangat mudah untuk melakukannya, jadi mari kita hanya mengubah BlogRouter.start() fungsi untuk mengatur root file.

Perhatikan bahwa kita dapat mengambil this.navigate() fungsi sekarang.

Langkah 2: Statis URL

Masalah lainnya dengan URL yang kita miliki sekarang adalah bahwa mereka tidak dapat bookmarked atau revisited. Segala sesuatu yang ingin Anda lakukan, Anda perlu mulai dari URL utama. Misalnya, jika Anda mengunjungi http://localhost/blog/admin, router diatur untuk menerima pola URL ini tapi server masih kembali 404. Hal ini karena ketika Anda mengunjungi /admin, server Anda tidak tahu harus benar-benar pergi ke index.html untuk memulai router di tempat pertama.

Salah satu cara untuk memecahkan masalah ini adalah mengkonfigurasi server Anda jadi pengalihan semua URL untuk index.html. Tapi itu tidak benar-benar dalam lingkup kelas ini. Kita akan mencoba metode lainnya: menambahkan #/ sebelum semua URL kami.

URL dari admin panel akan terlihat seperti ini: http://localhost/blog/#/admin. Ianya tidak benar-benar ideal, tetapi itu adalah cara yang mudah. Ketika browser bertemu /#, itu tidak akan memperlakukan seluruh URL sebagai file path; Sebaliknya, itu akan mengarahkan pengguna untuk index.html, jadi kami Router dapat mengambil sisanya.

Sekarang, mari kita mulai dan mengubah href atribut dari semua <a> tag index.html dari sesuatu seperti ini:

untuk sesuatu seperti ini:

Demikian pula, mari kita mengubah semua BlogApp.navigate() di blog.js dari sesuatu seperti ini:

untuk sesuatu seperti ini:

Anda dapat mengambil beberapa event menggunakan tag <a>.

Misalnya, tombol "Tambah Blog baru" yang digunakan untuk menggunakan event:

Kita dapat mengambil orang-orang dan mengubahnya ke link dalam index.html:

Anda juga dapat mengambil fungsi ini karena URL akan bekerja sendiri:

Mari kita juga mengambil kelas active untuk sekarang, tapi kami akan menambahkannya kembali dan membuatnya bekerja dalam sesi kemudian dengan cara lain.

Alright, pergi melalui blog Anda, tes, dan pastikan semua link yang sekarang http://localhost/#/... kecuali homepage.

Sekarang Anda memiliki URL yang Anda dapat refresh dan revisit. Berharap ini membuat hidup Anda jauh lebih mudah!

Bonus: Perbaikan dan Perbaikan Lainnya

Jika Anda tidak keberatan tutorial Super panjang dan ingin membuat beberapa lebih banyak improvement, berikut adalah beberapa perbaikan dan perbaikan yang dapat Anda lakukan.

Langkah 1: Sort

Satu hal yang Anda mungkin juga melihat adalah bahwa blog diurutkan dari awal ke terbaru. Biasanya kita harapkan untuk melihat blog terbaru pertama. Jadi mari kita mengubah kumpulan Blogs untuk mengurutkannya dalam urutan:

Langkah 2: Redirect ke WelcomeView setelah update()

Berikut adalah hal lain yang kita dapat improve. Bukan bermunculan notifikasi setelah memperbarui blog, mari kita hanya membuat redirect ke halaman /admin:

Langkah 3: Menggabungkan AdminView di WelcomeView

Jika Anda masuk ke dalam pembersihan, Anda juga dapat menggabungkan AdminView dan WelcomeView menjadi satu — tidak perlu nyata untuk memiliki dua view yang terpisah.

Sekali lagi, template HTML pertama:

Kemudian Mari kita ubah BlogRouter.admin() untuk meneruskan username untuk AdminView:

Dan kemudian mewariskan username yang akan dirender dalam #admin-tpl:

Langkah 4: $container

Akhirnya, kita dapat menyimpan $('.main-container') sebagai variabel untuk menghindari membuat beberapa query.

Dan hanya mengganti semua $('.main-container') dengan $container.

Kesimpulan

Pertama-tama, selamat untuk membuat sampai akhir! Sudah sesi panjang, tetapi Anda telah dibersihkan seluruh proyek. Selain itu, Anda juga ditambahkan ACL ke blog, mengimplementasikan URL statis, dan membuat banyak dari perbaikan lainnya. Sekarang ini adalah sebuah proyek yang benar-benar solid.

Di sesi berikutnya, kita akan mempercepat hal-hal dan menambahkan tiga fungsi baru: satu Lihat blog, menghapus sebuah blog, dan logout, karena sekarang Anda memiliki pemahaman yang baik dari Parse.js dan dapat bergerak maju lebih cepat. Saya akan merekomendasikan berpikir tentang bagaimana untuk menulis fungsi-fungsi terlebih dahulu sehingga Anda dapat menguji pengetahuan Anda sedikit. Selain itu, nantikan!

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.