كلما زاد تعقيد التطبيق ، زادت احتياجاته أيضًا. في مرحلة ما ، قد يؤدي عرض ملفات HTML الثابتة إلى إعاقة التقدم أو إعاقة وظائف التطبيق. بدلاً من ذلك ، سترغب في تقديم محتوى ديناميكي ، وهي مهمة تتيحها محركات النماذج مثل المقاود.
المقود هو محرك نموذجي بسيط وبدون منطق لـ NodeJS. إنه امتداد لمحرك نموذج الشارب. نظرًا لأنه محرك بدون منطق ، يمكنك استخدامه لفصل العرض التقديمي تمامًا عن الكود الأساسي.
تتمتع المقودات بدعم كبير كمحرك قالب من إطار عمل NestJS.
ما هو محرك القوالب؟
محرك القوالب هو أداة تجمع بين علامات HTML ولغة برمجة لإنشاء قالب HTML مع الحد الأدنى من التعليمات البرمجية.
يقوم محرك القالب في وقت التشغيل بحقن البيانات في قالب HTML لتقديم العرض النهائي في المتصفح.
قد تجد صعوبة في إعداد محرك قوالب مثل المقود ، نظرًا لأنه يتضمن العديد من الخطوات. لكن، إطار عمل خادم Express الذي يستخدمه NestJS افتراضيًا لديه دعم ممتاز للمقاود.
الخطوة 1: إنشاء تطبيق NestJS
قم بتشغيل الأمر التالي لسقالة تطبيق Nest الجديد:
عش جديد <اسم التطبيق الخاص بك>
الخطوة الثانية: تثبيت المقاود
قم بتشغيل الأمر التالي لتثبيت المقود باستخدام مدير الحزم npm:
npm تثبيت المقاود السريع @ ^5.3.0types/express-handlebars@^5.3.0
الخطوة 3: تكوين Express Instance
انتقل إلى ملف main.ts ملف والاستيراد تطبيق NestExpressApplication من @ nestjs / platform-express.
قم بتعيين NestExpressApplication كنوع عام لملف خلق طريقة.
مثل ذلك:
مقدار ثابت التطبيق = انتظر NestFactory.create(AppModule)
تمرير تطبيق NestExpress إلى تطبيق كائن يمنحه الوصول إلى طرق ExpressJS الحصرية. ستحتاج إلى هذه الطرق لتهيئة خصائص محددة للمقود.
الخطوة 4: تكوين المقاود
أولاً ، ستحتاج إلى تحديد المواقع التي سيجد فيها تطبيقك HTML والملفات الثابتة الأخرى (أوراق الأنماط والصور وما إلى ذلك). يمكنك تخزين ملفات HTML الخاصة بك في "الآراءوالملفات الثابتة الأخرى الموجودة في "عام"، على التوالي.
لتحديد المواقع ، ابدأ بالاستيراد انضم من طريق. ثم ، داخل التمهيد وظيفة ، قم بتعيين موقع الأنماط.
مثل ذلك:
app.useStaticAssets (انضم (__dirname ، '..', 'عام'))
تأخذ وظيفة الانضمام عددًا عشوائيًا من سلسلة الحجج ، تربطهم ، وتطبيع المسار الناتج. __dirname يُرجع مسار المجلد حيث يكون ملف main.ts يتواجد الملف.
بعد ذلك ، قم بتعيين موقع ملفات HTML الخاصة بك ، مثل:
app.setBaseViewsDir (انضم (__dirname ، '..', 'الآراء'));
بعد ذلك ، قم باستيراد المقاود إلى ملف main.ts ملف:
يستورد * كما hbs من "المقاود السريع" ؛
سوف تحتاج إلى hbs استيراد لتكوين خصائص المقاود مثل اسم الامتداد ، إلخ.
اسم ملحق الملف الافتراضي للمقاود هو .handlebars.
اسم الامتداد هذا طويل ، ولكن يمكنك تكوينه بامتداد app.engine مكالمة. app.engine هي وظيفة غلاف أصلية حول ملف صريح طريقة. يتطلب حجتين: تحويلة ووظيفة رد الاتصال. انظر التعبير عن التوثيق على app.engine لمعرفة المزيد عنها.
مكالمة app.engine ()، وكوسيطة أولى ، قم بتمرير السلسلة النصية "hbs". ثم ، كوسيطة ثانية ، قم باستدعاء الدالة hbs وتمرير كائن تكوين بخاصية extname ضبط ل "hbs". يغير هذا الإعداد اسم الامتداد من .handlebars إلى .hbs.
app.engine ('hbs'، hbs ({extname: 'hbs' }));
أخيرًا ، اضبط محرك العرض على المقاود كما يلي:
app.setViewEngine ('hbs');
الخطوة 5: إنشاء مجلدات
في الدليل الجذر لمشروعك ، أنشئ مجلدين جديدين. ستستخدم الأول ، عام، لتخزين أوراق الأنماط للتطبيق الخاص بك. في الآراء، ستخزن جميع ملفات HTML الخاصة بك.
هذا يخلص إلى إنشاء بيئة التطوير الخاصة بك. في القسم التالي ، سوف تحصل على نظرة عامة حول بناء جملة Handlebars واستخدامها في تطبيق NestJS.
بنية المقاود
سيغطي هذا القسم الجزء الأكبر من بنية المقاود التي تحتاجها لخدمة ملفاتك ديناميكيًا.
مساعدين
المساعدون عبارة عن وظائف تقوم بتحويل المخرجات ، وتكرار البيانات ، وتقديم الإخراج الشرطي.
توفر المقود نوعين من المساعدين (الكتلة والمدمجة) ويمكنك إنشاء مساعدين مخصصين لتناسب احتياجاتك.
تدل على المساعد بلفه بأقواس مزدوجة متعرجة. بادئة اسمها بعلامة التجزئة (#) لعلامة مساعد الفتح وشرطة مائلة للأمام (/) لعلامة الإغلاق.
فمثلا:
{{!-- إذا القيمة حقيقي، سيتم عرض div آخر، لن -}}
{{#if قيمة}}
<شعبة>تم تقديم القيمة</div>
{{/إذا}}
إذا قمت بإنشاء مساعد مخصص ، فيجب عليك تسجيله في ملف hbs كائن التكوين في الخاص بك main.ts ملف قبل أن تتمكن من استخدامه في التطبيق الخاص بك.
// main.ts
يستورد {تعليمات مخصصة} من "./helpers/hbs.helpers" ؛
// داخل وظيفة التمهيد
app.engine ('hbs'، hbs ({extname: 'hbs'، المساعدون: {customHelper}}))؛
التعبيرات
التعبيرات هي وحدة قالب المقاود. يختلف استخدامك للتعبيرات تبعًا لمدى تعقيد المهمة. يمكنك استخدامها بمفردها في قالب ، وتمريرها كمدخلات إلى المساعدين ، والمزيد.
تشير إلى التعبيرات ذات الأقواس المزدوجة المتعرجة ، على سبيل المثال:
<h1>{{رسالة}}</h1>
جزئيات
يشير الجزء الجزئي إلى جزء من HTML تم حفظه مسبقًا لأنه يظهر عبر عدة ملفات HTML. على سبيل المثال ، navbars والتذييلات. يمكنك تخزين هذا المحتوى في ملف واحد وتضمينه عند الضرورة.
كما هو الحال مع الملفات الثابتة وملفات HTML ، سيتعين عليك أيضًا تعيين دليل الأجزاء في ملف app.engine كائن التكوين.
قم بتسجيل دليل الأجزاء عن طريق إضافة الكود التالي إلى كائن التكوين الخاص بك:
// main.ts
partsDir: انضم (__dirname، '..', 'وجهات النظر / الجزئيات'),
يمكنك الوصول إلى جزء باستخدام بناء جملة المكالمة الجزئية. في الأقواس المزدوجة المتعرجة ، أدخل رمز أكبر من (>) متبوعًا باسم الجزئي.
فمثلا:
{{> nameOfPartial}}
التخطيطات
تخطيط المقاود هو صفحة HTML تُستخدم لتعيين البيانات الوصفية الأساسية أو البنية العامة لصفحات HTML الأخرى في التطبيق. يعمل كحاوية مع عنصر نائب يمكنك إدخال بيانات ديناميكية فيه.
فمثلا:
<! DOCTYPE html>
<أتش تي أم أل لانج ="en">
<رأس>
<meta charset ="UTF-8">
<meta http-equiv ="متوافق مع X-UA" المحتوى ="IE = حافة">
<اسم التعريف ="منفذ العرض" المحتوى ="العرض = عرض الجهاز ، المقياس الأولي = 1.0">
<لقب>القوالب في NestJS مع المقاود</title>
</head>
<هيئة>
<رأس>
{{! - Navbar Partial -}}
{{>نافبار}}
</header>
<شعبة>
{{! - Body Placeholder -}}
{{{هيئة}}}
</div>
{{! - جزء التذييل -}}
{{>تذييل}}
</body>
</html>
عند تشغيل التعليمات البرمجية الخاصة بك ، تأخذ Handlebars محتويات ملف .hbs الملف الذي تريد عرضه ويحقنهم في ملف هيئة نائب. ثم يعرض النتيجة كصفحة HTML نهائية.
ستحتاج إلى تسجيل دليل التنسيقات في ملف app.engine كائن التكوين وتعيين ملف تخطيط افتراضي. ملف التخطيط الافتراضي هو ملف التخطيط الذي يستخدمه Handlebars إذا لم تحدد تخطيطًا معينًا.
أضف الكود التالي إلى كائن التكوين الخاص بك للإعلان عن تخطيط افتراضي وتسجيل دليل Layouts:
التخطيط الافتراضي: 'اسم ملف التخطيط',
LayoutsDir: انضم (__dirname ، '..', 'وجهات النظر / التخطيطات'),
تقديم ملف .hbs
في ملف وحدة التحكم ، قم باستيراد ملف الدقة مصمم من @ nestjs / مشترك و إجابة من التعبير.
ثم في معالج المسار الخاص بك ، قم بتمرير وسيطة ، الدقة. عيّن نوع الاستجابة للدقة وقم بتعليقه باستخدام مصمم الدقة. يكشف مصمم الديكور عن طرق التعامل مع الاستجابة الأصلية لـ Express ويعطل منهج NestJS القياسي.
بعد ذلك ، قم باستدعاء التابع render على res ومرر اسم الملف الذي تريد عرضه باعتباره الوسيطة الأولى. بالنسبة إلى الوسيطة الثانية ، قم بتمرير كائن يحتوي على اسم التخطيط والقيمة البديلة للتعبير.
ستستخدم المقاود التخطيط الافتراضي المحدد في ملف app.engine كائن التكوين إذا لم تقم بتوفير تخطيط.
@احصل على()
getHello(Res() الدقة: إجابة){
عودة res.render ('اسم الملف'، { نسق: 'اسم التخطيط'، رسالة: 'مرحبا بالعالم' });
}
بدائل المقاود
المقاود هي أداة قوالب ممتازة مع العديد من الميزات المفيدة مثل المساعدين والتخطيطات. ومع ذلك ، بناءً على احتياجاتك ، يمكنك اختيار بديل مثل EJS (Embedded JavaScript) أو Pug أو Moustache.
