‫Instruktur: Jadi dalam
‫video ini kita akan belajar bagaimana mengurai beberapa
‫variabel dari URL agar dapat membangun halaman produk.
‫Jadi ingat bagaimana awalnya
‫saya mengimpor modul URL, jadi
‫yang ini di
‫sini, agar dapat mengurai variabel langsung dari URL.
‫Oke. Jadi, sebagai langkah pertama,
‫mari
‫kita log "req. url" ke konsol dan
‫kemudian hal lain yang ingin saya log adalah sebenarnya...
‫hasil menggunakan "url. parse" di URL ini.
‫Jadi, sekali lagi, parse pada dasarnya adalah mengurai
‫variabel dari URL.
‫Jadi, sesuatu seperti ini.
‫Jadi, yang kita inginkan adalah "id = 0", kan,
‫karena saat ini, "req. url" adalah semua ini, jadi
‫seluruh URL
‫ini, dan tentu saja, kami tidak
‫memiliki rute untuk itu.
‫Jadi tidak ada router seperti ini yang kami miliki di sini,
‫yang benar-benar cocok dengan seluruh URL ini.
‫Jadi itu sebabnya kami mendapatkan "Halaman tidak Ditemukan! "Dan itu
‫juga mengapa kita perlu mengubah beberapa hal di sini.
‫Oke, jadi izinkan saya menguraikan URL di sini, sehingga Anda
‫dapat melihat hasilnya untuk
‫melihat apa yang perlu kita lakukan selanjutnya.
‫Saya juga perlu meneruskan "benar" di sini ke fungsi
‫parse ini untuk benar-benar mengurai kueri menjadi objek.
‫Jadi, dengan kueri, maksud saya bagian ini di sini.
‫Oke, jadi ini disebut string kueri,
‫oke, dan itulah yang kami parsing secara efektif, bagian
‫itu dari URL.
‫Jadi restart
‫dan mari kita lihat log yang kita dapatkan.
‫Jadi, yang pertama adalah "req. url" dan
‫inilah yang kami harapkan, benar, dan inilah
‫hasil dari melakukan "url. parse" Jadi kita
‫mendapatkan objek kueri di sini, dan
‫di sini, kita memiliki objek bagus
‫yang memberi tahu kita bahwa id adalah 0,
‫benar, jadi itu indah.
‫Dan kemudian, tepat di bawah itu,
‫kita sebenarnya memiliki bagian
‫kedua yang kita butuhkan, yang hanya nama path, oke.
‫Jadi, rute kami menggunakan nama
‫jalur ini, jadi cukup "/ produk," dan kemudian kami
‫perlu mengetahui kueri untuk merespons sesuai dengan id 0.
‫Jadi dalam hal
‫ini misalnya loading produk alpukat yang pertama.
‫Tapi kalau yang
‫nomor dua misalnya, maka isi brokoli ini, kan.
‫Dan kueri ini dan nama jalur ini adalah apa
‫yang akan kita gunakan untuk melakukan itu.
‫Jadi, yang satu ini tidak kita perlukan lagi.
‫Kami juga tidak ingin mencatat apa pun ke
‫konsol sekarang karena yang ingin kami
‫lakukan adalah membuat dua variabel, yang disebut query
‫dan ...
‫nama jalur.
‫Dan kita dapat melakukannya dengan menggunakan stacks, structuring.
‫Jadi, sekali lagi, saya harap
‫Anda terbiasa dengan sintaks ini di sini, dan inilah cara kerjanya.
‫Jadi, objek ini di sini, memiliki query dan pathName.
‫Jadi dengan menggunakan penataan
‫seperti ini, dengan nama properti yang
‫tepat ini, sebenarnya harus seperti ini.
‫Jadi dengan dua nama properti
‫yang tepat ini, itu akan membuat dua
‫variabel ini, satu disebut query dan satu lagi bernama
‫pathname, dengan nilai yang persis seperti yang kita miliki di sini.
‫Jadi kueri akan menjadi yang
‫ini, dan nama jalur akan menjadi "/ produk," dalam kasus ini.
‫Besar. Sekarang yang harus saya
‫lakukan adalah melanjutkan dan mengganti ini di sini dengan yang ini.
‫Baiklah.
‫Mari kita hapus
‫yang ini, dan hanya untuk memastikan kita benar-benar mencatat kueri
‫ke konsol jika kita berada di halaman produk.
‫"menghibur. log" objek kueri.
‫Dan sekarang, kami kembali menemukan halaman
‫dan kami juga harus menanyakan dengan id 0 ini.
‫Begitu sempurna. Jadi sekarang
‫kita siap untuk benar-benar membangun halaman ini menggunakan template kita.
‫Dan itu seharusnya
‫sangat sederhana, sebenarnya jauh lebih sederhana daripada halaman ikhtisar,
‫karena di sini kita
‫tidak perlu melakukan loop gila ini
‫di sini karena ada satu template
‫sederhana, yang harus kita lakukan adalah mengganti semuanya.
‫Jadi, pada langkah pertama, mari kita cari tahu
‫produk mana yang ingin kita tampilkan.
‫Jadi saya membuat variabel bernama product,
‫dan itu akan sama dengan objek data pada
‫posisi "query. Indo. "Oke,
‫masuk akal?
‫Jadi objek datanya adalah array,
‫dan kita akan mengambil elemen pada posisi yang
‫berasal dari kueri. Indo.
‫Jadi, jika nol, maka itu adalah elemen
‫nol, jika itu dua, itu adalah elemen nomor dua.
‫Oke, jadi ini
‫adalah cara paling sederhana untuk mengambil elemen berdasarkan string kueri.
‫Sekarang hal lain yang
‫perlu kita lakukan adalah mendapatkan Head yang sama persis di sini,
‫oke, dan akhirnya kita cukup membuat output kita.
‫Jadi, outputnya hanyalah replaceTemplate, dan HTML
‫yang perlu kita
‫masukkan adalah tempOverview, atau sebenarnya tempProduct, dan
‫yang kita masukkan adalah produknya.
‫Dan itu saja!
‫Sekarang kami hanya mengirim output sebagai hasilnya, atau
‫sebagai respons sebenarnya, dan hanya itu.
‫Jadi bagian ini masuk akal, kan?
‫Jadi, sekali lagi, replaceTemplate mengharapkan kita untuk
‫memasukkan template dan produk.
‫Jadi produk adalah objek dengan semua properti ini.
‫Dan produk itu datang ke sini langsung
‫dari objek data ini.
‫Jadi di replaceTemplate, kami memasukkan produk template,
‫jadi yang ini, yang kami muat
‫dari file di awal, dan kemudian produk.
‫Seperti yang saya sebutkan, tentu saja, yang berasal dari array.
‫Dan memang seharusnya begitu.
‫Jadi jika templatnya benar, maka
‫ini seharusnya berfungsi sekarang.
‫Jadi, restart server, mari
‫kita
‫reload, dan memang, ini dia.
‫Jadi, itu bagus, itu membuat saya
‫sangat senang, ketika hal-hal
‫seperti ini bekerja seperti ini, indah, semuanya sempurna.
‫Juga tombol kembali ini, oh itu tidak berfungsi.
‫Oke. Jadi kita perlu mengubah template HTML di sini.
‫Jadi di mana itu? Itu ada di produk,
‫dan tautan ini di sini, di mana itu, ah.
‫Ya, pada dasarnya tidak mengarah ke mana-mana,
‫dan yang kami inginkan adalah kembali ke tinjauan umum, kan.
‫Mulai ulang server, muat ulang halaman ini,
‫dan sekarang, sekarang berfungsi.
‫Mari kita coba tanpa patch organik, dan memang,
‫itu tidak ada di sini.
‫Dulu, dan sekarang hilang.
‫Dan semua hal ini di sini
‫tentu saja dinamis yang berasal dari file JSON itu. Ya.
‫Jadi semua ini bekerja. Cantik.
‫Itu benar-benar hebat.
‫Dan proyek kami, sekarang dapat kami katakan, sebenarnya telah selesai.
‫Hanya satu hal kecil lagi yang ingin saya
‫lakukan, yaitu menunjukkan kepada Anda beberapa hal baik yang bisa kita lakukan.
‫Tapi selain itu, proyek kami bekerja.
‫Jadi selamat, Anda baru saja menyelesaikan simpul pertama
‫yang terlihat sangat keren. proyek js.
‫Dan itu tidak sulit, kan?
‫Maksud saya, beberapa hal
‫yang kami lakukan lebih terkait dengan pemrograman JavaScript secara umum, dan
‫tidak terlalu banyak tentang node.js. js itu sendiri, kan?
‫Jadi hal-hal seperti ini di sini, yang mungkin
‫agak membingungkan, tetapi pada
‫akhirnya itu hanya JavaScript biasa, bukan?
‫Jadi sekali lagi, fungsinya ada di
‫sana, hanya ada satu hal kecil lagi yang ingin
‫saya lakukan di video berikutnya, dan ketika Anda mencapainya, saya akan
‫memberi tahu Anda apa itu.