1 00:00:01,450 --> 00:00:03,480 ‫Instruktur: Jadi dalam 2 00:00:03,480 --> 00:00:07,408 ‫video ini kita akan belajar bagaimana mengurai beberapa 3 00:00:07,408 --> 00:00:11,563 ‫variabel dari URL agar dapat membangun halaman produk. 4 00:00:13,320 --> 00:00:15,690 ‫Jadi ingat bagaimana awalnya 5 00:00:15,690 --> 00:00:18,733 ‫saya mengimpor modul URL, jadi 6 00:00:20,120 --> 00:00:22,080 ‫yang ini di 7 00:00:22,080 --> 00:00:26,663 ‫sini, agar dapat mengurai variabel langsung dari URL. 8 00:00:28,420 --> 00:00:33,420 ‫Oke. Jadi, sebagai langkah pertama, 9 00:00:34,040 --> 00:00:35,990 ‫mari 10 00:00:38,100 --> 00:00:42,080 ‫kita log "req. url" ke konsol dan 11 00:00:44,250 --> 00:00:47,970 ‫kemudian hal lain yang ingin saya log adalah sebenarnya... 12 00:00:51,070 --> 00:00:55,843 ‫hasil menggunakan "url. parse" di URL ini. 13 00:00:58,780 --> 00:01:03,290 ‫Jadi, sekali lagi, parse pada dasarnya adalah mengurai 14 00:01:03,290 --> 00:01:05,703 ‫variabel dari URL. 15 00:01:06,710 --> 00:01:08,590 ‫Jadi, sesuatu seperti ini. 16 00:01:08,590 --> 00:01:13,410 ‫Jadi, yang kita inginkan adalah "id = 0", kan, 17 00:01:13,410 --> 00:01:17,970 ‫karena saat ini, "req. url" adalah semua ini, jadi 18 00:01:17,970 --> 00:01:19,480 ‫seluruh URL 19 00:01:19,480 --> 00:01:22,310 ‫ini, dan tentu saja, kami tidak 20 00:01:22,310 --> 00:01:24,190 ‫memiliki rute untuk itu. 21 00:01:24,190 --> 00:01:29,190 ‫Jadi tidak ada router seperti ini yang kami miliki di sini, 22 00:01:30,510 --> 00:01:33,750 ‫yang benar-benar cocok dengan seluruh URL ini. 23 00:01:33,750 --> 00:01:35,797 ‫Jadi itu sebabnya kami mendapatkan "Halaman tidak Ditemukan! "Dan itu 24 00:01:36,910 --> 00:01:40,663 ‫juga mengapa kita perlu mengubah beberapa hal di sini. 25 00:01:43,240 --> 00:01:46,620 ‫Oke, jadi izinkan saya menguraikan URL di sini, sehingga Anda 26 00:01:46,620 --> 00:01:48,380 ‫dapat melihat hasilnya untuk 27 00:01:48,380 --> 00:01:51,090 ‫melihat apa yang perlu kita lakukan selanjutnya. 28 00:01:51,090 --> 00:01:54,800 ‫Saya juga perlu meneruskan "benar" di sini ke fungsi 29 00:01:54,800 --> 00:01:58,430 ‫parse ini untuk benar-benar mengurai kueri menjadi objek. 30 00:01:58,430 --> 00:02:02,260 ‫Jadi, dengan kueri, maksud saya bagian ini di sini. 31 00:02:02,260 --> 00:02:05,163 ‫Oke, jadi ini disebut string kueri, 32 00:02:06,270 --> 00:02:10,480 ‫oke, dan itulah yang kami parsing secara efektif, bagian 33 00:02:10,480 --> 00:02:12,363 ‫itu dari URL. 34 00:02:14,260 --> 00:02:15,600 ‫Jadi restart 35 00:02:17,810 --> 00:02:21,463 ‫dan mari kita lihat log yang kita dapatkan. 36 00:02:23,490 --> 00:02:26,420 ‫Jadi, yang pertama adalah "req. url" dan 37 00:02:26,420 --> 00:02:29,510 ‫inilah yang kami harapkan, benar, dan inilah 38 00:02:29,510 --> 00:02:33,133 ‫hasil dari melakukan "url. parse" Jadi kita 39 00:02:34,810 --> 00:02:38,030 ‫mendapatkan objek kueri di sini, dan 40 00:02:38,030 --> 00:02:41,130 ‫di sini, kita memiliki objek bagus 41 00:02:41,130 --> 00:02:44,760 ‫yang memberi tahu kita bahwa id adalah 0, 42 00:02:44,760 --> 00:02:46,950 ‫benar, jadi itu indah. 43 00:02:46,950 --> 00:02:49,400 ‫Dan kemudian, tepat di bawah itu, 44 00:02:49,400 --> 00:02:51,620 ‫kita sebenarnya memiliki bagian 45 00:02:51,620 --> 00:02:55,380 ‫kedua yang kita butuhkan, yang hanya nama path, oke. 46 00:02:55,380 --> 00:02:58,183 ‫Jadi, rute kami menggunakan nama 47 00:02:58,183 --> 00:03:02,000 ‫jalur ini, jadi cukup "/ produk," dan kemudian kami 48 00:03:02,000 --> 00:03:05,810 ‫perlu mengetahui kueri untuk merespons sesuai dengan id 0. 49 00:03:05,810 --> 00:03:07,670 ‫Jadi dalam hal 50 00:03:07,670 --> 00:03:11,063 ‫ini misalnya loading produk alpukat yang pertama. 51 00:03:11,959 --> 00:03:14,440 ‫Tapi kalau yang 52 00:03:14,440 --> 00:03:19,070 ‫nomor dua misalnya, maka isi brokoli ini, kan. 53 00:03:19,070 --> 00:03:21,770 ‫Dan kueri ini dan nama jalur ini adalah apa 54 00:03:21,770 --> 00:03:23,943 ‫yang akan kita gunakan untuk melakukan itu. 55 00:03:25,860 --> 00:03:29,740 ‫Jadi, yang satu ini tidak kita perlukan lagi. 56 00:03:29,740 --> 00:03:33,010 ‫Kami juga tidak ingin mencatat apa pun ke 57 00:03:33,010 --> 00:03:35,530 ‫konsol sekarang karena yang ingin kami 58 00:03:35,530 --> 00:03:38,630 ‫lakukan adalah membuat dua variabel, yang disebut query 59 00:03:39,690 --> 00:03:40,723 ‫dan ... 60 00:03:41,679 --> 00:03:43,150 ‫nama jalur. 61 00:03:43,150 --> 00:03:46,903 ‫Dan kita dapat melakukannya dengan menggunakan stacks, structuring. 62 00:03:49,200 --> 00:03:51,560 ‫Jadi, sekali lagi, saya harap 63 00:03:51,560 --> 00:03:56,560 ‫Anda terbiasa dengan sintaks ini di sini, dan inilah cara kerjanya. 64 00:03:57,380 --> 00:04:02,380 ‫Jadi, objek ini di sini, memiliki query dan pathName. 65 00:04:02,780 --> 00:04:04,880 ‫Jadi dengan menggunakan penataan 66 00:04:04,880 --> 00:04:07,521 ‫seperti ini, dengan nama properti yang 67 00:04:07,521 --> 00:04:10,050 ‫tepat ini, sebenarnya harus seperti ini. 68 00:04:10,050 --> 00:04:12,150 ‫Jadi dengan dua nama properti 69 00:04:12,150 --> 00:04:15,000 ‫yang tepat ini, itu akan membuat dua 70 00:04:15,000 --> 00:04:18,254 ‫variabel ini, satu disebut query dan satu lagi bernama 71 00:04:18,254 --> 00:04:22,230 ‫pathname, dengan nilai yang persis seperti yang kita miliki di sini. 72 00:04:22,230 --> 00:04:24,300 ‫Jadi kueri akan menjadi yang 73 00:04:24,300 --> 00:04:28,113 ‫ini, dan nama jalur akan menjadi "/ produk," dalam kasus ini. 74 00:04:29,580 --> 00:04:31,880 ‫Besar. Sekarang yang harus saya 75 00:04:31,880 --> 00:04:34,733 ‫lakukan adalah melanjutkan dan mengganti ini di sini dengan yang ini. 76 00:04:41,370 --> 00:04:42,203 ‫Baiklah. 77 00:04:45,572 --> 00:04:47,100 ‫Mari kita hapus 78 00:04:47,100 --> 00:04:51,080 ‫yang ini, dan hanya untuk memastikan kita benar-benar mencatat kueri 79 00:04:51,080 --> 00:04:53,933 ‫ke konsol jika kita berada di halaman produk. 80 00:04:55,597 --> 00:04:59,373 ‫"menghibur. log" objek kueri. 81 00:05:05,070 --> 00:05:07,800 ‫Dan sekarang, kami kembali menemukan halaman 82 00:05:10,110 --> 00:05:13,360 ‫dan kami juga harus menanyakan dengan id 0 ini. 83 00:05:13,360 --> 00:05:15,350 ‫Begitu sempurna. Jadi sekarang 84 00:05:15,350 --> 00:05:18,350 ‫kita siap untuk benar-benar membangun halaman ini menggunakan template kita. 85 00:05:18,350 --> 00:05:19,923 ‫Dan itu seharusnya 86 00:05:19,923 --> 00:05:23,710 ‫sangat sederhana, sebenarnya jauh lebih sederhana daripada halaman ikhtisar, 87 00:05:23,710 --> 00:05:25,480 ‫karena di sini kita 88 00:05:25,480 --> 00:05:28,000 ‫tidak perlu melakukan loop gila ini 89 00:05:28,000 --> 00:05:30,500 ‫di sini karena ada satu template 90 00:05:30,500 --> 00:05:33,543 ‫sederhana, yang harus kita lakukan adalah mengganti semuanya. 91 00:05:36,040 --> 00:05:39,860 ‫Jadi, pada langkah pertama, mari kita cari tahu 92 00:05:39,860 --> 00:05:42,903 ‫produk mana yang ingin kita tampilkan. 93 00:05:46,910 --> 00:05:50,130 ‫Jadi saya membuat variabel bernama product, 94 00:05:50,130 --> 00:05:54,080 ‫dan itu akan sama dengan objek data pada 95 00:05:56,770 --> 00:06:00,827 ‫posisi "query. Indo. "Oke, 96 00:06:02,680 --> 00:06:04,080 ‫masuk akal? 97 00:06:04,080 --> 00:06:06,570 ‫Jadi objek datanya adalah array, 98 00:06:06,570 --> 00:06:09,950 ‫dan kita akan mengambil elemen pada posisi yang 99 00:06:09,950 --> 00:06:13,010 ‫berasal dari kueri. Indo. 100 00:06:13,010 --> 00:06:15,130 ‫Jadi, jika nol, maka itu adalah elemen 101 00:06:15,130 --> 00:06:17,663 ‫nol, jika itu dua, itu adalah elemen nomor dua. 102 00:06:19,170 --> 00:06:21,389 ‫Oke, jadi ini 103 00:06:21,389 --> 00:06:26,389 ‫adalah cara paling sederhana untuk mengambil elemen berdasarkan string kueri. 104 00:06:26,520 --> 00:06:28,120 ‫Sekarang hal lain yang 105 00:06:28,120 --> 00:06:32,493 ‫perlu kita lakukan adalah mendapatkan Head yang sama persis di sini, 106 00:06:36,800 --> 00:06:39,990 ‫oke, dan akhirnya kita cukup membuat output kita. 107 00:06:43,196 --> 00:06:46,279 ‫Jadi, outputnya hanyalah replaceTemplate, dan HTML 108 00:06:49,383 --> 00:06:51,898 ‫yang perlu kita 109 00:06:51,898 --> 00:06:55,981 ‫masukkan adalah tempOverview, atau sebenarnya tempProduct, dan 110 00:06:58,340 --> 00:07:01,257 ‫yang kita masukkan adalah produknya. 111 00:07:03,960 --> 00:07:05,003 ‫Dan itu saja! 112 00:07:08,230 --> 00:07:12,330 ‫Sekarang kami hanya mengirim output sebagai hasilnya, atau 113 00:07:12,330 --> 00:07:15,850 ‫sebagai respons sebenarnya, dan hanya itu. 114 00:07:15,850 --> 00:07:18,900 ‫Jadi bagian ini masuk akal, kan? 115 00:07:18,900 --> 00:07:22,550 ‫Jadi, sekali lagi, replaceTemplate mengharapkan kita untuk 116 00:07:22,550 --> 00:07:25,513 ‫memasukkan template dan produk. 117 00:07:26,350 --> 00:07:30,223 ‫Jadi produk adalah objek dengan semua properti ini. 118 00:07:31,250 --> 00:07:33,610 ‫Dan produk itu datang ke sini langsung 119 00:07:33,610 --> 00:07:35,223 ‫dari objek data ini. 120 00:07:36,720 --> 00:07:40,463 ‫Jadi di replaceTemplate, kami memasukkan produk template, 121 00:07:41,670 --> 00:07:45,140 ‫jadi yang ini, yang kami muat 122 00:07:45,140 --> 00:07:48,703 ‫dari file di awal, dan kemudian produk. 123 00:07:49,760 --> 00:07:53,920 ‫Seperti yang saya sebutkan, tentu saja, yang berasal dari array. 124 00:07:53,920 --> 00:07:56,450 ‫Dan memang seharusnya begitu. 125 00:07:56,450 --> 00:07:58,560 ‫Jadi jika templatnya benar, maka 126 00:07:58,560 --> 00:08:00,640 ‫ini seharusnya berfungsi sekarang. 127 00:08:00,640 --> 00:08:02,763 ‫Jadi, restart server, mari 128 00:08:04,000 --> 00:08:05,229 ‫kita 129 00:08:05,229 --> 00:08:07,673 ‫reload, dan memang, ini dia. 130 00:08:08,760 --> 00:08:11,810 ‫Jadi, itu bagus, itu membuat saya 131 00:08:11,810 --> 00:08:14,609 ‫sangat senang, ketika hal-hal 132 00:08:14,609 --> 00:08:18,633 ‫seperti ini bekerja seperti ini, indah, semuanya sempurna. 133 00:08:19,930 --> 00:08:24,020 ‫Juga tombol kembali ini, oh itu tidak berfungsi. 134 00:08:24,020 --> 00:08:29,020 ‫Oke. Jadi kita perlu mengubah template HTML di sini. 135 00:08:30,490 --> 00:08:34,703 ‫Jadi di mana itu? Itu ada di produk, 136 00:08:35,660 --> 00:08:39,490 ‫dan tautan ini di sini, di mana itu, ah. 137 00:08:39,490 --> 00:08:42,440 ‫Ya, pada dasarnya tidak mengarah ke mana-mana, 138 00:08:42,440 --> 00:08:46,347 ‫dan yang kami inginkan adalah kembali ke tinjauan umum, kan. 139 00:08:50,460 --> 00:08:53,933 ‫Mulai ulang server, muat ulang halaman ini, 140 00:08:55,110 --> 00:08:57,543 ‫dan sekarang, sekarang berfungsi. 141 00:08:59,200 --> 00:09:01,940 ‫Mari kita coba tanpa patch organik, dan memang, 142 00:09:01,940 --> 00:09:03,910 ‫itu tidak ada di sini. 143 00:09:03,910 --> 00:09:05,970 ‫Dulu, dan sekarang hilang. 144 00:09:05,970 --> 00:09:07,900 ‫Dan semua hal ini di sini 145 00:09:07,900 --> 00:09:12,803 ‫tentu saja dinamis yang berasal dari file JSON itu. Ya. 146 00:09:15,090 --> 00:09:17,650 ‫Jadi semua ini bekerja. Cantik. 147 00:09:17,650 --> 00:09:20,160 ‫Itu benar-benar hebat. 148 00:09:20,160 --> 00:09:25,150 ‫Dan proyek kami, sekarang dapat kami katakan, sebenarnya telah selesai. 149 00:09:25,150 --> 00:09:28,450 ‫Hanya satu hal kecil lagi yang ingin saya 150 00:09:28,450 --> 00:09:32,740 ‫lakukan, yaitu menunjukkan kepada Anda beberapa hal baik yang bisa kita lakukan. 151 00:09:32,740 --> 00:09:35,740 ‫Tapi selain itu, proyek kami bekerja. 152 00:09:35,740 --> 00:09:39,135 ‫Jadi selamat, Anda baru saja menyelesaikan simpul pertama 153 00:09:39,135 --> 00:09:43,430 ‫yang terlihat sangat keren. proyek js. 154 00:09:43,430 --> 00:09:45,520 ‫Dan itu tidak sulit, kan? 155 00:09:45,520 --> 00:09:47,550 ‫Maksud saya, beberapa hal 156 00:09:47,550 --> 00:09:52,550 ‫yang kami lakukan lebih terkait dengan pemrograman JavaScript secara umum, dan 157 00:09:52,670 --> 00:09:56,910 ‫tidak terlalu banyak tentang node.js. js itu sendiri, kan? 158 00:09:56,910 --> 00:10:01,370 ‫Jadi hal-hal seperti ini di sini, yang mungkin 159 00:10:01,370 --> 00:10:04,180 ‫agak membingungkan, tetapi pada 160 00:10:04,180 --> 00:10:07,010 ‫akhirnya itu hanya JavaScript biasa, bukan? 161 00:10:07,010 --> 00:10:09,060 ‫Jadi sekali lagi, fungsinya ada di 162 00:10:09,060 --> 00:10:11,740 ‫sana, hanya ada satu hal kecil lagi yang ingin 163 00:10:11,740 --> 00:10:15,283 ‫saya lakukan di video berikutnya, dan ketika Anda mencapainya, saya akan 164 00:10:15,283 --> 00:10:17,083 ‫memberi tahu Anda apa itu.