โครงร่างด่วน
- มิดเดิลแวร์ใน Node.js คืออะไร
- Body-Parser Middleware ใน Node.js คืออะไร
- จะใช้ Middleware ของ Body-parser ใน Node.js ได้อย่างไร
- บทสรุป
เริ่มต้นด้วยพื้นฐานของมิดเดิลแวร์ใน Node.js
มิดเดิลแวร์ใน Node.js คืออะไร
มิดเดิลแวร์ เป็นฟังก์ชันที่ให้การเข้าถึงเพื่อร้องขอวัตถุ ตอบสนองต่อวัตถุ และดำเนินการฟังก์ชันในลักษณะต่อเนื่องโดยย้ายไปยังฟังก์ชันมิดเดิลแวร์ถัดไปในวงจรการร้องขอ-การตอบสนองของแอปพลิเคชัน นอกจากนี้ยังให้สิทธิ์เข้าถึงเพื่อแก้ไขออบเจ็กต์คำขอและการตอบกลับเพื่อดำเนินการต่างๆ เช่น การตรวจสอบ การแยกวิเคราะห์เนื้อหาที่ร้องขอ และอื่นๆ อีกมากมาย
Body-Parser Middleware ใน Node.js คืออะไร
“ ตัวแยกวิเคราะห์ร่างกาย ” เป็นมิดเดิลแวร์แยกวิเคราะห์เนื้อหาที่จัดการคำขอ HTTP POST คำขอ 'POST' จะส่งข้อมูลไปยังเซิร์ฟเวอร์เพื่อสร้างหรือแก้ไขทรัพยากร มิดเดิลแวร์ “bode-parser” จะแยกวิเคราะห์เนื้อหาคำขอขาเข้าเป็นอ็อบเจ็กต์ JavaScript (หากประเภทเนื้อหาแอปพลิเคชันคือ JSON) และแบบฟอร์ม HTML (หากประเภท MIME คือ application/x-www-form-urlencoded ) เมื่อเสร็จแล้วจึงจะสามารถนำไปใช้ในแอปพลิเคชันได้
หลังจากได้รับพื้นฐานของมิดเดิลแวร์ body-parser แล้ว เรามาดูการใช้งานกันดีกว่า
จะใช้ Middleware ของ Body-parser ใน Node.js ได้อย่างไร
หากต้องการใช้มิดเดิลแวร์ body-parser ใน Node.js ให้ทำตามขั้นตอนคำแนะนำด้านล่าง:
- ขั้นตอนที่ 1: เริ่มต้นโครงการ Node.js
- ขั้นตอนที่ 2: ติดตั้ง Body Parser
- ขั้นตอนที่ 3: ติดตั้ง Express และ EJS
- ขั้นตอนที่ 4: สร้างเทมเพลต EJS
- ขั้นตอนที่ 5: ใช้ Body Parser Middleware
- ขั้นตอนที่ 6: ปรับใช้แอปพลิเคชัน Node.js
เริ่มต้นด้วยการเริ่มต้นของโครงการ Node.js
ขั้นตอนที่ 1: เริ่มต้นโครงการ Node.js
ขั้นแรก เริ่มต้นโครงการ Node.js โดยดำเนินการตามที่ระบุไว้ด้านล่าง “ เวลา 22.00 น (ตัวจัดการแพ็กเกจโหนด)” คำสั่งเริ่มต้น:
เวลาเริ่มต้น npm - - และในคำสั่งข้างต้น “ -และ' ธงใช้เพื่อตอบทุกคำถามที่ 'ใช่'
ผลลัพธ์แสดงให้เห็นว่า “ แพ็คเกจ.json ” ไฟล์ถูกสร้างขึ้นสำเร็จแล้วโดยประกอบด้วยชุดคุณสมบัติดังต่อไปนี้:
ขั้นตอนที่ 2: ติดตั้ง Body Parser
ถัดไป ติดตั้งแพ็คเกจ body-parser ลงในแอปพลิเคชัน Node.js ปัจจุบันโดยดำเนินการตามที่ระบุไว้ด้านล่าง “ เวลา 22.00 น ” คำสั่งการติดตั้ง:
ตัวติดตั้ง npm - - ตัวแยกวิเคราะห์ผลลัพธ์ด้านล่างแสดงให้เห็นว่าแพ็คเกจ body-parser ได้รับการติดตั้งสำเร็จในแอปพลิเคชัน Node.js ที่กำหนด:
ขั้นตอนที่ 3: ติดตั้ง Express และ EJS
ตอนนี้ให้ติดตั้ง “ ไม่ (เทมเพลต JavaScript แบบฝัง)” ในแอปพลิเคชัน Node.js “ejs” เป็นเครื่องมือ JavaScript ที่มีชื่อเสียงซึ่งใช้โดย Node.js ซึ่งรับข้อมูล HTML เป็น Javascript ธรรมดา:
npm ติดตั้ง ejsสังเกตได้ว่ามีการเพิ่มไลบรารี “ejs” ลงในแอปพลิเคชัน Node.js ปัจจุบัน:
นอกจากนี้ ให้ติดตั้ง “ ด่วน ” กรอบงานเว็บเพื่อสร้างแอปพลิเคชัน Node.js อย่างรวดเร็วและง่ายดาย:
npm ติดตั้งด่วนนอกจากนี้ “express” ยังถูกเพิ่มเข้าไปในแอปพลิเคชัน Node.js ด้วย:
ขั้นตอนที่ 4: สร้างเทมเพลต EJS
เมื่อติดตั้งแพ็คเกจที่จำเป็นทั้งหมดแล้วให้สร้างเทมเพลต 'ejs' โดยมีโค้ดบรรทัดต่อไปนี้และบันทึกเป็น ' SampleForm.ejs ' ไฟล์:
DOCTYPE html >< html >
< ศีรษะ >
< ชื่อ > ร่างกาย - - พาร์เซอร์ มิดเดิลแวร์ ชื่อ >
ศีรษะ >
< ร่างกาย >
< ศูนย์ >
< h1 > ตัวอย่างไดอารี่ h1 >
< การกระทำของแบบฟอร์ม = 'บันทึกข้อมูล' วิธี = 'โพสต์' >
< ก่อน >
< ฉลาก > ชื่อ : ฉลาก >< ประเภทอินพุต = 'ข้อความ' ชื่อ = 'ชื่อ' > < พี่ชาย >
< ฉลาก > วันที่ ฉลาก >< ประเภทอินพุต = 'วันที่' ชื่อ = 'วันที่' >< พี่ชาย >
< ฉลาก > วันที่ ฉลาก >< ประเภทอินพุต = 'วันที่' ชื่อ = 'วันที่' >< พี่ชาย >
< ประเภทอินพุต = 'ส่ง' ค่า = “ส่งไดอารี่” >< พี่ชาย >
ก่อน >
รูปร่าง >
ศูนย์ >
ร่างกาย >
html >
คำอธิบายของโค้ดข้างต้นมีดังนี้:
- “ <ชื่อเรื่อง> แท็ก ” ระบุชื่อเรื่องของเอกสาร HTMl
- “ <ศูนย์> แท็ก” จัดเนื้อหาให้อยู่ตรงกลางหน้าเว็บ
- “ แท็ก ” แทรกองค์ประกอบส่วนหัวระดับแรก
- “ <แบบฟอร์ม> ” แท็กสร้างองค์ประกอบแบบฟอร์มที่รวบรวมข้อมูลจากผู้ใช้ ภายในองค์ประกอบ “รูปแบบ” นั้น “ การกระทำ ” แอตทริบิวต์ระบุการดำเนินการที่ดำเนินการกับการส่งแบบฟอร์มและ “ วิธี ” แอตทริบิวต์ที่มีค่า 'โพสต์' จะส่งข้อมูลไปยังเซิร์ฟเวอร์
- “ <ก่อน> แท็ก ' แสดงองค์ประกอบที่ระบุบนหน้าเว็บที่มีความกว้างแบบอักษรคงที่เหมือนกับในซอร์สโค้ด
- “ <ฉลาก> แท็ก ” ระบุป้ายกำกับของช่องป้อนข้อมูล
- “ <อินพุต> ” type เพิ่มช่องป้อนข้อมูลประเภท “ ข้อความ ” และชื่อ “ ชื่อ '.
- แท็ก “ ” สองแท็กถัดไปจะเพิ่มช่องป้อนข้อมูลตามประเภทและชื่อที่ระบุ
ขั้นตอนที่ 5: ใช้ Body Parser Middleware
ตอนนี้สร้างไฟล์ “.js” ชื่อ “ ดัชนี js ” และใช้มิดเดิลแวร์ body-parser ในนั้นเพื่อแยกวิเคราะห์เนื้อหาของคำขอที่เข้ามาทั้งหมด เมื่อสร้างไฟล์ “.js” ให้คัดลอกบรรทัดโค้ดต่อไปนี้ลงไป:
ค่าคงที่ เครื่องแยกวิเคราะห์ร่างกาย = จำเป็นต้อง ( 'เครื่องแยกวิเคราะห์ร่างกาย' )ค่าคงที่ ด่วน = จำเป็นต้อง ( 'ด่วน' )
ค่าคงที่ เส้นทาง = จำเป็นต้อง ( 'เส้นทาง' )
ค่าคงที่ แอป = ด่วน ( )
ให้พอร์ต = กระบวนการ. สิ่งแวดล้อม . ท่าเรือ || 8080
แอป. ชุด ( 'มุมมอง' , เส้นทาง. เข้าร่วม ( __ชื่อ ) )
แอป. ชุด ( 'ดูเครื่องยนต์' , 'เลขที่' )
แอป. ใช้ ( เครื่องแยกวิเคราะห์ร่างกาย urlencoded ( { ขยาย : : จริง } ) )
แอป. ใช้ ( เครื่องแยกวิเคราะห์ร่างกาย json.json ( ) )
แอป. รับ ( '/' , การทำงาน ( ร้องขอ, ตอบกลับ ) {
ความละเอียด แสดงผล ( “ตัวอย่างแบบฟอร์ม” )
} ) ;
แอป. โพสต์ ( '/บันทึกข้อมูล' , ( ร้องขอ, ตอบกลับ ) => {
คอนโซล บันทึก ( 'การใช้ตัวแยกวิเคราะห์: ' , ต้องการ ร่างกาย )
} )
แอป. ฟัง ( พอร์ตฟังก์ชั่น ( ข้อผิดพลาด ) {
ถ้า ( ข้อผิดพลาด ) โยน ข้อผิดพลาด
คอนโซล บันทึก ( 'เซิร์ฟเวอร์ที่สร้างบน PORT' , ท่าเรือ )
} )
คำอธิบายของบรรทัดโค้ดที่ระบุไว้ข้างต้นเขียนไว้ด้านล่าง:
- ประการแรก “ จำเป็นต้อง() ” วิธีการนำเข้าโมดูล “body-parser”, “express” และ “path” ในแอปพลิเคชัน Node.js ปัจจุบัน
- ถัดไป สร้างอินสแตนซ์ของแอปพลิเคชันด่วนด้วยความช่วยเหลือของ “ ด่วน() ” ตัวสร้าง
- หลังจากนั้น “ กระบวนการ.env ” คุณสมบัติดำเนินการเซิร์ฟเวอร์ท้องถิ่นบนค่าเริ่มต้น “ ท่าเรือ '. หากพอร์ตเริ่มต้นไม่ว่างเซิร์ฟเวอร์จะดำเนินการบนพอร์ตที่ระบุซึ่งก็คือ “ 8080 '.
- ตอนนี้ตั้งค่าเอ็นจิ้นมุมมองด้วยความช่วยเหลือของมิดเดิลแวร์ที่ระบุซึ่ง 'มุมมอง' หมายถึงโฟลเดอร์ที่บันทึกหน้าเว็บทั้งหมดและ ' เส้นทาง.เข้าร่วม() ” วิธีการรวมส่วนเส้นทางของไดเร็กทอรีปัจจุบันและสร้างเส้นทางเดียว
- เมื่อทุกอย่างเสร็จสิ้นแล้ว “ แอพ.ใช้() ” วิธีการทำให้ระบุ “ ตัวแยกวิเคราะห์ร่างกาย ” มิดเดิลแวร์ในเส้นทางที่กำหนด มิดเดิลแวร์ตัวแยกวิเคราะห์นี้ใช้ “ urlencoded ' parser ที่แยกวิเคราะห์เนื้อหา 'urlencoded' เท่านั้นซึ่งมีส่วนหัว 'content-type' ตรงกับตัวเลือก 'type'
- “ตัวแยกวิเคราะห์เนื้อหา” ตัวที่สองใช้ “ เจสัน ” parser เพื่อแยกวิเคราะห์เนื้อความของคำขอขาเข้าเป็นออบเจ็กต์ JSON ในรูปแบบคีย์-ค่า
- “ แอพ.get() ” วิธีการส่งคำขอ HTTP “GET” ที่เส้นทางที่ระบุและดำเนินการฟังก์ชันการโทรกลับที่มี “ คำขอ (คำขอ)” และ “ ความละเอียด (ตอบสนอง)” พารามิเตอร์
- ภายในฟังก์ชันการโทรกลับ “ res.render() ” วิธีการแสดงการตอบสนองเมื่อมีการเรียกใช้ฟังก์ชันการโทรกลับที่ระบุ
- เมธอด “app.post()” จะส่งคำขอ HTTP “POST” ซึ่งมีความปลอดภัยมากกว่า เนื่องจากไม่แสดงข้อมูลใน URL นอกจากนี้ยังกำหนดฟังก์ชันการโทรกลับที่ใช้ฟังก์ชัน “ คำขอร่างกาย ” เพื่อรับข้อมูลจากช่องป้อนข้อมูล
- สุดท้ายนี้ “ แอพฟัง() ” วิธีการสร้างการเชื่อมต่อบนพอร์ตที่ระบุและกำหนดฟังก์ชันการโทรกลับ ในฟังก์ชันนี้ “ ถ้า ” คำสั่งส่งข้อผิดพลาดหากเกิดขึ้นระหว่างการทำงานของโปรแกรมและ “ console.log() ” แสดงข้อความยืนยันบนคอนโซล
ขั้นตอนที่ 6: ปรับใช้แอปพลิเคชัน Node.js
สุดท้าย ปรับใช้แอปพลิเคชัน Node.js ด้วยความช่วยเหลือของ “ โหนด ” คำหลักในลักษณะนี้:
ดัชนีโหนด เจส
การดำเนินการของคำสั่งข้างต้นจะแสดงข้อความยืนยันว่าเซิร์ฟเวอร์ถูกสร้างขึ้นบนพอร์ตที่ระบุสำเร็จ:
ตอนนี้ไปที่ URL ต่อไปนี้ http://localhost:8080 เพื่อดูตัวอย่างไดอารี่ ในหน้าเว็บ 'Sample Diary' ให้กรอกข้อมูลในช่องป้อนข้อมูลทั้งหมดแล้วคลิกที่ ' ส่งไดอารี่ ” เพื่อบันทึกเนื้อหา:
สังเกตได้ว่าหลังจากส่งข้อมูลแล้ว เทอร์มินัลจะแสดงเนื้อหาทั้งหมดขององค์ประกอบ HTML ที่ใช้ใน “Sample Diary” เป็นออบเจ็กต์ JSON โดยอัตโนมัติ:
นั่นคือทั้งหมดที่เกี่ยวกับการใช้มิดเดิลแวร์ body-parser ใน Node.js
บทสรุป
หากต้องการใช้ “ ตัวแยกวิเคราะห์ร่างกาย ” ใน Node.js ใช้คำสั่ง “ urlencoded ' และ ' เจสัน ” parsers ที่แยกวิเคราะห์เนื้อหาของคำขอที่เข้ามาทั้งหมดและแสดงเป็นออบเจ็กต์ JSON มันจัดการเนื้อหาคำขอ “POST” และแยกวิเคราะห์เพื่อดึงเนื้อหาขององค์ประกอบทั้งหมดที่ใช้ในเอกสาร HTML โดยให้วิธีที่ง่ายและสะดวกที่สุดในการประมวลผลวันที่ที่ส่งโดยเนื้อหาคำขอ HTTP ขาเข้า โพสต์นี้ได้สาธิตการใช้งานมิดเดิลแวร์ body-parser ใน Node.js ในทางปฏิบัติแล้ว