บทความนี้เปลี่ยนไปจาก "การแปล] คู่มือการเริ่มต้นสำหรับนักพัฒนาส่วนหน้าของ Feiyu การสร้างโหนด Js, Express, Jade, MongoDB เซิร์ฟเวอร์ตั้งแต่ต้น การสอน
ส่วนที่ 1 การติดตั้งใน 15 นาที
หากคุณเรียนรู้ตั้งแต่เริ่มต้นใช้เวลาในการสร้างสภาพแวดล้อมก่อน มันไม่ยากฉันใช้ Win8 ดังนั้นสิ่งนี้จึงดูแตกต่างจากบทช่วยสอนเหล่านั้นเล็กน้อยโดยใช้ Mac และ Ubuntu หรือระบบอื่น ๆ *nix อื่น ๆ แต่มันก็เหมือนกัน
ขั้นตอนที่ 1 ติดตั้ง node.js
เป็นเรื่องง่ายที่จะไปที่เว็บไซต์อย่างเป็นทางการของ Node.js และคลิกที่ปุ่ม Green Big Install ซึ่งจะตรวจจับระบบของคุณโดยอัตโนมัติและให้คุณดาวน์โหลดไฟล์การติดตั้งที่ถูกต้อง (ถ้าไม่คลิกปุ่มดาวน์โหลดเพื่อเลือกดาวน์โหลดที่คุณต้องการ) เรียกใช้ตัวติดตั้งและไม่เป็นไร คุณได้ติดตั้ง node.js และ NPM (Node Package Manager) เพื่อติดตั้งแพ็คเกจที่มีประโยชน์ต่าง ๆ ลงในโหนดได้อย่างง่ายดาย
ขั้นตอนที่ 2 ติดตั้งด่วน
ตอนนี้เราได้ปล่อยให้โหนดทำงานแล้วเราต้องการอย่างอื่นเพื่อให้เราสามารถสร้างเว็บไซต์ที่มีอยู่จริง ต่อไปเราต้องติดตั้ง Express ซึ่งเป็นเฟรมเวิร์กที่เปลี่ยนโหนดจากแอปพลิเคชันดั้งเดิมเป็นเว็บเซิร์ฟเวอร์ที่คล้ายกันมากขึ้นที่เรามักจะใช้ เราต้องเริ่มต้นด้วย Express เพราะเราต้องการฟังก์ชั่นการนั่งร้านที่มีให้ มาป้อนคำสั่งนี้กันเถอะ:
การคัดลอกรหัสมีดังนี้:
c:/node> npm ติดตั้ง -g express
ด้วยวิธีนี้ Express ได้รับการติดตั้งอย่างถูกต้องลงในโหนดของเราและได้รับการตั้งค่าให้เป็นทั่วโลก คุณจะเห็นเอาต์พุตจำนวนมากในหน้าต่างบรรทัดคำสั่งส่วนใหญ่ HTTP 304 และรับคำขอซึ่งเป็นเรื่องปกติ ควรติดตั้งและพร้อมใช้งาน
ขั้นตอนที่ 3 สร้างโครงการด่วน
เราจะใช้ Express และ EJS แต่ไม่ใช่สำหรับการประมวลผลล่วงหน้า CSS เราจะเขียนด้วยมือ CSS บางส่วน เราจำเป็นต้องใช้ EJS หรือเอ็นจิ้นเทมเพลตอื่น ๆ เพื่อประมวลผลโหนดและแสดงข้อมูล หากคุณรู้จัก HTML EJS ก็ไม่ยาก เพียงจำไว้ว่าคุณต้องโฟกัสหรือสิ่งต่าง ๆ อาจมีแนวโน้มที่จะเกิดข้อผิดพลาด
ตอนนี้ป้อนในหน้าต่างบรรทัดคำสั่งเดียวกัน:
การคัดลอกรหัสมีดังนี้:
C:/Node> Express Sessions Nodetest1
เข้าและคุณจะเห็นสิ่งต่างๆเช่นนี้:
การคัดลอกรหัสมีดังนี้:
C:/Node> Express -Sessions Nodetest1
สร้าง: nodetest1
สร้าง: nodetest1/package.json
สร้าง: nodetest1/app.js
สร้าง: nodetest1/เส้นทาง
สร้าง: nodetest1/route/index.js
สร้าง: nodetest1/route/user.js
สร้าง: nodetest1/views
สร้าง: nodetest1/views/index.ejs
สร้าง: nodetest1/สาธารณะ/รูปภาพ
สร้าง: nodetest1/สาธารณะ/javascripts
สร้าง: nodetest1/สาธารณะ
สร้าง: nodetest1/public/stylesheets
สร้าง: nodetest1/สาธารณะ/สไตล์ชีท/style.css
ติดตั้งการพึ่งพา:
$ cd nodetest1 && npm ติดตั้ง
เรียกใช้แอพ:
$ Node App
ขั้นตอนที่ 4 แก้ไขการพึ่งพา
ตกลงเรามีโครงสร้างโครงการพื้นฐานบางอย่างตอนนี้ แต่ยังไม่เสร็จ คุณจะสังเกตเห็นว่ากระบวนการติดตั้งของ Express สร้างไฟล์ที่เรียกว่า package.json ในไดเรกทอรี nodetest1 ของคุณ เปิดไฟล์ด้วยตัวแก้ไขข้อความ มันควรจะเป็นแบบนี้
การคัดลอกรหัสมีดังนี้:
-
"ชื่อ": "แอปพลิเคชันชื่อ",
"เวอร์ชัน": "0.0.1"
"ส่วนตัว": จริง
"สคริปต์": {
"เริ่ม": "Node App.js"
-
"การพึ่งพา": {
"ด่วน": "3.4.8"
"EJS": "*"
-
-
นี่คือไฟล์รูปแบบ JSON มาตรฐานที่ระบุแอปพลิเคชันของเราและการอ้างอิง เราจำเป็นต้องเพิ่มบางสิ่งบางอย่าง ตัวอย่างเช่นการโทรไปยัง MongoDB และ Monk เปลี่ยนส่วนการพึ่งพาเป็นสิ่งนี้:
การคัดลอกรหัสมีดังนี้:
"การพึ่งพา": {
"ด่วน": "3.4.8"
"EJS": "*",
"MongoDB": "*",
"พระ": "*"
-
ขั้นตอนที่ 5 ติดตั้งการพึ่งพา
ตอนนี้เราได้กำหนดการพึ่งพาของโครงการ * จะบอกให้ NPM "ติดตั้งเวอร์ชันล่าสุด" กลับไปที่หน้าต่างบรรทัดคำสั่งป้อนไดเรกทอรี NODETEST1 และป้อน:
การคัดลอกรหัสมีดังนี้:
c:/node/nodetest1> npm ติดตั้ง
มันส่งออกหลายสิ่ง นี่เป็นเพราะมันอ่านไฟล์ JSON ที่แก้ไขโดยตรงของเราจดจำการอ้างอิงในนั้นและติดตั้งไฟล์ที่ต้องการ หลังจากการติดตั้ง NPM เสร็จสมบูรณ์คุณควรมีไดเรกทอรี Node_Modules ที่มีไฟล์การพึ่งพาทั้งหมดที่จำเป็นสำหรับโครงการของเรา
ตอนนี้เรามีแอพเต็มรูปแบบและพร้อมที่จะทำงาน ลองกันเถอะ! ตรวจสอบให้แน่ใจว่าไดเรกทอรีปัจจุบันของคุณคือไดเรกทอรี nodetest1 ให้ป้อน:
การคัดลอกรหัสมีดังนี้:
c:/node/nodetest1> node app.js
หลังจากเข้ารถแล้วคุณจะเห็น:
การคัดลอกรหัสมีดังนี้:
Express Server ฟังบนพอร์ต 3000
มหัศจรรย์ เปิดเบราว์เซอร์และป้อน http: // localhost: 3000 และคุณควรจะเห็นหน้าต้อนรับในด่วน
ตอนนี้คุณได้เริ่มใช้งาน Node JS Webserver ของคุณเองด้วยเอ็นจิ้น Express Engine และ EJS HTML Template Engine ไม่ยากใช่มั้ย
ตอนที่ 2 อยู่ที่นี่มาเขียน“ สวัสดีโลก!”
เปิดตัวแก้ไขข้อความที่ใช้กันทั่วไปหรือ IDE อื่น ๆ ฉันชอบใช้ข้อความประเสริฐ เปิด app.js ในไดเรกทอรี nodetest1 ของคุณและไฟล์นี้เป็นแกนหลักของแอพของคุณ คุณควรเห็นอะไรแบบนี้:
การคัดลอกรหัสมีดังนี้:
var express = ต้องการ ('ด่วน');
เส้นทาง var = ต้องการ ('./ เส้นทาง');
var user = ต้องการ ('./ เส้นทาง/ผู้ใช้');
var http = ต้องการ ('http');
var path = ต้องการ ('เส้นทาง');
นี่เป็นเพียงการกำหนดตัวแปร JavaScript และชี้ไปที่แพ็คเกจและการพึ่งพาบางส่วนฟังก์ชั่นโหนดและเส้นทาง เส้นทางเทียบเท่ากับคอลเลกชันของรุ่นและตัวควบคุมใน MVC มันมีหน้าที่รับผิดชอบในการส่งต่อคำขอและยังมีตรรกะการประมวลผลบางอย่าง Express ได้สร้างสิ่งเหล่านี้ทั้งหมดสำหรับเราและตอนนี้เราไม่สนใจเส้นทางผู้ใช้และเริ่มเขียนเส้นทางระดับบนสุด (ควบคุมโดยเส้นทาง/index.js)
ในตอนท้ายของไฟล์ด้านบน:
การคัดลอกรหัสมีดังนี้:
var app = express ();
ประโยคนี้มีความสำคัญ มันอินสแตนซ์เอ็กซ์เพรสและกำหนดค่าให้กับตัวแปรแอปของเรา เนื้อหาต่อไปนี้จำเป็นต้องใช้ตัวแปรนี้เพื่อกำหนดค่าพารามิเตอร์ด่วน เข้าร่วม:
การคัดลอกรหัสมีดังนี้:
// สภาพแวดล้อมทั้งหมด
app.set ('พอร์ต', process.env.port || 3000);
app.set ('views', path.join (__ dirname, 'views'));
app.set ('ดูเอ็นจิ้น', 'ejs');
App.use (Express.favicon ());
app.use (express.logger ('dev'));
app.use (express.bodyparser ());
App.use (Express.Methodoverride ());
app.use (app.router);
app.use (express.static (path.join (__ dirname, 'สาธารณะ')));
ที่นี่เราตั้งค่าพอร์ตมองหาไดเรกทอรีของมุมมองเครื่องมือเทมเพลตที่จะใช้เพื่อจัดการกับมุมมองเหล่านี้และสิ่งอื่น ๆ ยังให้ความสนใจกับบรรทัดสุดท้ายซึ่งบอกให้ Express โฮสต์ไฟล์คงที่ในสาธารณะ/ ไดเรกทอรีเป็นไฟล์ในไดเรกทอรีระดับบนสุด ตัวอย่างเช่นไดเรกทอรีรูปภาพของคุณจะถูกเก็บไว้ใน C:/Node/Nodetest1/Public/Images/แต่ที่อยู่การเข้าถึงจริงคือ http: // localhost: 3000/images/
หมายเหตุ: คุณต้องวางบรรทัดนี้
การคัดลอกรหัสมีดังนี้:
app.use (express.bodyparser ());
เปลี่ยน
การคัดลอกรหัสมีดังนี้:
App.use (Express.urlencoded ());
นี่คือการเพิกเฉยต่อข้อมูลคำเตือนในหน้าต่างโหนดในระหว่างการทำงานของแอพบางตัว ส่วนใหญ่บางส่วน Express และปลั๊กอินอาจได้รับการแก้ไขในอนาคต หากคุณไม่ได้ทำการปรับเปลี่ยนนี้คุณจะได้รับคำเตือนมากมายว่าฟังก์ชั่นบางอย่างจะหมดอายุเร็ว ๆ นี้เมื่อโปรแกรมทำงาน
จากนั้นเพิ่ม:
การคัดลอกรหัสมีดังนี้:
// การพัฒนาเท่านั้น
if ('development' == app.get ('env')) {
App.use (Express.errorHandler ());
-
วิธีนี้คุณสามารถตรวจสอบข้อผิดพลาดระหว่างการพัฒนา
เพิ่มขึ้นเรื่อย ๆ :
การคัดลอกรหัสมีดังนี้:
app.get ('/', route.index);
app.get ('/ผู้ใช้', user.list);
นี่จะบอกเส้นทางที่จะใช้เส้นทางใดเมื่อคำขอ URI มาถึง โปรดทราบว่าตัวแปรผู้ใช้ถูกกำหนดไว้ก่อนหน้านี้และแมปกับ /routes/user.js เราจะเรียกฟังก์ชันรายการที่กำหนดไว้ในไฟล์นี้ รายชื่อผู้ใช้สามารถแสดงได้ที่นี่
เพิ่มขึ้นเรื่อย ๆ :
การคัดลอกรหัสมีดังนี้:
http.createserver (แอพ) .Listen (app.get ('พอร์ต'), function () {
console.log ('การฟังเซิร์ฟเวอร์ด่วนบนพอร์ต' + app.get ('พอร์ต'));
-
ในที่สุดสร้างเซิร์ฟเวอร์ HTTP และเริ่มต้น เกี่ยวกับเรื่องนี้
(เนื้อหาข้างต้นเสร็จสมบูรณ์ในเทมเพลตที่สร้างโดย Express ใหม่และไม่จำเป็นต้องเขียนด้วยตัวเอง)
ตอนนี้เรามาเขียนสิ่งที่มีประโยชน์กันเถอะ เราจะไม่เขียน "สวัสดีโลก!" ในหน้าดัชนีของเราโดยตรง เราจะใช้โอกาสนี้เพื่อเรียนรู้วิธีการใช้เส้นทางเส้นทางและเรียนรู้วิธีการทำงานของเอ็นจิ้น EJS เพิ่มบรรทัดหลังจาก App.get () ย่อหน้าของไฟล์ App.js ด้านบน:
app.get ('/helloWorld', route.helloworld);
หากคุณกด Ctrl+C ในหน้าต่างบรรทัดคำสั่งเพื่อสิ้นสุดกระบวนการ app.js และรีสตาร์ทแล้วใช้เบราว์เซอร์เพื่อเข้าถึง http: // localhost: 3000/helloWorld คุณจะได้รับข้อผิดพลาดโหนดที่น่าตื่นเต้น นี่เป็นเพราะเรายังไม่ได้แก้ไขเส้นทางเพื่อประมวลผลเส้นทางนี้ มาทำสิ่งนี้ ในบรรณาธิการของคุณไปที่ไดเรกทอรีเส้นทางค้นหา index.js และเปิด ควรมีลักษณะเช่นนี้:
การคัดลอกรหัสมีดังนี้:
-
* รับหน้าแรก
-
exports.index = function (req, res) {
res.render ('index', {title: 'express'});
-
มาเพิ่มหน้าใหม่ ฉันชอบที่จะสร้างไฟล์เส้นทางอิสระสำหรับแต่ละไดเรกทอรีระดับแรก แต่ตอนนี้เราไม่ได้วางแผนที่จะสร้างโครงสร้างไดเรกทอรีที่สมบูรณ์สำหรับ HelloWorld ภายใต้มุมมองดังนั้นเราจึงใช้เส้นทางดัชนีสำหรับเวลา เพิ่มในตอนท้ายของไฟล์นี้:
การคัดลอกรหัสมีดังนี้:
exports.helloworld = function (req, res) {
Res.render ('HelloWorld', {title: 'Hello, World!'});
-
มันจะรับผิดชอบในการจัดการคำขอ URI นี้ แต่ตอนนี้เราไม่มีหน้าจริงที่จะทำให้ Res.Render Render ซึ่งเป็นสิ่งที่ EJS รับผิดชอบ ไปที่ไดเรกทอรีมุมมองของคุณเปิด index.ejs และบันทึกเป็นไฟล์ helloWorld.ejs ตอนนี้ควรมีลักษณะเช่นนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<title> < %= title %> </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
</head>
<body>
<H1> < %= title %> </h1>
<p> ยินดีต้อนรับสู่ < %= title %> </p>
</body>
</html>
ควรเข้าใจง่าย
บันทึกไฟล์ กด Ctrl+C ในหน้าต่างบรรทัดคำสั่งเพื่อขัดจังหวะ app.js จากนั้นป้อน Node App.js เพื่อรีสตาร์ท เคล็ดลับ: เมื่อคุณแก้ไขไฟล์เทมเพลต EJS คุณไม่จำเป็นต้องรีสตาร์ทเซิร์ฟเวอร์ แต่เมื่อคุณเปลี่ยนไฟล์ JS เช่น App.js หรือไฟล์ JS การกำหนดเส้นทางคุณต้องรีสตาร์ทเซิร์ฟเวอร์เพื่อดูเอฟเฟกต์
หลังจากเซิร์ฟเวอร์เริ่มต้นเซิร์ฟเวอร์จะเปิด http: // localhost: 3000/helloWorld และคุณควรจะเห็นอินเทอร์เฟซที่สวยงามนี้:
ใช้ได้! ตอนนี้เรามีเส้นทางที่สามารถจัดการกับแม่แบบของเราได้แล้วเราจะเห็นเอฟเฟกต์ที่เราต้องการ ถัดไปให้ทำบางรุ่น (เลเยอร์ข้อมูล)
ส่วนที่ 3 สร้างฐานข้อมูลและอ่านข้อมูล
ขั้นตอนที่ 1 ติดตั้ง MongoDB
มาปิดตัวแก้ไขข้อความก่อนแล้วกลับไปที่หน้าต่างบรรทัดคำสั่ง ก่อนอื่นใช้เบราว์เซอร์ของคุณเปิด http://mongodb.org/ และดาวน์โหลด Mongo คลิกลิงก์ดาวน์โหลดในเมนูหลักเพื่อค้นหาเวอร์ชันที่เหมาะสมกับคุณ สำหรับ Win8 64 บิตดาวน์โหลดรุ่น 64 บิต *2008r2+ หลังจากดาวน์โหลดแล้วมันเป็นไฟล์ zip และไม่บีบอัดไปที่ C:/Mongo, C:/โปรแกรมโปรแกรม/Mongo หรืออะไรก็ตาม สิ่งนี้ไม่สำคัญ เราบันทึกข้อมูลในไดเรกทอรี nodetest1 ของเรา
ขั้นตอนที่ 2 เรียกใช้ Mongod และ Mongo
สร้างข้อมูลไดเรกทอรีย่อยในไดเรกทอรี NODETEST1 ของเราจากนั้นป้อนไดเรกทอรี bin ของไดเรกทอรี MongoDB ของคุณในหน้าต่างบรรทัดคำสั่งและป้อน:
การคัดลอกรหัสมีดังนี้:
Mongod dbpath C:/node/nodetest1/data
คุณจะเห็นว่าเซิร์ฟเวอร์ Mongo เริ่มต้นขึ้นและการเริ่มต้นครั้งแรกใช้เวลาเล็กน้อยเพราะต้องใช้พื้นที่ฮาร์ดดิสก์ที่จัดสรรไว้ล่วงหน้าและงานอื่น ๆ เมื่อมันแจ้งให้ "[initandlisten] รอการเชื่อมต่อบนพอร์ต 27017" ก็เสร็จแล้ว ไม่มีอะไรให้ทำเซิร์ฟเวอร์กำลังทำงานอยู่แล้ว ตอนนี้คุณต้องเปิดหน้าต่างบรรทัดคำสั่งอื่นป้อนไดเรกทอรี bin ของไดเรกทอรี Mongo และป้อน
การคัดลอกรหัสมีดังนี้:
Mongo
คุณจะเห็นเคล็ดลับเช่นนี้:
การคัดลอกรหัสมีดังนี้:
C:/Mongo> Mongo
MongoDB Shell เวอร์ชัน: 2.4.5
เชื่อมต่อกับ: ทดสอบ
ในเวลานี้ถ้าคุณดูหน้าต่าง Mongod คุณจะเห็นพรอมต์ว่ามีการเชื่อมต่อการเชื่อมต่อ ต่อไปเราจะใช้ไคลเอนต์บรรทัดคำสั่งนี้เพื่อประมวลผลฐานข้อมูลของเราด้วยตนเอง แต่ไม่จำเป็นสำหรับเว็บไซต์ของเรา
ขั้นตอนที่ 3 สร้างฐานข้อมูล
ไม่ต้องกังวลเกี่ยวกับพรอมต์ข้างต้นสำหรับการเชื่อมต่อกับการทดสอบ นั่นเป็นเพียงฐานข้อมูลที่ Mongo เริ่มต้นเมื่อคุณไม่ได้ระบุฐานข้อมูลและจะไม่สร้างฐานข้อมูลนี้ที่เรียกว่าการทดสอบเว้นแต่คุณจะเพิ่มบันทึกลงไป มาสร้างฐานข้อมูลของเราเอง ในหน้าต่างบรรทัดคำสั่งของ Mongo ป้อน:
การคัดลอกรหัสมีดังนี้:
ใช้ nodetest1
มันจะไม่สร้างฐานข้อมูลนี้เว้นแต่ว่าเราจะแทรกข้อมูลบางอย่างลงไป
ขั้นตอนที่ 4 เพิ่มข้อมูลบางอย่าง
คุณสมบัติที่ฉันโปรดปรานของ MongoDB คือใช้ JSON เป็นโครงสร้างข้อมูลซึ่งหมายความว่าฉันคุ้นเคยกับมันมาก หากคุณไม่คุ้นเคยกับ JSON ให้อ่านวัสดุที่เกี่ยวข้องก่อนซึ่งอยู่นอกเหนือขอบเขตของบทช่วยสอนนี้
เราเพิ่มข้อมูลบางส่วนในคอลเลกชัน ในบทช่วยสอนนี้เรามีฐานข้อมูลที่เรียบง่ายสองฟิลด์: ชื่อผู้ใช้และอีเมล ข้อมูลของเรามีลักษณะเช่นนี้:
การคัดลอกรหัสมีดังนี้:
-
"_id": 1234,
"ชื่อผู้ใช้": "cwbuecheler",
"อีเมล": "[email protected]"
-
คุณสามารถสร้างค่าของคุณเองของฟิลด์ _id แต่ฉันคิดว่ามันจะดีกว่าที่จะให้ Mongo ทำมัน มันสร้างค่าที่ไม่ซ้ำกันสำหรับแต่ละระเบียน มาดูกันว่ามันทำงานอย่างไร ในหน้าต่าง Mongo ป้อน:
การคัดลอกรหัสมีดังนี้:
db.usercollection.insert ({"ชื่อผู้ใช้": "testuser1", "อีเมล": "[email protected]"})
เคล็ดลับที่สำคัญ: DB คือฐานข้อมูล NODETEST1 ที่เราสร้างไว้ข้างต้นและ USERCOLLECTION เป็นคอลเลกชันของเราซึ่งเทียบเท่ากับตารางข้อมูล โปรดทราบว่าเราไม่จำเป็นต้องสร้างคอลเลกชันนี้ล่วงหน้ามันจะถูกสร้างขึ้นโดยอัตโนมัติเมื่อใช้เป็นครั้งแรก ตกลงกด Enter ถ้าทุกอย่างเป็นไปด้วยดีคุณจะเห็น ... ไม่มีอะไร นี่ไม่ดีมากป้อน:
การคัดลอกรหัสมีดังนี้:
db.usercollection.find (). สวย ()
หากคุณอยากรู้อยากเห็นวิธีการสวยจะจัดรูปแบบเนื้อหาเอาต์พุตและเพิ่มการเยื้องใหม่ ควรแสดง:
การคัดลอกรหัสมีดังนี้:
-
"_id": ObjectId ("5202B481D2184D390CBF6ECA")
"ชื่อผู้ใช้": "TestUser1",
"อีเมล": "[email protected]"
-
แน่นอนว่าวัตถุที่คุณได้รับควรแตกต่างกัน Mongo จะสร้างโดยอัตโนมัติ หากคุณเคยใช้บริการอินเทอร์เฟซ JSON มาก่อนคุณคิดว่าว้าวการเรียกสิ่งนี้ในเว็บควรจะง่ายมาก! คุณพูดถูก
เคล็ดลับ: ในฐานะบริการที่เป็นทางการคุณไม่ควรต้องการให้ข้อมูลทั้งหมดอยู่ในระดับสูงสุด เกี่ยวกับการออกแบบโครงสร้างข้อมูล MongoDB ดูที่ Google
ตอนนี้เรามีข้อมูลชิ้นหนึ่งแล้วขอเพิ่มคะแนนเพิ่มเติม เข้า:
การคัดลอกรหัสมีดังนี้:
newSstuff = [{"ชื่อผู้ใช้": "testuser2", "อีเมล": "[email protected]"}, {"ชื่อผู้ใช้": "testuser3", "อีเมล": "[email protected]"}]
db.usercollection.insert (Newstuff);
โปรดทราบว่าเราส่งข้อมูลหลายชิ้นไปยังคอลเลกชันพร้อมกันผ่านข้อมูลหนึ่งครั้ง ง่ายแค่ไหน จากนั้นใช้คำสั่งค้นหาด้านบนและคุณจะเห็นข้อมูลสามชิ้นนี้
ตอนนี้ให้รวมเว็บเซิร์ฟเวอร์และฐานข้อมูลที่สร้างขึ้นมาก่อน
ขั้นตอนที่ 5 เชื่อมต่อ Mongo กับโหนด
ทีนี้มาสร้างหน้าและแสดงระเบียนในฐานข้อมูลลงในตารางที่สวยงาม นี่คือเนื้อหา HTML ที่เรากำลังเตรียมที่จะสร้าง:
การคัดลอกรหัสมีดังนี้:
<ul>
<li> <a href = "mailto: [email protected]"> testuser1 </a> </li>
<li> <a href = "mailto: [email protected]"> testuser2 </a> </li>
<li> <a href = "mailto: [email protected]"> testuser3 </a> </li>
</ul>
ฉันรู้ว่านี่ไม่ใช่วิทยาศาสตร์มากนัก แต่คุณสามารถเข้าใจได้ เราแค่พยายามสร้างโปรแกรมอ่านและเขียนฐานข้อมูลอย่างง่ายไม่ใช่เว็บไซต์ที่สมบูรณ์ ก่อนอื่นเราเพิ่มเนื้อหาเล็กน้อยใน app.js (หัวใจและจิตวิญญาณของโปรแกรมของเรา) เพื่อให้เราสามารถเชื่อมโยง MongoDB เปิด c: /node/nodetest1/app.js ที่ด้านบนคุณจะเห็น:
การคัดลอกรหัสมีดังนี้:
var express = ต้องการ ('ด่วน');
เส้นทาง var = ต้องการ ('./ เส้นทาง');
var user = ต้องการ ('./ เส้นทาง/ผู้ใช้');
var http = ต้องการ ('http');
var path = ต้องการ ('เส้นทาง');
เพิ่มด้านล่าง:
การคัดลอกรหัสมีดังนี้:
// รหัสใหม่
var mongo = ต้องการ ('mongoDb');
var monk = ต้องการ ('Monk');
var db = พระ ('localhost: 27017/nodetest1');
บรรทัดเหล่านี้จะบอกแอพว่าเราต้องเชื่อมต่อกับ MongoDB เราใช้พระเพื่อรับผิดชอบการเชื่อมต่อนี้ ตำแหน่งฐานข้อมูลของเราคือ localhost: 27017/nodetest1 โปรดทราบว่า 27017 เป็นพอร์ตเริ่มต้นของ MongoDB หากคุณปรับเปลี่ยนพอร์ตด้วยเหตุผลบางอย่างคุณควรเปลี่ยนบันทึกที่นี่ ตอนนี้ดูที่ด้านล่างของไฟล์:
การคัดลอกรหัสมีดังนี้:
app.get ('/', route.index);
app.get ('/ผู้ใช้', user.list);
app.get ('/helloWorld', route.helloworld);
เพิ่มบรรทัดด้านล่าง:
การคัดลอกรหัสมีดังนี้:
app.get ('/userlist', route.userlist (db));
บรรทัดนี้จะบอกแอพว่าเมื่อผู้ใช้เข้าถึงเส้นทาง /ผู้ใช้เราต้องผ่านตัวแปร DB ไปยังเส้นทาง UserList แต่เรายังไม่มีเส้นทางรายชื่อผู้ใช้ดังนั้นเรามาสร้างเส้นทางนี้กันเถอะ
ขั้นตอนที่ 6 อ่านข้อมูลใน Mongo และแสดง
ใช้ตัวแก้ไขของคุณเพื่อเปิด c: /node/nodetest1/routes/idnex.js ซึ่งมีสองเส้นทาง: ดัชนีและ Hello World ตอนนี้ขอเพิ่มอันที่สาม:
การคัดลอกรหัสมีดังนี้:
exports.userlist = function (db) {
ฟังก์ชั่น return (req, res) {
var collection = db.get ('usercollection');
collection.find ({}, {}, ฟังก์ชัน (e, docs) {
res.render ('userlist', {
"Userlist": เอกสาร
-
-
-
-
สิ่งต่าง ๆ มีความซับซ้อนเล็กน้อย ที่นี่ก่อนอื่นเรากำหนดฟังก์ชั่นรับตัวแปร db ที่เราผ่านจากนั้นเรียกหน้าการแสดงผลหน้าเว็บที่เหมือนกับเส้นทางสองเส้นทางก่อนหน้า เราบอกว่าเราต้องอ่าน usercollection ทำการค้นหาและข้อมูลที่ส่งคืนจะถูกบันทึกไว้ในตัวแปรเอกสาร เมื่อเราอ่านเนื้อหาแล้วเราจะเรียกให้เรนเดอร์แสดงหน้าเทมเพลต UserList และผ่านตัวแปรเอกสารที่ได้รับเป็นตัวแปร UserList ในเอ็นจิ้นเทมเพลต
ถัดไปสร้างเทมเพลต EJS ของเรา เปิด index.ejs ในไดเรกทอรีมุมมองบันทึกเป็น userlist.ejs และแก้ไข HTML เป็นสิ่งนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<title> userlist </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
</head>
<body>
<H1> userlist </h1>
<ul>
-
สำหรับ (var i ใน userlist) {
-
<li> <a href =” mailto: <%= userlist [i] .Email%>”> <%= userlist [i] .username%> </a> </li>
-
</ul>
</body>
</html>
บันทึกไฟล์และรีสตาร์ทเซิร์ฟเวอร์โหนด หวังว่าคุณจะยังจำวิธีรีสตาร์ทได้อย่างไร เปิดเบราว์เซอร์และเยี่ยมชม http: // localhost: 3000/userlist และคุณควรเห็นอินเทอร์เฟซเช่นนี้:
คลิกปุ่มส่งแล้วคุณจะเห็นข้อผิดพลาดของ "ไม่สามารถโพสต์ไปที่ /adduser" มาแก้ไขกันเถอะ
ขั้นตอนที่ 2 สร้างฟังก์ชั่นการประมวลผลฐานข้อมูลของคุณ
ก่อนหน้านี้เราแก้ไข App.js จากนั้นกำหนดเส้นทางไฟล์แล้วเทมเพลต EJS อย่างไรก็ตามไม่จำเป็นต้องใช้เทมเพลต EJS ที่นี่เพราะเราจะข้ามไปโพสต์ในภายหลัง เพิ่มบรรทัดหลังจาก app.get () ย่อหน้าของ app.js:
การคัดลอกรหัสมีดังนี้:
app.post ('/adduser', route.adduser (db));
โปรดทราบว่านี่คือ app.post ไม่ใช่ app.get มาตั้งเส้นทางกันเถอะ กลับไปที่เส้นทาง/index.js และสร้างฟังก์ชันแทรกฐานข้อมูลของเรา นี่ค่อนข้างใหญ่ดังนั้นฉันขอแนะนำให้คุณเขียนความคิดเห็นที่ดี
การคัดลอกรหัสมีดังนี้:
exports.adduser = function (db) {
ฟังก์ชั่น return (req, res) {
// รับค่าฟอร์มของเรา สิ่งเหล่านี้ขึ้นอยู่กับแอตทริบิวต์ "ชื่อ"
var username = req.body.username;
var useremail = req.body.useremail;
// ตั้งค่าคอลเลกชันของเรา
var collection = db.get ('usercollection');
// ส่งไปยัง DB
collection.insert ({
"ชื่อผู้ใช้": ชื่อผู้ใช้
"อีเมล": Useremail
}, ฟังก์ชัน (err, doc) {
ถ้า (err) {
// หากล้มเหลวให้ส่งคืนข้อผิดพลาด
Res.Send ("มีปัญหาในการเพิ่มข้อมูลลงในฐานข้อมูล");
-
อื่น {
// ถ้าใช้งานได้ให้ตั้งส่วนหัวเพื่อให้แถบที่อยู่ไม่ได้พูด /adduser
Res.location ("Userlist");
// และส่งต่อไปยังหน้าความสำเร็จ
Res.redirect ("Userlist");
-
-
-
-
เห็นได้ชัดว่าในโครงการจริงคุณยังต้องทำการตรวจสอบจำนวนมากเช่นชื่อผู้ใช้และอีเมลไม่อนุญาตให้ทำซ้ำและที่อยู่อีเมลต้องปฏิบัติตามกฎรูปแบบบางอย่าง แต่ตอนนี้เราไม่สนใจสิ่งเหล่านี้ คุณจะเห็นว่าเมื่อฐานข้อมูลการแทรกเสร็จสิ้นเราปล่อยให้ผู้ใช้กระโดดกลับไปที่หน้า Userlist ซึ่งพวกเขาควรเห็นข้อมูลที่แทรกใหม่
นี่เป็นวิธีที่ดีที่สุดหรือไม่?
ขั้นตอนที่ 3 เชื่อมต่อกับฐานข้อมูลและเขียนข้อมูล
ตรวจสอบให้แน่ใจว่า Mongod ของคุณกำลังทำงานอยู่! จากนั้นรีสตาร์ทเซิร์ฟเวอร์โหนดของคุณ เปิด http: // localhost: 3000/newuser ด้วยเบราว์เซอร์ของคุณ ตอนนี้เรากรอกเนื้อหาบางส่วนและคลิกปุ่มส่ง หากเป็นไปด้วยดีเราควรกลับไปที่หน้าผู้ใช้และดูข้อมูลใหม่ที่เราเพิ่งเพิ่ม
ตอนนี้เราได้อ่านและเขียนลงในฐานข้อมูล MongoDB อย่างเป็นทางการโดยใช้ Node.js, Exress และ EJS เราเป็นโปรแกรมเมอร์ของ NIU X
ขอแสดงความยินดีจริงๆ หากคุณจบการสอนนี้อย่างจริงจังและจริงจังกับการเรียนรู้มากกว่าเพียงแค่คัดลอกรหัสคุณควรมีแนวคิดที่สมบูรณ์เกี่ยวกับเส้นทางมุมมองการอ่านข้อมูลและการเขียนข้อมูล นี่คือความรู้ทั้งหมดที่คุณต้องใช้เพื่อพัฒนาเว็บไซต์ที่สมบูรณ์อื่น ๆ ! ไม่ว่าคุณจะคิดอย่างไรฉันคิดว่ามันเจ๋งจริงๆ
ตอนที่ 5 ขั้นตอนต่อไป
ตอนนี้เริ่มต้นคุณมีความเป็นไปได้ไม่ จำกัด คุณสามารถดูที่ Mongoose ซึ่งเป็นแพ็คเกจโหนดอื่นที่จัดการกับฐานข้อมูล MongoDB มันใหญ่กว่าพระไปเล็กน้อยและมีคุณสมบัติมากขึ้น นอกจากนี้คุณยังสามารถดูสไตลัสซึ่งเป็นเอ็นจิ้น CSS ด่วน คุณสามารถสอน Google Express Mongo และดูว่ามีอะไรต่อไป ศึกษาอย่างหนักและปรับปรุงทุกวัน
ฉันหวังว่าการสอนนี้จะช่วยได้ฉันเขียนสิ่งนี้เพราะเมื่อฉันเริ่มเรียนรู้ฉันต้องการอะไรแบบนี้ แต่ฉันหาไม่พบ ถ้าคุณเคยเห็นที่นี่ขอบคุณมาก!