ในส่วนที่ 3(a) เราได้สร้างคำขอ GET เพื่อสืบค้น API ของเรา ในส่วนที่ 3(b) เราจะค้นหาข้อมูลที่จัดเก็บไว้ในเครื่องของเรา และใช้ข้อมูลนั้นเพื่อเติมข้อมูลลงในเมนูแบบเลื่อนลง ในส่วนนี้ เราจะแก้ไขแบ็คเอนด์ของเราโดยใช้ Express เพื่อตั้งค่าเส้นทางและมิดเดิลแวร์เพื่อดำเนินการบนเส้นทางเหล่านั้น
ก่อนที่เราจะเริ่มได้ เราต้องเก็บข้อมูลบางอย่างไว้ในเครื่องของคุณก่อน ในโฟลเดอร์ทรัพย์สินให้สร้างโฟลเดอร์ชื่อข้อมูล ในโฟลเดอร์ข้อมูลนี้ ให้สร้างไฟล์ชื่อ categories.json ในไฟล์นี้ ให้ประกาศตัวแปรที่เรียกว่าหมวดหมู่และกำหนดให้กับออบเจ็กต์ วัตถุนี้จะเต็มไปด้วยอาร์เรย์ของสตริง แต่ละสายจะมีหมวดหมู่ของตัวเอง คุณสามารถคัดลอกรายการหมวดหมู่จาก repo ของฉันหรือใช้ของคุณเองได้
ตอนนี้ เรามาแก้ไขส่วนประกอบของเราในส่วนหน้ากันดีกว่า ในสถานะ SearchBar.jsx ให้ประกาศคีย์ชื่อ "topCatArray" และกำหนดให้กับอาร์เรย์ว่าง นี่คือที่ที่เราจะจัดเก็บอาร์เรย์ของตัวเลือกหมวดหมู่ทั้งหมดที่ผู้ใช้สามารถเลือกได้
จากนั้นจึงประกาศฟังก์ชันที่เรียกว่า “getDropDown” ฟังก์ชันนี้จะดำเนินการคำขอ GET ไปยังเส้นทางที่เราสร้างขึ้น และจัดเก็บการตอบสนองจากคำขอนั้นเพื่อระบุ
ใน getDropDown ให้ใช้ axios เพื่อประกาศคำขอ GET ส่งเส้นทางเป็นพารามิเตอร์ไปยังคำขอ เราจะตั้งชื่อเส้นทาง '/ หมวดหมู่' เราจะตั้งค่าเส้นทางสำหรับเส้นทางนี้ในไฟล์เซิร์ฟเวอร์ของเราในภายหลัง
การใช้สัญญาจะประกาศตัวแปรเพื่อจัดเก็บการตอบสนองที่เราได้รับกลับมาจากคำขอของเรา เราจะเรียกตัวแปรว่า "topCatData" จากนั้นอัปเดตสถานะด้วยค่าของตัวแปรใหม่นี้
เนื่องจากเราต้องการให้ฟังก์ชันนี้ทำงานทันทีที่เพจโหลด (ดังนั้นรายการแบบเลื่อนลงจะปรากฏขึ้นทันที) เราจะเรียกใช้ฟังก์ชันนี้โดยใช้ฟังก์ชัน "ComponentWillMount" ของ React
ตอนนี้ เรามาสร้างเส้นทางสำหรับเส้นทางไปยัง '/categories' ที่เราทำในคำขอ GET "getDropDown" ของเรา
ในไฟล์ server.js ของเราประกาศเส้นทางที่ขณะนี้ตอบสนองด้วยสถานะ 200 คุณต้องตอบกลับคำขอเสมอ แม้ว่าคุณจะไม่มีข้อมูลที่จะตอบกลับ คุณก็สามารถตอบสนองด้วยสถานะได้ ดู "ที่นี่" เพื่อดูรหัสสถานะทั้งหมด
ต่อไป เราจะต้องสร้างฟังก์ชันคอนโทรลเลอร์เพื่อช่วยให้เราได้รับข้อมูลจากไฟล์ categories.json ของเรา ตัวควบคุมคือมิดเดิลแวร์ (ฟังก์ชัน) ที่ดำเนินงานบนเส้นทาง ในกรณีนี้ งานจะได้รับข้อมูลที่ร้องขอ (รายการหมวดหมู่) และส่งคืนข้อมูลนั้นเป็นออบเจ็กต์ตอบสนอง
สร้างโฟลเดอร์ในโฟลเดอร์เซิร์ฟเวอร์ชื่อ "Controllers" ในโฟลเดอร์ Controllers ให้สร้างไฟล์ชื่อ “categoriesController.js” ในไฟล์ categoriesController.js ให้ประกาศตัวแปรชื่อ “categoriesController” ที่กำหนดให้กับออบเจ็กต์ว่าง ตัวควบคุมแต่ละตัวที่เราสร้างในไฟล์นี้จะถูกเพิ่มเป็นคีย์ให้กับวัตถุ CategoryController นี้ เราจะส่งออกวัตถุทั้งหมดนี้
สร้างคีย์ชื่อ "getCategories" กำหนดคีย์นี้ให้กับฟังก์ชันลูกศรที่มี req, res และ next เป็นพารามิเตอร์ (แสดงถึงออบเจ็กต์คำขอ ออบเจ็กต์การตอบสนอง และฟังก์ชันถัดไปตามลำดับ)
ในฟังก์ชันนี้ ให้ทำลายโครงสร้างออบเจ็กต์หมวดหมู่จากไฟล์ categories.json ใช้วิธี “fs.ReadFileSync” เพื่อรับข้อมูลจากไฟล์นั้น อย่าลืมแยกวิเคราะห์ข้อมูลจากไฟล์นั้นโดยใช้วิธี JSON.parse
เก็บออบเจ็กต์การตอบกลับหมวดหมู่ที่คุณได้รับจากไฟล์ categories.json ไปยัง res.locals จากนั้นกลับต่อไป คุณยังสามารถเพิ่มเงื่อนไขเพื่อทำให้เกิดข้อผิดพลาดได้หากออบเจ็กต์หมวดหมู่ว่างเปล่า
**หมายเหตุ: Res.locals เป็นออบเจ็กต์ที่มีตัวแปรโลคัลการตอบสนองที่กำหนดขอบเขตให้กับคำขอ ค่าดังกล่าวจะใช้ได้เฉพาะในระหว่างรอบคำขอ/การตอบกลับเท่านั้น**
**หมายเหตุ: การส่งคืนข้อมูลการตอบสนองครั้งถัดไปจากคอนโทรลเลอร์หนึ่งไปยังคอนโทรลเลอร์ตัวถัดไป (ถ้ามี) จากนั้นจึงกลับไปยังเส้นทาง คุณจะไม่มีวันออกจากฟังก์ชันตัวควบคุมหากไม่กลับมาครั้งถัดไป**
เพิ่มตัวควบคุมไปยังเส้นทาง '/ หมวดหมู่' ในไฟล์ server.js
เมื่อข้อมูลจากไฟล์ categories.json ได้รับการบันทึกลงใน res.locals แล้ว คุณสามารถแก้ไขเส้นทางเพื่อตอบกลับด้วยข้อมูลนั้นได้ นอกเหนือจากสถานะ
ตอนนี้คำขอ GET ของเราไปที่ '/categories' ใน SearchBar.jsx สามารถทำได้แล้ว ขณะนี้เรากำลังค้นหาข้อมูลที่จัดเก็บไว้ในคอมพิวเตอร์ของเรา!
ต่อไป ในที่สุดเราก็สามารถแสดงผลลัพธ์การสืบค้นของเราไปยังหน้าได้ ดูส่วนที่ 3(c) เพื่อสิ้นสุดฟังก์ชันการค้นหา แต่ก่อนอื่น ให้ปรบมือให้ตัวเองก่อน คุณเกือบจะเสร็จแล้ว!
