What is MEAN?

วิดีโอการสอนฟรีจาก Maximilian Schwarzmüller
AWS certified, Professional Web Developer and Instructor
66 หลักสูตร
ผู้เรียน 3,424,921 คน
คำอธิบายการบรรยาย
What does "MEAN" stand for? Let's explore the different pieces (MongoDB, Express, Angular & Node.js) that make up the MEAN stack and let's see WHY we combine them.
เรียนรู้เพิ่มเติมจากหลักสูตรเต็มรูปแบบ
Angular & NodeJS - The MEAN Stack Guide [2025 Edition]
Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application
วิดีโอออนดีมานด์ความยาว 12:39:59 • อัพเดทเมื่อ มกราคม 2025
Build real Angular + NodeJS applications
Understand how Angular works and how it interacts with Backends
Connect any Angular Frontend with a NodeJS Backend
Use MongoDB with Mongoose to interact with Data on the Backend
Use ExpressJS as a NodeJS Framework
Provide a great user experience by using Optimistic Updating on the Frontend
Improve any Angular (+ NodeJS) application by adding Error Handling
ไทย [อัตโนมัติ]
-: แล้วย่อมาจากอะไร? เราจะเรียนรู้องค์ประกอบใดบ้างในหลักสูตรนี้ หมายถึงประกอบด้วยชุดของเทคโนโลยีสี่และนี่คือสิ่งที่หมายถึง M ย่อมาจาก MongoDB และเป็นฐานข้อมูลที่จะใช้ในหลักสูตรนี้ ดังนั้น ส่วนที่เราจะสามารถยืนยันข้อมูลที่ผู้ใช้แอปพลิเคชันของเราสร้างขึ้นได้เช่นเดียวกับข้อมูลผู้ใช้เอง แต่ยังชอบโพสต์หรือข้อความที่พวกเขาส่ง สิ่งต่างๆ เช่นนั้น E ย่อมาจาก express และ express js นั้นยากที่จะเข้าใจหากไม่มี N งั้นเรารีบไปกันเถอะ เรายังได้ A และ A ย่อมาจาก Angular ตอนนี้ฉันจะกลับไปที่ N ซึ่งเกี่ยวข้องกับ E แต่ Angular เป็นเทคโนโลยีฝั่งไคลเอ็นต์ของเรา ในที่สุดมันเป็นกรอบงาน JavaScript ซึ่งเราจะใช้เพื่อแสดงส่วนต่อประสานผู้ใช้ UI แบบไดนามิกที่ดีแก่ผู้ใช้ของเรา มันทำงานทั้งหมดในเบราว์เซอร์ ไม่ใช่บนเซิร์ฟเวอร์เลย ดังนั้นจึงมีเพียงงานเดียวที่นำเสนออินเทอร์เฟซผู้ใช้แบบโต้ตอบและโต้ตอบที่ดีและน่าพอใจ แล้ว N คืออะไร? คุณคงเห็นแล้วว่ามีบางอย่างขาดหายไป เรามีฐานข้อมูลและเราได้ทำงานบางอย่างในเบราว์เซอร์ แต่แน่นอนว่าเราจำเป็นต้องเรียกใช้ตรรกะบางอย่างบนเซิร์ฟเวอร์ด้วย ตัวอย่างเช่น การตรวจสอบสิทธิ์ผู้ใช้ นี่ไม่ใช่สิ่งที่เราสามารถทำได้ในเบราว์เซอร์เพราะ A โค้ดของเบราว์เซอร์สามารถถูกแฮ็กหรือเปลี่ยนแปลงได้ง่าย และ B ซับซ้อนเกินไป จะใช้เวลาค่อนข้างมากของทรัพยากรและทำให้ส่วนต่อประสานผู้ใช้ของเราช้าลง N ย่อมาจาก node js และเป็นเวลารัน JavaScript ที่ภาษาฝั่งเซิร์ฟเวอร์จะใช้ในหลักสูตรนี้สำหรับโค้ดฝั่งเซิร์ฟเวอร์ของเรา ดังนั้นสำหรับตรรกะทางธุรกิจหลักของเราที่ทำงานบนเซิร์ฟเวอร์และตอนนี้ E เกี่ยวข้องกับมันเพราะในขณะที่โหนด js เป็นภาษาที่เราจะใช้บนเซิร์ฟเวอร์ Express เป็นเฟรมเวิร์กสำหรับโหนด js ที่ทำให้การทำงานกับมันง่ายขึ้น คุณไม่ต้องการ express JS ต่อ se แต่มันทำให้การทำงานกับมันง่ายขึ้นมาก เช่นเดียวกับที่ Angular เป็นเฟรมเวิร์กสำหรับ JavaScript ในเบราว์เซอร์ คุณไม่ต้องการมัน แต่มันทำให้สิ่งต่าง ๆ ง่ายขึ้น แต่ลองมาดูรายละเอียดทั้งหมดนี้กันดีกว่า ตอนนี้อยากดู Angular ก่อน อย่างที่ฉันพูดไปแล้ว Angular ทำงานบนฝั่งไคลเอ็นต์ในเบราว์เซอร์ เป็นเฟรมเวิร์กที่สร้างขึ้นบน JavaScript หรือใช้ JavaScript และใช้เพื่อสร้างแอปพลิเคชันหน้าเดียวที่เรียกว่า โดยพื้นฐานแล้วหมายความว่าจะจัดการกับตรรกะส่วนหน้าทั้งหมด ดังนั้นทุกอย่างที่ผู้ใช้ของคุณจะได้เห็น Angular จะต้องรับผิดชอบ แต่ฉันจะกลับมาหามันในอีกไม่กี่วินาที งาน Angulars คือการแสดงส่วนต่อประสานผู้ใช้กับข้อมูลแบบไดนามิก และส่วนข้อมูลแบบไดนามิกนั้นมีความสำคัญ แน่นอน งานของมันไม่ได้เป็นเพียงการแสดง HTML แบบคงที่และ CSS บางส่วนเท่านั้น เราไม่ต้องการ JavaScript สำหรับสิ่งนั้น หน้าที่ของมันคือการอัปเดต UI เมื่อใดก็ตามที่เรามีข้อมูลใหม่ สมมติว่าคุณสร้างโพสต์ใหม่ เราต้องการอัปเดต UI ทันทีเพื่อแสดงโพสต์ใหม่ที่นั่น นอกจากนี้ยังรับผิดชอบในการจัดการอินพุตของผู้ใช้เพื่อตรวจสอบความถูกต้องของอินพุตของผู้ใช้และส่งไปยังเซิร์ฟเวอร์เนื่องจากเป็นส่วนที่สาม มันสื่อสารกับแบ็กเอนด์ของเรา ดังนั้นด้วยโหนดนั้นแสดงว่า Mongo รวมกันซึ่งดูเหมือนว่าจะรับผิดชอบ Angular ให้บริการแอปบนอุปกรณ์เคลื่อนที่ เช่น ประสบการณ์ผู้ใช้ เนื่องจากเราจัดการทุกอย่างในเบราว์เซอร์ผ่าน JavaScript เราจึงไม่จำเป็นต้องโหลดหน้าเว็บซ้ำ เราเพียงแค่เปลี่ยนบางส่วนของหน้าด้วย JavaScript ผ่าน Angular ดังนั้นทุกอย่างจึงเกิดขึ้นทันทีในลักษณะที่มีปฏิกิริยาตอบสนอง และนั่นคือความรู้สึกที่เรารู้จากแอพมือถือ ตอนนี้ นั่นยังเป็นเพียงส่วนหน้าเท่านั้น อย่างที่ฉันบอกว่าโหนด JS เป็นภาษาที่เราจะใช้สำหรับส่วนหลัง ดังนั้นในฝั่งเซิร์ฟเวอร์ซึ่งเราทุกคนสร้างในหลักสูตรนี้ โหนด JS เป็นไลบรารีฝั่งเซิร์ฟเวอร์ รันไทม์ของ JavaScript และคุณรู้ว่า JavaScript สามารถทำงานในเบราว์เซอร์ได้ ในขณะที่โหนด js เพียงแค่เพิ่มบางสิ่งที่มีประโยชน์บนเซิร์ฟเวอร์เช่นการทำงาน กับไฟล์ ทำงานกับคำขอ http และตอนนี้เราก็สามารถใช้ JavaScript บนเซิร์ฟเวอร์ได้เช่นกัน ค่อนข้างน่าทึ่ง node js รับฟังคำขอที่เข้ามาและสามารถส่งการตอบกลับได้ ตัวอย่างเช่น แอป Angular ของเราสามารถส่งคำขอเพื่อดึงรายการโพสต์ทั้งหมดและโหนดสามารถจัดการคำขอทำบางสิ่ง เข้าถึงฐานข้อมูล และส่งการตอบกลับด้วยโพสต์เหล่านี้ทั้งหมด Node js เรียกใช้งานลอจิกฝั่งเซิร์ฟเวอร์โดยทั่วไป ดังนั้นการรับรองความถูกต้อง สิ่งที่เราไม่ต้องการทำงานในเบราว์เซอร์ด้วยเหตุผลด้านความปลอดภัยหรือประสิทธิภาพ และโหนด js สามารถโต้ตอบกับฐานข้อมูลและไฟล์ได้ แองกูลาร์ทำไม่ได้ ไม่มีการเข้าถึงระบบไฟล์ใด ๆ และโดยเฉพาะอย่างยิ่งไม่ใช่ระบบไฟล์บนเครื่องระยะไกลบางเครื่องบนเซิร์ฟเวอร์ และในขณะที่ในทางทฤษฎีคุณสามารถเชื่อมต่อกับฐานข้อมูลจาก Angular เนื่องจากผู้ใช้มองเห็นโค้ด JavaScript ฝั่งไคลเอ็นต์ทั้งหมดของคุณ คุณสามารถดูได้ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ของคุณ มันจะไม่ปลอดภัยมากที่จะเชื่อมต่อฐานข้อมูลของคุณที่นั่น เพราะคุณจะเปิดเผยข้อมูลประจำตัวของคุณและทุกอย่าง คุณไม่ต้องการทำอย่างนั้น ดังนั้น node js จึงเป็นทางเลือกแทน PHP หากคุณรู้จักสิ่งนั้น หรือ Ruby on the Rails, asp.js เน็ต อะไรทำนองนั้น และไม่ค่อยได้ใช้แบบสแตนด์อโลน เช่นเดียวกับภาษาเหล่านี้ โดยทั่วไปคุณใช้เฟรมเวิร์กร่วมกับเฟรมเวิร์กและเฟรมเวิร์กที่คุณใช้เป็นแบบด่วน Express เป็นเฟรมเวิร์กโหนด JS ดังนั้นมันจึงยังคงใช้โหนด js ซึ่งเป็นภาษาเดียวกัน แต่เพิ่มคุณสมบัติยูทิลิตี้มากมาย ดังนั้นจึงมีฟังก์ชันเพิ่มเติมหรือโดยทั่วไปทำให้สิ่งต่างๆ ง่ายขึ้น Express JS เป็นแบบมิดเดิลแวร์ และเราจะมาดูกันว่าสิ่งนี้หมายความว่าอย่างไรเมื่อเราดำดิ่งลงไปในโค้ด โดยพื้นฐานแล้วมันจะส่งคำขอเข้ามาผ่านห่วงโซ่ของมิดเดิลแวร์ของขั้นตอนที่เราสามารถทำบางสิ่งกับคำขอ อ่านข้อมูลบางส่วนจากมัน จัดการมันตรวจสอบว่าผู้ใช้ได้รับการตรวจสอบสิทธิ์หรือโดยพื้นฐานแล้วส่งการตอบกลับกลับทันที ห่วงโซ่นี้ช่วยให้เราสามารถเขียนโค้ดที่มีโครงสร้างได้ดีมาก และคุณจะได้เรียนรู้ทุกอย่างเกี่ยวกับมันในหลักสูตรนี้อย่างแน่นอน และสุดท้าย แต่อย่างน้อยก็มีการกำหนดเส้นทาง ซึ่งหมายความว่าเราสามารถแสดงมุมมองได้ ดังนั้นหน้า HTML ด้วย เราจะไม่ทำเช่นนี้ในหลักสูตรนี้เนื่องจาก Angular ควรจัดการส่วนหน้าทั้งหมดของเรา และอีกครั้ง นี่คือทั้งหมดที่เราจะได้เห็น แต่ที่สำคัญกว่านั้น เราสามารถจัดการคำขอที่แตกต่างกันไปยังปลายทางที่แตกต่างกัน ซึ่งจะมีความสำคัญสำหรับการเชื่อมต่อ Angular กับแบ็กเอนด์ เพราะถ้าเราต้องการดึงรายการโพสต์ เราต้องการส่งคำขอไปที่ /posts ดังนั้น โดเมน/โพสต์ของเรา หากเราต้องการสร้างโพสต์ใหม่ เราต้องการส่งคำขออื่นไปยังโดเมน/โพสต์ของเรา เป็นต้น และ JS ด่วนช่วยให้เราสามารถนำตรรกะการกำหนดเส้นทางนี้ไปใช้เพื่อให้มีการจัดการคำขอที่แตกต่างกันไปยัง URL ที่แตกต่างกันอย่างถูกต้อง อีกครั้ง ทั้งหมดนี้จะดำเนินการทีละขั้นตอนตลอดหลักสูตร สรุปได้ว่า express JS ทำให้การใช้งาน no js ง่ายขึ้น เป็นเครื่องมือที่เราต้องการใช้อย่างแน่นอน หากคุณมีพื้นหลังของ PHP เช่น คุณสามารถเปรียบเทียบกับ Laravel สำหรับ PHP ได้ มันทำให้สิ่งต่างๆ ง่ายขึ้น มีสิ่งหนึ่งที่ขาดหายไปและนั่นคือ MongoDB แน่นอน MongoDB อย่างที่ฉันพูดไปแล้วเป็นฐานข้อมูล เป็นฐานข้อมูล noSQL ที่แม่นยำและจัดเก็บเอกสารที่เรียกว่าคอลเลกชันที่เรียกว่า ตอนนี้ คุณอาจเคยได้ยินเกี่ยวกับฐานข้อมูล SQL เช่น SQL ของฉัน, Microsoft SQL ที่คุณมีแถวระเบียนซึ่งคุณจัดเก็บไว้ในตาราง ตอนนี้ noSQL มีตรรกะที่แตกต่างจากฐานข้อมูล SQL แต่โดยทั่วไปแล้ว ยังคงเป็นฐานข้อมูล ดังนั้น คุณจึงจัดเก็บข้อมูลแอปพลิเคชันของคุณบนเซิร์ฟเวอร์เพื่อให้ข้อมูลยังคงอยู่ในหน้าที่มีการรีโหลดใหม่ทั่วทั้งผู้ใช้ ออกจากหน้าของคุณ สิ่งต่างๆ เช่นนั้น ดังนั้นข้อมูลใด ๆ ที่ไม่ใช่แค่ข้อมูลชั่วคราวจะต้องเก็บไว้ในฐานข้อมูลดังกล่าวอย่างแน่นอน ตอนนี้สิ่ง noSQL หมายความว่าฐานข้อมูลประเภทนี้ไม่บังคับใช้สคีมา ดังนั้นคุณจึงสามารถมีเอกสารที่แตกต่างกันโดยมีข้อมูลส่วนต่างๆ ในตารางหรือคอลเล็กชันเดียวกันตามที่เรียกว่าที่นี่ และมันก็ใช้ไม่ได้กับความสัมพันธ์ด้วย คุณจะเห็นในหลักสูตรนี้ว่าเราสามารถเชื่อมโยงเอกสารต่างๆ เข้าด้วยกันได้ แต่โดยทั่วไปแล้ว ความสัมพันธ์จะเข้มงวดและยืดหยุ่นน้อยกว่าฐานข้อมูล SQL และฐานข้อมูล noSQL นั้นเกี่ยวกับการจัดเก็บเอกสารที่ไม่มีโครงสร้างหลายชุด แม้ว่าคุณจะใส่โครงสร้างเข้าไปได้ และเราจะทำเช่นนั้นในหลักสูตรนี้ ฉันจะกลับมาที่ MongoDB คืออะไรและทำงานอย่างไรในส่วนที่เกี่ยวข้อง ไม่ต้องห่วง. สุดท้ายแต่ไม่ท้ายสุด มันเชื่อมต่อกับ Node ได้อย่างง่ายดาย ที่สวยเย็น มันง่ายมากที่จะรวมหรือโหนดด่วนให้แม่นยำ และเราไม่ได้เชื่อมต่อกับ Angular ฉันพูดไปแล้ว ในทางทฤษฎี คุณสามารถหาวิธีการได้ แต่คุณไม่ต้องการทำอย่างนั้นเพราะคุณไม่ต้องการเปิดเผยข้อมูลประจำตัวของฐานข้อมูลของคุณในโค้ดของไซต์เบราว์เซอร์ของคุณ ซึ่งผู้ใช้จะดูได้ง่าย สามารถเข้าถึงได้ในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ ดังนั้น MongoDB จึงเป็นฐานข้อมูลที่ทรงพลังซึ่งสามารถรวมเข้ากับสภาพแวดล้อม node express ได้อย่างง่ายดาย และเป็นที่นิยมอย่างมากในปัจจุบัน เนื่องจากมีความยืดหยุ่นสูงและสามารถปรับขนาดได้สูง สามารถรองรับปริมาณงานได้มาก ดังนั้นคำขอต่อวินาทีหรือเขียนการดำเนินการต่อวินาที และอ่านการดำเนินการต่อวินาที และจะเจาะลึกลงไปในส่วนนี้ในส่วนที่เราเริ่มทำงานด้วย ตอนนี้คุณสามารถแทนที่ด้วยฐานข้อมูลอื่นในทางทฤษฎี คุณสามารถใช้ฐานข้อมูล SQL ในแอปพลิเคชัน node express Angular ได้เช่นกัน คุณไม่ได้จำกัดแค่ MongoDB และแค่อยากจะเน้นเรื่องนี้จริงๆ ฉันใช้ MongoDB เพราะมันเป็นส่วนหนึ่งของวิธีการยอดนิยมนี้และมีข้อดีบางประการ แต่ขึ้นอยู่กับแอปพลิเคชันและประเภทของข้อมูลที่คุณจัดเก็บ หากเป็นข้อมูลที่มีความสัมพันธ์จำนวนมาก บางทีฐานข้อมูล SQL อาจดีกว่า และในขณะที่เราจะใช้ MongoDB ในวาทกรรม ฉันแค่อยากจะเน้นว่าสิ่งนี้ไม่จำเป็น คุณสามารถใช้ฐานข้อมูลใดก็ได้ที่นี่ ตรรกะหลักจะดำน้ำในการเชื่อมต่อจริงของเชิงมุมและโหนด ด้วยเหตุนี้ ให้ฉันกลับมาอย่างรวดเร็วถึงความหมายของแอปพลิเคชันหน้าเดียวและภาพรวมของแอปที่มีความหมายดังกล่าว ก่อนที่เราจะเริ่มต้นดำดิ่งสู่การตั้งค่าหลักสูตรและเริ่มสร้างแอปที่มีความหมายของเรา