تم تغيير هذه المقالة من دليل "الترجمة] للبدء في Feiyu للمطورين في الواجهة الأمامية ، و Building Node.js ، و Express ، و Jade ، و MongoDB Server من نقطة الصفر. والسبب في استبدال Jade مع EJS هو أنني أعتقد أن EJS يتماشى أكثر ، وذلك تمامًا ، حيث تم تحديد المباراة.
الجزء 1 التثبيت في 15 دقيقة
إذا تعلمت حقًا من نقطة الصفر ، خذ بعض الوقت لبناء البيئة أولاً. ليس الأمر صعبًا ، فأنا أستخدم Win8 ، لذلك يبدو هذا مختلفًا بعض الشيء عن تلك البرامج التعليمية التي تستخدم Mac و Ubuntu أو غيرها من أنظمة *Nix ، ولكنها متشابهة تقريبًا.
الخطوة 1 تثبيت node.js
من السهل الانتقال إلى موقع Node.js الرسمي والنقر على زر التثبيت الأخضر الكبير ، والذي سيكتشف نظامك تلقائيًا ويعطيك تنزيلًا لملف التثبيت الصحيح. (إذا لم يكن الأمر كذلك ، انقر فوق زر التنزيل لتحديد التنزيل الذي تحتاجه). قم بتشغيل المثبت ، وهذا جيد. لقد قمت بتثبيت Node.js و NPM (Manager Node Package) لتثبيت العديد من الحزم المفيدة بسهولة في العقدة.
الخطوة 2 تثبيت Express
الآن وبعد أن سمحنا للعقدة ، نحتاج إلى شيء آخر للسماح لنا بإنشاء موقع متاح بالفعل. بعد ذلك ، نحتاج إلى تثبيت Express ، وهو إطار يحول العقدة من تطبيق أصلي إلى خادم ويب أكثر تشابهًا نستخدمه عادة. نحتاج إلى البدء بـ Express لأننا بحاجة إلى وظيفة السقالات التي توفرها. دعنا ندخل هذا الأمر:
نسخة الكود كما يلي:
C:/Node> NPM Install -G Express
وبهذه الطريقة ، يتم تثبيت Express بشكل صحيح في عقدة لدينا وتم تعيينه على متوفر عالميًا. سترى مجموعة من الإخراج في نافذة سطر الأوامر ، ومعظمها HTTP 304 والحصول على الطلبات ، وهو أمر طبيعي. يجب تثبيت Express ومتاح.
الخطوة 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/Routes
إنشاء: nodetest1/routes/index.js
إنشاء: nodetest1/Routes/user.js
إنشاء: nodetest1/وجهات النظر
إنشاء: nodetest1/views/index.ejs
إنشاء: nodetest1/عام/صور
إنشاء: nodetest1/public/javaScripts
إنشاء: nodetest1/عام
إنشاء: nodetest1/public/styleshine
إنشاء: nodetest1/public/styleshine/style.css
تثبيت التبعيات:
$ cd nodetest1 && npm تثبيت
قم بتشغيل التطبيق:
تطبيق العقدة $
الخطوة 4 تحرير التبعيات
حسنًا ، لدينا الآن بعض هياكل المشروع الأساسية ، لكنها لم تنته بعد. ستلاحظ أن عملية تثبيت Express تنشئ ملفًا يسمى package.json في دليل Nodetest1 الخاص بك. افتح الملف مع محرر نص. يجب أن تبدو هكذا.
نسخة الكود كما يلي:
{
"الاسم": "اسم التطبيق" ،
"الإصدار": "0.0.1" ،
"خاص": صحيح ،
"البرامج النصية": {
"ابدأ": "عقدة app.js"
} ،
"التبعيات": {
"Express": "3.4.8" ،
"EJS": "*"
}
}
هذا ملف تنسيق JSON قياسي يشير إلى تطبيقنا وتبعياته. نحن بحاجة إلى إضافة شيء ما. على سبيل المثال ، مكالمات إلى Mongodb و Monk. قم بتغيير جزء التبعيات إلى هذا:
نسخة الكود كما يلي:
"التبعيات": {
"Express": "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 ، ويجب أن تكون قادرًا على رؤية صفحة ترحيب في Express.
لقد بدأت الآن في تشغيل خادم الويب الخاص بـ Node JS مع Express Engine ومحرك قالب EJS HTML. ليس من الصعب جدا ، أليس كذلك؟
الجزء 2 هنا ، دعنا نكتب "مرحبًا ، عالم!"
افتح محرر النصوص الشائع أو غيره من IDE ، أنا شخصياً أحب استخدام النص السامي. افتح app.js في دليل nodetest1 الخاص بك ، وهذا الملف هو جوهر التطبيق الخاص بك. يجب أن ترى شيئًا كهذا:
نسخة الكود كما يلي:
var express = require ('Express') ؛
VAR ROUTES = require ('./ ROUTES') ؛
var user = required ('./ routes/user') ؛
var http = require ('http') ؛
var path = required ('path') ؛
يحدد هذا فقط مجموعة من متغيرات JavaScript ويشير إلى بعض الحزم والتبعيات ، ووظائف العقدة ، والطرق. الطرق تعادل مجموعة من النماذج ووحدات التحكم في MVC. وهي مسؤولة عن إعادة توجيه الطلبات ويحتوي أيضًا على بعض منطق المعالجة. قامت Express بإنشاء كل هذه الأشياء بالنسبة لنا ، ونتجاهل الآن مسار المستخدم ونبدأ في كتابة المسار الأعلى (التي يتم التحكم فيها بواسطة Routes/Index.js).
في نهاية الملف أعلاه:
نسخة الكود كما يلي:
var app = express () ؛
هذه الجملة أمر بالغ الأهمية. إنه يعاني من أنشئه ويقوم بتعيين قيمة لمتغير التطبيق الخاص بنا. يحتاج المحتوى التالي إلى استخدام هذا المتغير لتكوين مجموعة من المعلمات السريعة. استمر في الدخول:
نسخة الكود كما يلي:
// جميع البيئات
App.Set ('Port' ، Process.env.port || 3000) ؛
App.set ('Views' ، path.join (__ dirname ، 'Views')) ؛
App.set ('View Engine' ، '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 ، 'public')))) ؛
هنا أنشأنا المنفذ ، ونبحث عن دليل المشاهدات ، وما هو محرك القالب الذي يجب استخدامه للتعامل مع هذه المشاهدات ، وبعض الأشياء الأخرى. انتبه أيضًا إلى السطر الأخير ، الذي يخبر 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 ('/' ، routes.index) ؛
app.get ('/user' ، user.list) ؛
سيخبر هذا المسار الذي يتم استخدامه عند وصول طلب URI. لاحظ أن متغير المستخدم محدد مسبقًا وتم تعيينه إلى /outes/user.js. سوف نسمي وظيفة القائمة المحددة في هذا الملف. يمكن عرض قائمة المستخدمين هنا.
استمر في الزيادة:
نسخة الكود كما يلي:
http.createserver (app) .Listen (app.get ('port') ، function () {
console.log ('Express Server الاستماع على المنفذ' + app.get ('port')) ؛
}) ؛
أخيرًا ، قم بإنشاء خادم HTTP وابدأه. هذا عن ذلك.
(المحتوى أعلاه يكتمل في القالب الذي تم إنشاؤه بواسطة Express الجديد ولا يلزم كتابته فيه)
الآن ، دعنا نكتب شيئًا مفيدًا. لن نكتب "مرحبا العالم!" مباشرة على صفحة الفهرس لدينا. سنغتنم هذه الفرصة لمعرفة كيفية استخدام توجيه المسار ونتعلم كيف يعمل محرك EJS. إضافة سطر بعد الفقرة app.get () من ملف app.js أعلاه:
app.get ('/helloworld' ، routes.helloworld) ؛
إذا قمت بالضغط على Ctrl+C في نافذة سطر الأوامر لإنهاء عملية App.js وإعادة تشغيلها ، ثم استخدم المتصفح للوصول إلى http: // localhost: 3000/helloWorld ، ستحصل على خطأ عقدة مثير ومجموعة من مطالبات التحطم في نافذة سطر الأوامر. هذا لأننا لم نقم بتعديل الطريق لمعالجة هذا المسار. تعال وافعل هذا. في المحرر الخاص بك ، انتقل إلى دليل الطرق ، ابحث عن index.js ، وفتحه. يجب أن يبدو هكذا:
نسخة الكود كما يلي:
/*
* احصل على الصفحة الرئيسية.
*/
orports.index = function (req ، res) {
Res.Render ('index' ، {title: 'express'}) ؛
} ؛
دعنا نضيف صفحة جديدة. أفضل إنشاء ملف مسار مستقل لكل دليل من المستوى الأول ، لكننا الآن لا نخطط لإنشاء بنية دليل كاملة لـ HelloWorld بموجب طرق العرض ، لذلك نستخدم طرق الفهرس في الوقت الحالي. أضف في نهاية هذا الملف:
نسخة الكود كما يلي:
orports.helloworld = function (req ، res) {
Res.Render ('HelloWorld' ، {title: 'hello ، world!'}) ؛
} ؛
سيكون مسؤولاً عن التعامل مع طلب URI هذا ، لكن الآن ليس لدينا صفحة فعلية لجعل Res.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. انقر على رابط التنزيل في القائمة الرئيسية للعثور على الإصدار الذي يناسبك. لـ 64 بت Win8 ، قم بتنزيل الإصدار 64 بت *2008R2+. بعد التنزيل ، إنه ملف مضغوط ، وهو غير مضغوط إلى C:/Mongo ، C:/Program Files/Mongo أو أي شيء آخر. هذا لا يهم. نقوم بحفظ البيانات في دليل nodetest1 الخاص بنا.
الخطوة 2 Run Mongod و Mongo
قم بإنشاء بيانات دليل فرعي في دليل Nodetest1 الخاص بنا ، ثم أدخل دليل BIN لدليل MongoDB الخاص بك في نافذة سطر الأوامر ، وأدخل:
نسخة الكود كما يلي:
Mongod DBPath C:/Node/Nodetest1/Data
سترى أن خادم Mongo قد تم تشغيله ، وأن أول بدء التشغيل يستغرق بعض الوقت ، لأنه يتطلب تخصيص بعض المساحات القرص الثابت وبعض المهام الأخرى. عندما يطالب "[initandlisten] في انتظار الاتصالات على المنفذ 27017" ، يتم ذلك. لا يوجد شيء آخر ، الخادم يعمل بالفعل. تحتاج الآن إلى فتح نافذة سطر أوامر آخر ، وإدخال دليل الحاوية في دليل Mongo ، وإدخال
نسخة الكود كما يلي:
مونغو
سترى بعض النصائح مثل هذا:
نسخة الكود كما يلي:
C:/mongo> mongo
نسخة مونجودب قذيفة: 2.4.5
الاتصال بـ: اختبار
في هذا الوقت ، إذا نظرت إلى نافذة Mongod ، فسترى مطالبة بأن الاتصال قد تم توصيله. بعد ذلك ، سنستخدم عميل سطر الأوامر هذا لمعالجة قاعدة البيانات الخاصة بنا يدويًا ، ولكن هذا ليس ضروريًا لموقعنا على الويب.
الخطوة 3 إنشاء قاعدة بيانات
لا تقلق بشأن المطالبة أعلاه للاتصال للاختبار. هذه مجرد قاعدة بيانات تتعرض لافتراضات Mongo عندما لا تحدد قاعدة بيانات ، ولن تنشئ حتى قاعدة البيانات هذه تسمى Test إلا إذا قمت بإضافة سجل إليها. دعنا ننشئ قاعدة البيانات الخاصة بنا. في نافذة سطر الأوامر في مونغو ، أدخل:
نسخة الكود كما يلي:
استخدم nodetest1
لن ينشئ قاعدة البيانات هذه إلا إذا قمنا بإدخال بعض البيانات فيها.
الخطوة 4 أضف بعض البيانات
ميزة MongoDB المفضلة لدي هي أنها تستخدم JSON كهيكل بيانات ، مما يعني أنني على دراية بها. إذا لم تكن على دراية بـ JSON ، فاقرأ بعض المواد ذات الصلة أولاً ، والتي تتجاوز نطاق هذا البرنامج التعليمي.
نضيف بعض البيانات إلى المجموعة. في هذا البرنامج التعليمي ، ليس لدينا سوى قاعدة بيانات بسيطة وحالي: اسم المستخدم والبريد الإلكتروني. تبدو بياناتنا هكذا:
نسخة الكود كما يلي:
{
"_id": 1234 ،
"اسم المستخدم": "cwbuecheler" ،
"البريد الإلكتروني": "[email protected]"
}
يمكنك إنشاء قيمتك الخاصة للحقل _id ، لكنني أعتقد أنه من الأفضل السماح لمونغو بذلك. يخلق قيمة فريدة لكل سجل. دعونا نرى كيف يعمل. في نافذة Mongo ، أدخل:
نسخة الكود كما يلي:
db.usercollection.insert ({"username": "testuser1" ، "البريد الإلكتروني": "[email protected]"})
نصيحة مهمة: DB هي قاعدة بيانات nodetest1 التي أنشأتها أعلاه ، و userCollection هي مجموعتنا ، والتي تعادل جدول البيانات. لاحظ أننا لا نحتاج إلى إنشاء هذه المجموعة مسبقًا ، سيتم إنشاؤها تلقائيًا عند استخدامها لأول مرة. حسنًا ، اضغط على Enter. إذا سارت الأمور على ما يرام ، فسترى ... لا شيء. هذا ليس جيدًا جدًا ، أدخل:
نسخة الكود كما يلي:
db.usercollection.find (). جميلة ()
إذا كنت فضوليًا ، فستقوم الطريقة الجميلة بتنسيق محتوى الإخراج وإضافة المسافة البادئة للسطر الجديد. يجب أن يعرض:
نسخة الكود كما يلي:
{
"_id": ObjectID ("5202B481D2184D390CBF6ECA") ،
"اسم المستخدم": "Testuser1" ،
"البريد الإلكتروني": "[email protected]"
}
بالطبع ، يجب أن يكون الكائن الذي تحصل عليه مختلفًا ، وسيقوم Mongo بإنشاء واحدة تلقائيًا. إذا كنت قد استخدمت خدمات واجهة JSON من قبل ، فهل تعتقد ، واو ، يجب أن يكون الاتصال بهذا في الويب بسيطًا للغاية! حسنًا ، أنت على حق.
نصيحة: كخدمة رسمية ، يجب ألا ترغب في أن تكون جميع البيانات في المستوى الأعلى. فيما يتعلق بتصميم بنية بيانات MongoDB ، ألق نظرة على Google.
الآن بعد أن أصبح لدينا جزء من البيانات ، دعنا نضيف المزيد من النقاط. يدخل:
نسخة الكود كما يلي:
newsstuff = [{"username": "testuser2" ، "البريد الإلكتروني": "[email protected]"} ، {"username": "testuser3" ، "البريد الإلكتروني":
db.usercollection.insert (Newstuff) ؛
لاحظ أننا نمرر أجزاء متعددة من البيانات إلى المجموعة مرة واحدة من خلال بيانات واحدة. كم هو بسيط! ثم استخدم الأمر Find أعلاه وسترى هذه الأجزاء الثلاثة من البيانات.
الآن دعنا ندمج خادم الويب وقاعدة البيانات المصممة من قبل.
الخطوة 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 = require ('Express') ؛
VAR ROUTES = require ('./ ROUTES') ؛
var user = required ('./ routes/user') ؛
var http = require ('http') ؛
var path = required ('path') ؛
أضف أدناه:
نسخة الكود كما يلي:
// رمز جديد
var mongo = مطلوب ('mongodb') ؛
var monk = require ('monk') ؛
var db = monk ('localhost: 27017/nodetest1') ؛
ستخبر هذه الخطوط التطبيق أننا بحاجة إلى الاتصال بـ MongoDB. نستخدم Monk لتكون مسؤولاً عن هذا الاتصال. موقع قاعدة البيانات لدينا هو مضيف محلي: 27017/nodetest1. لاحظ أن 27017 هو منفذ MongoDB الافتراضي. إذا قمت بتعديل المنفذ لسبب ما ، فيجب عليك أيضًا تغيير السجل هنا. انظر الآن إلى أسفل الملف:
نسخة الكود كما يلي:
app.get ('/' ، routes.index) ؛
app.get ('/user' ، user.list) ؛
app.get ('/helloworld' ، routes.helloworld) ؛
أضف سطرًا أدناه:
نسخة الكود كما يلي:
app.get ('/userlist' ، routes.userlist (db)) ؛
يخبر هذا السطر التطبيق أنه عندما يصل المستخدم إلى مسار /userlist ، نحتاج إلى تمرير متغير DB إلى مسار قائمة المستخدمين. لكن ليس لدينا مسار قائمة مستخدم حتى الآن ، لذلك دعونا ننشئ واحدة الآن.
الخطوة 6 اقرأ البيانات في Mongo وعرضها
استخدم المحرر الخاص بك لفتح C: /Node/NODETEST1/ROUTES/IDNEX.JS ، الذي يحتوي على طريقين: الفهرس و Hello World. الآن دعنا نضيف الثالث:
نسخة الكود كما يلي:
orports.userList = function (db) {
وظيفة الإرجاع (REQ ، الدقة) {
مجموعة var = db.get ('UserCollection') ؛
collection.find ({} ، {} ، function (e ، docs) {
Res.Render ('userlist' ، {
"قائمة المستخدم": مستندات
}) ؛
}) ؛
} ؛
} ؛
حسنًا ، تصبح الأمور معقدة بعض الشيء. هنا نحدد الوظيفة أولاً ، وتلقي متغير DB الذي نمرره ، ثم ندعو إلى تقديم صفحة هو نفسه الطريقان السابقان. نخبرنا أننا بحاجة إلى قراءة UserCollection ، وإجراء البحث ، ويتم حفظ البيانات التي تم إرجاعها في متغير المستندات. بمجرد قراءة المحتوى ، ندعو إلى تقديم صفحة قالب قائمة المستخدمين ونمر بتمرير متغير المستندات الذي تم الحصول عليه كمتغير قائمة المستخدمين في محرك القالب.
بعد ذلك ، قم بإنشاء قالب EJS الخاص بنا. افتح index.ejs في دليل المشاهدات ، حفظ كـ userlist.ejs ، وقم بتعديل HTML إلى هذا:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<title> userlist </title>
<Link Rel = 'Stylesheet' Href = '/STYLESHEETS/Style.CSS'/>
</head>
<body>
<h1> قائمة المستخدم </h1>
<ul>
<٪
لـ (var i في قائمة المستخدمين) {
٪>
<li> <a href = "mailto: <٪ = userlist [i] .email ٪>"> <٪ = userlist [i] .username ٪> </a> </li>
<٪} ٪>
</ul>
</body>
</html>
احفظ الملف وأعد تشغيل خادم العقدة. آمل أن لا تزال تتذكر كيفية إعادة التشغيل. افتح المتصفح وقم بزيارة http: // localhost: 3000/قائمة المستخدمين ، ويجب أن ترى واجهة مثل هذه:
انقر فوق الزر "إرسال" وسترى خطأ "لا يمكن نشره إلى /adduser". دعونا نصلحه.
الخطوة 2 قم بإنشاء وظيفة معالجة قاعدة البيانات الخاصة بك
كما كان من قبل ، نقوم بتعديل app.js ، ثم توجيه الملف ، ثم قالب EJS. ومع ذلك ، ليست هناك حاجة لقالب EJS هنا ، لأننا سنقفز إلى النشر لاحقًا. أضف سطرًا بعد فقرة App.get () من App.js:
نسخة الكود كما يلي:
app.post ('/adduser' ، routes.adduser (db)) ؛
لاحظ أن هذا هو app.post ، وليس app.get. دعنا نضع المسار. ارجع إلى الطرق/index.js وإنشاء وظيفة إدراج قاعدة البيانات الخاصة بنا. هذا كبير جدًا ، لذلك أقترح عليك كتابة تعليق جيد.
نسخة الكود كما يلي:
orports.adduser = function (db) {
وظيفة الإرجاع (REQ ، الدقة) {
// احصل على قيم النموذج لدينا. تعتمد هذه على سمات "الاسم"
var username = req.body.username ؛
var useremail = req.body.useremail ؛
// اضبط مجموعتنا
مجموعة var = db.get ('UserCollection') ؛
// إرسال إلى DB
collection.insert ({
"اسم المستخدم": اسم المستخدم ،
"البريد الإلكتروني": useremail
} ، وظيفة (err ، doc) {
إذا (خطأ) {
// إذا فشلت ، فأرجع خطأ
Res.Send ("كانت هناك مشكلة في إضافة المعلومات إلى قاعدة البيانات.") ؛
}
آخر {
// إذا نجحت ، فقم بتعيين الرأس بحيث لا يزال شريط العناوين يقول /adduser
Res.Location ("قائمة المستخدم") ؛
// وإعادة توجيه صفحة النجاح
Res.Redirect ("قائمة المستخدم") ؛
}
}) ؛
}
}
من الواضح ، في المشاريع الحقيقية ، لا تزال بحاجة إلى القيام بالكثير من التحقق ، مثل اسم المستخدم والبريد الإلكتروني لا يسمحون بالتكرار ، ويجب أن يتوافق عنوان البريد الإلكتروني لقواعد تنسيق معينة. ولكن الآن دعونا لا نهتم بهذه الأشياء. يمكنك أن ترى أنه عند الانتهاء من قاعدة بيانات الإدراج ، ندع المستخدم يقفز إلى صفحة قائمة المستخدم حيث يجب أن يروا البيانات التي تم إدراجها حديثًا.
هل هذه هي أفضل طريقة؟
الخطوة 3 الاتصال بقاعدة البيانات واكتب البيانات
تأكد من تشغيل mongod الخاص بك! ثم أعد تشغيل خادم العقدة الخاص بك. افتح http: // localhost: 3000/newUser مع متصفحك. الآن نملأ بعض المحتوى ونقر فوق الزر "إرسال". إذا سارت الأمور على ما يرام ، فيجب أن نعود إلى صفحة قائمة المستخدمين ونرى البيانات الجديدة التي أضفناها للتو.
الآن لقد أكملنا رسميًا القراءة والكتابة إلى قاعدة بيانات MongoDB باستخدام Node.js و Exress و EJS. نحن بالفعل مبرمج لـ NIU X.
مبروك ، حقا. إذا كنت قد انتهيت من هذا البرنامج التعليمي على محمل الجد وكنت جادًا للغاية في التعلم بدلاً من نسخ الكود ، فيجب أن يكون لديك مفهوم كامل للطرق ومشاهير وقراءة البيانات وكتابة البيانات. فيما يلي كل المعرفة التي تحتاجها إلى استخدام أي موقع ويب كامل آخر! بغض النظر عن رأيك ، أعتقد أن هذا رائع حقًا.
الجزء 5 الخطوة التالية
ابدأ الآن ، لديك إمكانيات غير محدودة. يمكنك إلقاء نظرة على Mongoose ، حزمة عقدة أخرى تعالج قواعد بيانات MongoDB. إنه أكبر قليلاً من Monk ولديه المزيد من الميزات. يمكنك أيضًا إلقاء نظرة على Stylus ، محرك CSS Express. يمكنك Google Node Express Mongo التعليمي ومعرفة ما هو التالي. دراسة بجد وتحسين كل يوم.
آمل أن يساعد هذا البرنامج التعليمي ، لقد كتبت هذا لأنني عندما بدأت أتعلم ، كنت بحاجة حقًا إلى شيء من هذا القبيل ، لكنني لم أتمكن من العثور عليه حقًا. إذا كنت قد رأيتها هنا ، شكرًا جزيلاً لك!