Express.js เป็นเฟรมเวิร์กของ Node.js เช่นเดียวกับ Laravel ที่เป็น PHP Express.js มาพร้อมกับความเรียบง่ายในการทำความเข้าใจโหนดและมีจุดแข็งในการทำให้การกำหนดเส้นทางเป็นเรื่องง่ายมาก ทำให้การรับคำขอจากส่วนหน้าและเชื่อมต่อกับฐานข้อมูลแอปพลิเคชันของเราเป็นเรื่องง่าย
Express.js ใช้รูปแบบการออกแบบ MVC (โมเดล มุมมอง และตัวควบคุม) เราจะเห็นสิ่งนี้เมื่อเราก้าวหน้าในบทช่วยสอนนี้ โดยเฉพาะอย่างยิ่งในส่วนที่ 2 ของบทช่วยสอนนี้
ในบทช่วยสอนนี้ เราจะสร้างแอปพลิเคชันง่ายๆ โดยมีวัตถุประสงค์เพื่อทำความเข้าใจ Express.js เพียงอย่างเดียว
ข้อกำหนดพื้นฐาน
- โหนดJs
- ไอดี
- ความรู้พื้นฐานของ Javascript นั้นเป็นข้อดี แต่ก็ไม่ควรหยุดคุณจากการเรียนรู้
มาเริ่มกันเลย
การติดตั้ง Express.js
ก่อนที่เราจะติดตั้ง Express มาตรวจสอบว่าเราได้ติดตั้ง Nodejs และ NPM บนเครื่องของเราแล้วหรือไม่
ไปที่เทอร์มินัลหรือพรอมต์คำสั่งแล้วเรียกใช้
node -v
และนอกจากนี้ยังมี
npm -v
หลังจากตรวจสอบแล้ว เราสามารถติดตั้ง Express.js ผ่าน NPM โดยใช้คำสั่งนี้:
npm install express
คุณอาจพิจารณาติดตั้ง Express ทั่วโลกเพื่อให้คุณสามารถแชร์โมดูลระหว่างแอปพลิเคชันต่างๆ ได้ ดังนั้นในการติดตั้งทั่วโลก คุณจะต้อง -g
npm install -g express
ติดตั้ง Express.js บนเครื่องของเราเรียบร้อยแล้ว ตอนนี้เรามาสร้างแอปพลิเคชันของเราโดยใช้กันดีกว่า
express expressapp
ที่นี่ ฉันใช้ expressapp เป็นชื่อแอปพลิเคชันของฉัน คุณสามารถใช้ชื่อใดก็ได้ตามที่คุณต้องการ
คำสั่งนี้จะสร้างไฟล์และโฟลเดอร์จำนวนมากให้เราโดยที่เราไม่จำเป็นต้องสร้างด้วยตนเอง
มาดูกันโดยสรุป นำทางไปยังแอปพลิเคชันโดยเรียกใช้ cd expressapp และเปิดด้วยโปรแกรมแก้ไขข้อความของคุณ ฉันใช้ Vscode และสามารถเปิดได้อย่างง่ายดายโดยใช้เทอร์มินัลของฉันด้วย code .
- package.json: ไฟล์นี้ประกอบด้วยรายการแพ็คเกจโหนดทั้งหมดที่เราติดตั้งในแอปพลิเคชันและคำแนะนำเกี่ยวกับแอปพลิเคชัน
- app.js: ไฟล์นี้เป็นหน้ารายการหลักสำหรับแอปพลิเคชันด่วน รหัสเซิร์ฟเวอร์เว็บ
อยู่ในไฟล์นี้ - สาธารณะ: เราสามารถใช้โฟลเดอร์นี้เพื่อแทรกเนื้อหาของเรา เช่น รูปภาพ สไตล์ชีต หรือโค้ด JavaScript ที่กำหนดเอง
- มุมมอง: โฟลเดอร์นี้ประกอบด้วยไฟล์มุมมองทั้งหมดของเราที่จะแสดงผลในเบราว์เซอร์
- เส้นทาง: โฟลเดอร์นี้มีรายการเส้นทางทั้งหมดที่เราจะสร้างการเข้าถึงไปยังหน้าต่างๆ ของแอปพลิเคชัน
- bin: โฟลเดอร์นี้ประกอบด้วยไฟล์ปฏิบัติการสำหรับ Node.js
การดูไฟล์ package.json ของเราโดยย่อแสดงให้เห็นว่าคำสั่ง express ได้ติดตั้งการขึ้นต่อกันตามที่ต้องการ
มาดูกันอย่างรวดเร็ว
- ด่วน: นี่คือเฟรมเวิร์ก JavaScript ของ Node.js และใช้ในการสร้างแอปพลิเคชันเว็บที่ปรับขนาดได้นอกเหนือจาก Node.js
- static-favicon: ใช้สำหรับแสดง favicon ในเบราว์เซอร์เพื่อระบุแอปพลิเคชันของเรา
- มอร์แกน: นี่คือมิดเดิลแวร์สำหรับบันทึกคำขอ HTTP
- body-parser: ใช้เพื่อแยกวิเคราะห์พารามิเตอร์ของ body ที่เราให้ไว้เมื่อทำการร้องขอ HTTP
- debug: นี่คือแพ็คเกจยูทิลิตี้ JavaScript ที่ให้การจัดรูปแบบที่สวยงามสำหรับสิ่งที่ console.log ส่งคืน
- jade: ตามที่กล่าวไว้ก่อนหน้านี้ นี่คือกลไกการสร้างเทมเพลตเริ่มต้นสำหรับ Node.js เราควรจะเห็นคำเตือนในขณะที่สร้างแอปพลิเคชันด้วยคำสั่ง express โดยบอกว่าเอ็นจิ้นการดูเริ่มต้นจะไม่น่าเบื่อในรีลีสในอนาคต เนื่องจากหยกจะถูกแทนที่ด้วยปั๊ก หยกเป็นลิขสิทธิ์ของบริษัทแห่งหนึ่ง และต่อมาได้เปลี่ยนชื่อเป็นปั๊ก
ไปข้างหน้าและเปลี่ยนจาก jade เป็น pug
ในไฟล์ package.json ให้ลบบรรทัด ”jade”: “~1.3.0” ออก เพื่อติดตั้ง pug ให้รัน
npm install pug --save
เปลี่ยนชื่อไฟล์ในโฟลเดอร์มุมมอง:
- error.jade ถึง error.pug
- index.jade ถึง index.pug
- layout.jadeถึงlayout.pug
สุดท้ายใน app.js ให้แทนที่ app.set(‘view engine’, ‘jade’) ด้วย app.set(‘view engine’, ‘pug’) จากนั้น run npm install เพื่อติดตั้งการอ้างอิงทั้งหมด
คุณอาจสงสัยว่าในที่สุดเราจะเห็นบางสิ่งบางอย่างบนเบราว์เซอร์ของเราในที่สุด เราก็มาถึงจุดนั้นแล้ว
ตั้งค่าเว็บเซิร์ฟเวอร์
เพิ่มบรรทัดโค้ดต่อไปนี้ลงในไฟล์ app.js ของคุณ
app.listen(3000, function() { console.log('listening on 3000') })
ตอนนี้ไปที่เทอร์มินัลของคุณแล้วเรียกใช้ node app.js เพื่อเริ่มแอปของคุณ
ไปที่เบราว์เซอร์ของคุณแล้วเรียกใช้ localhost:3000
ยินดีด้วย!!!! นี่ไง เราได้สร้างแอป express.js แอปแรกของเราแล้ว
อะไรต่อไป
เราจะปรับปรุงแอปของเราโดยการนำสถาปัตยกรรม MVC ไปใช้กับแอปของเราในส่วนที่ 2 ของบทช่วยสอนนี้
โปรดแสดงความคิดเห็นหากคุณมีสิ่งอื่นใดที่จะเพิ่มหรือมีคำถาม ฉันหวังว่าคุณจะได้เรียนรู้สิ่งใหม่ๆ ในระหว่างนี้ ที่นี่ คือ repo Github สำหรับโปรเจ็กต์นี้ ขอให้มีความสุขในการเข้ารหัส !!!
