javascript - شرح - express vpn




Express.js عرض "globals" (5)

Express 4

يمكنك الوصول إلى المتغيرات المحلية في القوالب المقدمة داخل التطبيق.

لذا ، إذا كنت ترغب في استخدام أي من السكان المحليين في القالب الخاص بك => بافتراض أن لديك npm محرك القالب مثبتًا على تطبيق العقدة / التطبيق السريع.

أولاً ، تحتاج إلى تعيين كائنات السكان المحليين التي تعبر عن المتغيرات المخصصة في ملف app.js ، يمكنك استخدام كائن إذا كانت هناك حاجة لقيم متعددة (حالتنا في هذه المشاركة)

 /**
  *  Set locals object
  */

 app.locals.layoutData = { 
  site: {
      title: 'MyWebSiteTitle',
  },   
  metaTag: {
      charset: 'UTF-8',
      description: 'MyDescription',
      keywords: 'keyword-1,keyword-2,...',
      author: 'MyName',
      viewport: 'width=device-width, initial-scale=1.0'
  }
 };

ثم ، للوصول إلى القيم الموجودة في ملف القالب layout.pug (في حالة محرك قالب PUG على سبيل المثال)

doctype html
html
  head
    //title
    title #{locals.layoutData.site.title}
    //Describe metadata
    meta(charset=layoutData.metaTag.charset)
    meta(name='description', content=locals.layoutData.metaTag.description)
    meta(name='keywords', content=locals.layoutData.metaTag.keywords)
    meta(name='author', content=locals.layoutData.metaTag.author)
    meta(name='viewport', content=locals.layoutData.metaTag.viewport)
  body
      block content
      br
      hr
      footer
        p All rights reserved © 2018 |  #{locals.layoutData.site.title}

اختبار مع

  "dependencies": {
    "express": "^4.16.3",
    "pug": "^2.0.3"
  }

أنا أستخدم Express.js (على Node.js) وأعرف أنه يمكنك عرض طريقة عرض مع البيانات المخصصة عبر المعلمة "locals". ( res.render("template", { locals: { foo: "bar" } }); )

هل هناك أي طريقة للحصول على "globals"؟ (أي البيانات التي يمكن الوصول إليها لكل مشاهدة)

شاهدت view options ، ولكنها ليست متكررة ، لذلك فهي تحل محل السكان المحليين الذين قمت بتعيينهم إذا كنت أستخدم أي من السكان المحليين مع القالب الخاص بي.

هذه حالة استخدامي: أريد أن أجعله بحيث يمكن إضافة ملفات CSS / JS على أساس كل صفحة ، وهذا جزء من التنسيق الرئيسي. المشكلة ، إذا لم أقم بتعيين هذه المصفوفات صراحةً على كل عرض ، فأنا أحصل على خطأ غير معروف ، لذلك في القالب الخاص بي ، يجب أن أقوم دائمًا بالرقص typeof css !== "undefined" . بالإضافة إلى ذلك ، لدي قوائم اختيارات أخرى في مربع الاختيار لا أريد إضافتها بشكل صريح إلى كل من نماذجي.


إن أبسط طريقة لتحقيق ذلك هي إنشاء متغير يمثل المجموعة الافتراضية من السكان المحليين لطرق العرض الخاصة بك. ثم قم بإنشاء دالة تقبل كائنًا ، ودمجها مع السكان المحليين ، وتقوم بإرجاع الكائن المدمج.

أقوم أيضًا بتمرير جميع السكان المحليين داخل كائن حاوية ، أي {locals:{g:{prop:val}}} لذلك في طريقة العرض الخاصة بي يمكنني g.prop الذي سيعود فقط عندما لا يتم تعيينه ، بدلاً من إلقاء خطأ غير معروف.

function default_page_vars(custom_vars){
    var vars = {
        footer: true,
        host: req.headers.host.split(':')[0],
        config: this.config
    };

    if(custom_vars){
        for(var k in custom_vars){
            vars[k] = custom_vars[k];
        }
    }
    return {
        g:vars
    };
}

//within your handler
response.render(view, {
    locals: default_page_vars(other_locals)
});

مثال حقيقي لاستخدام خيارات العرض كما ذكر المؤلف:

var app = express.createServer();

app.configure(function() {
  app.set('views', path.join(__dirname, '..', 'views'));
  app.set('view engine', 'jade');
  app.set('view options', {
    assetVersion: 1
  });

ثم في my layout.jade (قالب أساسي للتطبيق في حالتي):

link(rel='stylesheet', href='/static/css/' + assetVersion + '/style.css')
script(src='/static/js/' + assetVersion + '/script.js')

مع هذه الحيلة الصغيرة ، لا بد لي من تحديث متغير assetVersion واحد فقط للتأكد من أن الأصول الخاصة بي لا يتم تخزينها مؤقتًا في الورنيش أو أماكن أخرى.


من الجدير بالذكر لأولئك الذين ربما صادفوا هذا السؤال منذ إصدار Express 3 ، أن 'dynamicHelpers' الطريقة لم تعد موجودة.

بدلا من ذلك يمكنك استخدام وظيفة app.locals ، والتي تعمل ككائن يمكنك تخزين القيم أو وظائف في ، ثم يجعلها متاحة لآراء. فمثلا:-

// In your app.js etc.
app.locals.title = "My App";
app.locals({
    version: 3,
    somefunction: function() {
        return "function result";
    }
});

// Then in your templates (shown here using a jade template)

=title
=version
=somefunction()  

// Will output

My App
3
function result

إذا كنت بحاجة إلى الوصول إلى كائن الطلب لسحب المعلومات منه ، فيمكنك كتابة وظيفة بسيطة في الوسط واستخدام متغير app.settings.

على سبيل المثال ، إذا كنت تستخدم اتصالًا فائقًا لتوفير رسائل للمستخدمين ، فقد تفعل شيئًا كالتالي:

app.use(function(req, res, next) {
    app.set('error', req.flash('error'));
    next();
});

مما يمنحك الوصول إلى رسالة الخطأ باستخدام = settings.error في القالب الخاص بك.

تتم تغطية هذه المواضيع هنا ، ولو لفترة وجيزة قليلاً: http://expressjs.com/api.html#app.locals

تحديث: Express 4

app.locals الآن كائن جافا سكريبت بسيطًا ، لذلك يجب تعيين كل خاصية واحدة تلو الأخرى.

app.locals.version = 3;
app.locals.somefunction = function() {
    return "function result";
}

توفر res.locals الوظيفة نفسها تمامًا ، باستثناء أنه يجب استخدامها للبيانات الخاصة بالطلب بدلاً من البيانات على مستوى التطبيق. كائن المستخدم أو الإعدادات هي حالة استخدام شائعة.

res.locals.user = req.isAuthenticated() ? req.user : null;
res.locals.userSettings = {
    backgroundColor: 'fff'
}

هناك طريقة للحصول على متغيرات "عامة" لطرق العرض ، وذلك باستخدام مساهمات طريقة العرض الديناميكية.

من دليل Express.js:

app.dynamicHelpers (الكائنات)

يسجل مساعدين عرض ديناميكي. تعتبر أدوات العرض الديناميكية عبارة عن دالات ببساطة تقبل req و res ويتم تقييمها مقابل مثيل الخادم قبل عرض العرض. تصبح قيمة الإرجاع لهذه الدالة هي المتغير المحلي المرتبط به.

app.dynamicHelpers ({session: function (req، res) {return req.session؛}})؛

ستتاح الآن لجميع جلسات العرض جلسة حتى يمكن الوصول إلى بيانات الجلسة عبر session.name etc:

يمكنك العثور على مثال حقيقي حول كيفية استخدامها هنا: https://github.com/alessioalex/Nodetuts/tree/master/express_samples (عقدة app.js لبدء التطبيق)





express