كيف…

إنشاء موقع معرض الصور مع DADI

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

بالنسبة لهذا المشروع ، سأعمل في دليل واحد يسمى "معرض" مع دليل فرعي لكل من الخدمات ، التي ستقوم أداة DADI CLI بإنشائها بالنسبة لنا.

إذا لم تقم بتثبيت CLI ، فلنفعل ذلك أولاً:

$ npm install @ dadi / cli -g

سنقوم الآن بإنشاء دليل "المعرض" الذي سيحتوي على كل خدمة:

mkdir $ ~ / المشاريع / معرض
مؤتمر نزع السلاح ~ / المشاريع / معرض

1. DADI CDN

لنبدأ مع CDN.

أولاً ، سننشئ خدمة CDN جديدة باستخدام الأمر DADI CLI dadi cdn new :

dadi cdn new cdn

سيؤدي ذلك إلى تنزيل وتثبيت DADI CDN ، ثم يأخذك عبر معالج تفاعلي. سنقوم فقط بتشغيل خدمة CDN بسيطة قائمة على ملفات HTTP:

لنبدأ بتكوين خادم الويب الذي سيتم تشغيل DADI CDN عليه. (0٪ كاملة)
؟ ما هو اسم مثيل CDN هذا؟ دادي (CDN)
؟ ما البروتوكول الذي يجب تشغيل مثيل CDN عليه؟ HTTP (غير آمن)
؟ ما هو عنوان IP الذي يجب أن يعمل عليه التطبيق؟ 0.0.0.0
؟ ما هو رقم المنفذ الذي يجب أن يعمل عليه التطبيق؟ 8002
الوقت لتكوين المصادر التي سيستخدمها CDN لاسترداد الصور. (18 ٪ كاملة)
؟ هل ترغب في تحميل الصور من نظام الملفات المحلي؟ نعم
؟ ما هو المسار إلى دليل الصور؟ ./images
؟ هل ترغب في تحميل الصور من Amazon S3؟ لا
؟ هل ترغب في تحميل الصور من عنوان URL بعيد؟ لا
عظيم! دعونا الآن نحدد كيف تتعامل CDN مع الأصول الأخرى (مثل CSS أو JS أو الخطوط) (44٪ كاملة)
؟ هل ترغب في تحميل الأصول من نظام الملفات المحلي؟ لا
؟ هل ترغب في تحميل أصول من Amazon S3؟ لا
؟ هل ترغب في تحميل الأصول من عنوان URL بعيد؟ لا
دعنا الآن نلقي نظرة على التخزين المؤقت ، وهو أمر مهم لضمان أن يقدم CDN الصور والأصول بطريقة فعالة. (67 ٪ كاملة)
؟ ما هو الوقت المناسب للعيش (TTL) ، بالثواني ، للعناصر المخزنة مؤقتًا؟ 3600
؟ هل ترغب في تخزين عناصر ذاكرة التخزين المؤقت على نظام الملفات المحلي؟ نعم
؟ ما هو المسار إلى دليل ذاكرة التخزين المؤقت؟ ./مخبأ/
؟ هل ترغب في تخزين عناصر ذاكرة التخزين المؤقت على خادم Redis؟ لا
ممتاز. تحتاج أيضًا إلى تكوين بيانات الاعتماد للمستهلكين المصادق عليهم لاستخدامها عبر oAuth. (85 ٪ كاملة)
؟ ما هو المعرف الذي يجب على العملاء المصادق عليهم استخدامه؟ photogalleryUser
؟ ما السر الذي يجب على العملاء المصادق عليهم استخدامه؟ s3cr3tsqu1rr3l
؟ ما هو الوقت المناسب للعيش (TTL) ، بالثواني ، لرموز oAuth؟ 1800
اوشكت على الوصول! بضعة أسئلة أخرى حول تثبيت CDN الخاص بك. (92 ٪ كاملة)
؟ هل ترغب في تشغيل DADI CDN في وضع نظام المجموعة ، بدء تشغيل عامل لكل وحدة المعالجة المركزية الأساسية؟ لا
؟ ما البيئة التي ينطبق عليها هذا التكوين؟ تطوير
كله تمام!

رائع ، الآن دعنا نعد صورنا. قم بإنشاء دليل داخل دليل cdn وقم بتسميته بالصور. بعد ذلك ، سوف نلتقط بعض الصور لعيناتنا. مكان واحد رائع للحصول على هذه الصور هو Fujifilm الذي يوفر عينات من صور نماذج الكاميرا. قم بتنزيل الصور التالية في دليل الصور: sample-1.jpg، sample-2.jpg، sample-3.jpg، sample-4.jpg، sample-5.jpg.

من دليل cdn ، قم بتشغيل start npm ، ثم تحقق من أن الصور تعمل من خلال الانتقال إلى http: // localhost: 8002 / sample-1.jpg.

نحن الآن على استعداد للانتقال إلى واجهة برمجة التطبيقات.

2. دادي API

اترك دليل CDN ، واسترجع المستوى إلى دليل "المعرض". سنقوم بإنشاء خدمة API جديدة باستخدام أمر DADI CLI dadi api new :

$ cd ..
dadi api new api

في وقت كتابة هذا التقرير ، سيؤدي ذلك إلى تثبيت DADI API 2.x وبالتالي لن يكون هناك معالج تفاعلي. على الرغم من ذلك ، قريبًا ، مع تطبيق DADI API 3.0 ، سيتم نقلك إلى معالج الإعداد وستكون قادرًا على الاختيار من بين عدد من موصلات البيانات.

ملاحظة: API 2.x يتطلب نسخة MongoDB للعمل. إذا لم يكن لديك أحد هذه الإعدادات بالفعل ، فيمكنك بسهولة بدء تشغيل باستخدام Docker لاختبار:
عامل ميناء $ تشغيل -d -p 27017: 27017 mongo: 3.2

أول شيء سنفعله هو تحرير ملف التكوين ، config / config.development.json ، وتعديل إعدادات الخادم.

قم بتغيير المنفذ الموجود تحت الخادم و publicUrl إلى 8001. دعنا أيضًا نغير قيمة قاعدة البيانات من dadi-api إلى معرض الصور ضمن قاعدة بيانات وأقسام المصادقة. فيما يلي ملخص سريع للتغييرات:

"الخادم": {
    "الميناء": 8001
  }،
  "publicUrl": {
    "الميناء": 8001
  }،
  "قاعدة البيانات": {
    "قاعدة البيانات": "معرض الصور" ،
  }،
  "المصادقة": {
    "قاعدة البيانات": {
      "قاعدة البيانات": "معرض الصور"
    }
  }،

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

عملاء dadi api: إضافة
؟ ما هو معرف العميل؟ معرض الصور
؟ ما هو السر؟ s3cr3tsqu1rr3l
؟ ما نوع الوصول الذي يحتاجه المستخدم؟ المستعمل
client إنشاء عميل مع معرض الصور الفوتوغرافية ونوع المستخدم

بعد ذلك ، سننشئ بعض المجموعات في واجهة برمجة التطبيقات.

في دليل api / workspace / collections / 1.0 / ، احذف دليل مكتبة النماذج وقم بإنشاء دليل جديد يسمى المعرض ، وداخل ذلك ، قم بإنشاء ملف يسمى collection.albums.json بالمحتويات التالية:

{
  "مجالات": {
    "عنوان": {
      "النوع": "سلسلة" ،
      "تصنيف": "عنوان الألبوم" ،
      "مطلوب": صحيح
    }،
    "تاريخ النشر": {
      "النوع": "DateTime" ،
      "التصنيف": "تاريخ النشر" ،
      "مطلوب": صحيح
    }
  }،
  "الإعدادات": {
    "ذاكرة التخزين المؤقت": صحيح ،
    "المصادقة": صحيح ،
    "العد": 10 ،
    "فرز": "publishDate" ،
    "sortOrder": 1 ،
    "storeRevisions": false ،
    "فهرس": [
      {
        "مفاتيح": {
          "تاريخ النشر": 1
        }
      }
    ]
  }
}

الآن قم بإنشاء ملف collection.photos.json بالمحتوى التالي:

{
  "مجالات": {
    "ألبوم": {
      "النوع": "سلسلة" ،
      "التصنيف": "معرف ألبوم الصور" ،
      "مطلوب": صحيح
    }،
    "عنوان": {
      "النوع": "سلسلة" ،
      "التصنيف": "عنوان الصورة" ،
      "مطلوب": صحيح
    }،
    "اسم الملف": {
      "النوع": "سلسلة" ،
      "التسمية": "اسم ملف المورد" ،
      "مطلوب": صحيح
    }،
    "تاريخ النشر": {
      "النوع": "DateTime" ،
      "التصنيف": "تاريخ النشر" ،
      "مطلوب": صحيح
    }
  }،
  "الإعدادات": {
    "ذاكرة التخزين المؤقت": صحيح ،
    "المصادقة": صحيح ،
    "العد": 10 ،
    "فرز": "publishDate" ،
    "sortOrder": 1 ،
    "storeRevisions": false ،
    "فهرس": [
      {
        "مفاتيح": {
          "تاريخ النشر": 1
        }
      }
    ]
  }
}

عظيم. لدينا الآن مجموعتان ، ألبومات تحتوي على حقول "تاريخ" و "تاريخ النشر" ، وصور تحتوي على حقول الألبوم ، العنوان ، الوصف ، اسم الملف ، و تاريخ النشر. الآن حان الوقت لإنشاء بعض الإدخالات. من دليل api ، قم بتشغيل npm start.

نشر قاعدة البيانات

للإيجاز ، سنستخدم cURL لإجراء مكالمات API. باستخدام cURL ، دعنا نلتزم أولاً برمز مصادقة:

$ حليقة \
  --طلب بوست \
  - العنوان "قبول: application / json" \
  - عنوان "نوع المحتوى: application / json" \
  - البيانات "{\" clientId \ ": \" معرض الصور \ "، \" السري \ ": \" s3cr3tsqu1rr3l \ "}" \
  http://127.0.0.1:8001/token
  
{ "accessToken": "aa9c8513-1d10-4e62-9457-08891dda6136"، "tokenType": "حامل"، "expiresIn": 1800}

باستخدام رمز الدخول الجديد ، لنقم بإنشاء بعض الألبومات. سننشئ ثلاثة: أوراق الخريف والموسيقى والسفر.

تأكد من تغيير رمز الوصول المستخدم في رأس التخويل في الأمر cURL التالي!
$ حليقة \
  --طلب بوست \
  - العنوان "قبول: application / json" \
  - عنوان "Content-Type: application / json" \
  - Header "Authorization: Bearer aa9c8513-1d10-4e62-9457-08891dda6136" \
  - البيانات "[{\" title \ ": \" Travel \ "، \" publishDate \ ": \" 2017-05-18T10: 00: 00Z \ "}،
           {\ "عنوان \": \ "الموسيقى \"، \ "publicationDate \": \ "2017-06-20T12: 00: 00Z \"}،
           {\ "title \": \ "أوراق الخريف \" ، \ "publishDate \": \ "2017-10-01T14: 00: 00Z \"}] "\
  http://127.0.0.1:8001/1.0/gallery/albums
  
{ "النتائج": [{ "لقب": "السفر"، "publicationDate": "2017-05-18T10: 00: 00.000Z"، "apiVersion": "1.0"، "createdAt": 1512056399962، "createdBy": "معرض الصور"، "ضد": 1، "_ معرف": "5a20264f94c0a42e53d0823f"}، { "لقب": "الموسيقى"، "publicationDate": "2017-06-20T12: 00: 00.000Z"، "apiVersion": " 1.0 "،" createAt ": 1512056399962 ،" createBy ":" photogallery "،" v ": 1،" _ id ":" 5a20264f94c0a42e53d08240 "}، {" title ":" Autumn Autumn "،" publishDate ":" 2017-10 -01T14: 00: 00.000Z "،" apiVersion ":" 1.0 "،" createdAt ": 1512056399962،" createdBy ":" معرض الصور "،" ضد ": 1،" _ معرف ":" 5a20264f94c0a42e53d08241 "}]}

دعنا نستخلص معرفات الألبوم من النتائج. سنحتاج إليها لإضافة صور إلى كل ألبوم: 5a20264f94c0a42e53d0823f for Travel و 5a20264f94c0a42e53d08240 للموسيقى و 5a20264f94c0a42e53d08241 لأوراق الخريف.

الآن لنقم بإنشاء بعض الصور. سنضيف sample-1.jpg و sample-2.jpg إلى الألبوم الأول ، sample-3.jpg و sample-4.jpg إلى الألبوم الثاني ، و sample-5.jpg إلى الألبوم النهائي.

لا تنسَ تغيير رمز الوصول المستخدم في رأس التفويض في الأمر cURL التالي ، وقيم معرّف الألبوم!
$ حليقة \
  --طلب بوست \
  - العنوان "قبول: application / json" \
  - عنوان "نوع المحتوى: application / json" \
  - Header "Authorization: Bearer aa9c8513-1d10-4e62-9457-08891dda6136" \
  --data "[{\" album \ ": \" 5a20264f94c0a42e53d0823f \ "، \" title \ ": \" Travel 1 \ "، \" filename \ ": \" sample-5.jpg \ "، \" publishDate \ ": \" 2017-05-18T10: 00: 00Z \ "}،
           {\ "album \": \ "5a20264f94c0a42e53d08240 \"، \ "title \": \ "Music 1 \"، \ "filename \": \ "sample-3.jpg \"، \ "publishDate \": \ " 2017-06-20T12: 00: 00Z \ "}،
           {\ "album \": \ "5a20264f94c0a42e53d08240 \"، \ "title \": \ "Music 2 \"، \ "filename \": \ "sample-4.jpg \"، \ "publishDate \": \ " 2017-06-20T12: 00: 00Z \ "}،
           {\ "album \": \ "5a20264f94c0a42e53d08241 \"، \ "title \": \ "Leaves 1 \"، \ "filename \": \ "sample-1.jpg \"، \ "publishDate \": \ " 2017-10-01T14: 00: 00Z \ "}،
           {\ "album \": \ "5a20264f94c0a42e53d08241 \"، \ "title \": \ "Leaves 2 \"، \ "filename \": \ "sample-2.jpg \"، \ "publishDate \": \ " 2017-10-01T14: 00: 00Z \ "}]" "
  http://127.0.0.1:8001/1.0/gallery/photos
{"results": [{"album": "5a20264f94c0a42e53d0823f"، "title": "Travel 1"، "filename": "sample-5.jpg"، "publishDate": "2017-05-18T10: 00: 00.000 Z "،" apiVersion ":" 1.0 "،" createdAt ": 1512056536558،" createdBy ":" معرض الصور "،" ضد ": 1،" _ معرف ":" 5a2026d894c0a42e53d08242 "}، {" ألبوم ":" 5a20264f94c0a42e53d08240 "،" العنوان ":" Music 1 "،" filename ":" sample-3.jpg "،" publishDate ":" 2017-06-20T12: 00: 00.000Z "،" apiVersion ":" 1.0 "،" createAt ": 1512056536558 ، "createBy": "photogallery"، "v": 1، "_ id": "5a2026d894c0a42e53d08243"}، {"album": "5a20264f94c0a42e53d08240"، "title": "Music 2"، "filename": "sample-4 .jpg و"،" publicationDate ":" 2017-06-20T12: 00: 00.000Z "،" apiVersion ":" 1.0 "،" createdAt ": 1512056536558،" createdBy ":" معرض الصور "،" ضد ": 1،" _id ":" 5a2026d894c0a42e53d08244 "}، {" album ":" 5a20264f94c0a42e53d08241 "،" title ":" Leaves 1 "،" filename ":" sample-1.jpg "،" publishDate ":" 2017-10-01T14: 00 : 00.000Z "،" apiVersion ":" 1.0 "،" createdAt ": 1512056536558،" createdBy ":" معرض الصور "،" ضد ": 1،" _ معرف ":" 5a2026d894c0a42e53d08245 "}، {" ألبوم ":" 5a20264f94c0a42e53d08241 " ، "تي itle ":" Leaves 2 "،" filename ":" sample-2.jpg "،" publishDate ":" 2017-10-01T14: 00: 00.000Z "،" apiVersion ":" 1.0 "،" createAt ": 1512056536558 "createdBy": "معرض الصور"، "ضد": 1، "_ معرف": "5a2026d894c0a42e53d08246"}]}

حسنًا ، لدينا الآن ثلاثة ألبومات وخمس صور. نحن الآن على استعداد للانتقال إلى خدمة الويب الخاصة بنا وإنشاء الواجهة الأمامية للمعرض.

3. دادي ويب

اترك دليل واجهة برمجة التطبيقات ، واسترجع المستوى إلى دليل "المعرض". نحن بصدد إنشاء خدمة ويب جديدة باستخدام DADI CLI command dadi web new :

$ cd ..
$ dadi web new web

سيتم سؤالك عن محرك القوالب الذي سيتم استخدامه ، سنذهب إلى جانب Dust.js باستخدام الوحدة النمطية @ dadi / web-dustjs ، لأنها سهلة.

أول شيء سنفعله هو تحديث ملف config / config.development.json. افتح ذلك ، واضبط المحتويات على:

{
  "عالمي": {
    "cdn": "http://127.0.0.1:8002"
  }،
  "الخادم": {
    "المضيف": "127.0.0.1" ،
    "الميناء": 8000
  }،
  "واجهة برمجة التطبيقات": {
    "المضيف": "127.0.0.1" ،
    "الميناء": 8001
  }،
  "المصادقة": {
    "tokenUrl": "/ رمزية"،
    "clientId": "معرض الصور"،
    "سرية": "s3cr3tsqu1rr3l"
  }،
  "الكتلة": خطأ ،
  "allowJsonView": صحيح ،
  "تصحيح": صحيح
}

في القسم العام ، يمكنك رؤية أن لدينا متغيرًا واحدًا ، وهو عنوان URL لمثيل CDN الخاص بنا. في serveryou يمكن أن نرى أننا نستمع على المنفذ 8000. إذا كنت تتذكر ، API يستمع على المنفذ 8001 ، و CDN على المنفذ 8002. ثم نقوم بتكوين موقع مثيل API ، ونقدم بعض بيانات اعتماد المصادقة (التي نستخدمها الإعداد في وقت سابق.)

إعداد مصادر البيانات لدينا

بعد ذلك ، سنقوم بإعداد مصادر البيانات الخاصة بنا. ستخبر هذه الملفات الويب كيفية جلب البيانات من خدمة API الخاصة بنا. قم بإنشاء ملف داخل دليل مساحة العمل / مصادر البيانات يسمى albums.json باستخدام ما يلي:

{
  "مصدر البيانات": {
    "مفتاح": "ألبومات" ،
    "الاسم": "ألبومات الصور" ،
    "المصدر": {
      "النوع": "dadiapi" ،
      "نقطة النهاية": "1.0 / معرض / ألبومات"
    }،
    "ترقيم الصفحات": خطأ ،
    "العد": 8 ،
    "فرز": {
      "publishDate": -1
    }،
    "requestParams": [
      {
        "الحقل": "_id" ،
        "param": "albumId"
      }
    ]،
    "منقي": {}،
    "مجالات": {}
  }
}

الآن قم بإنشاء ملف يسمى photos.json باستخدام ما يلي:

{
  "مصدر البيانات": {
    "المفتاح": "الصور" ،
    "الاسم": "الصور" ،
    "المصدر": {
      "النوع": "dadiapi" ،
      "نقطة النهاية": "1.0 / معرض / صور"
    }،
    "ترقيم الصفحات": خطأ ،
    "العد": 8 ،
    "فرز": {
      "publishDate": -1
    }،
    "requestParams": [
      {
        "الحقل": "_id" ،
        "param": "photoId"
      }
    ]،
    "منقي": {}،
    "مجالات": {}
  }
}

يتم استخدام مصادر البيانات هذه بواسطة صفحاتنا لجلب البيانات من واجهة برمجة التطبيقات. على وجه الخصوص ، يوفر الحقل المصدر موقع موفر البيانات ، وسيتم استخدام حقل requestParams لاحقًا لتصفية البيانات بمعرفات محددة (عند تحميل الصور الفردية ، إلخ.)

تحضير صفحات الويب الخاصة بنا

الآن سنعمل على صفحات الويب. سيقوم DADI CLI بتوليد بعض الملفات تلقائيًا لنا في دليل مساحة العمل / الصفحات. دعونا تبسيط بسرعة وترتيب تلك.

استبدل مساحة العمل / الصفحات / الأجزاء الجزئية / header.dust بما يلي:



  <رئيس>
    <العنوان> معرض الصور 
    
    
  
  
  <رأس>
    
      

معرض الصور        

استبدل مساحة العمل / الصفحات / الأجزاء الجزئية / footer.dust بما يلي:


احذف هذه الملفات ، لأننا لن نستخدمها:

  • مساحة العمل / صفحة / جزئيات / pagination.dust
  • مساحة العمل / صفحة / جزئيات / post.dust
  • مساحة العمل / صفحة / post.dust
  • مساحة العمل / صفحة / post.json

إنشاء صفحات المعرض

نحن الآن على استعداد للبدء في تكوين صفحة الفهرس الخاصة بنا لجلب بيانات معرض الصور الخاص بنا. افتح ملف مساحة العمل / الصفحات / index.json واستبدله بما يلي:

{
  "الصفحة": {
    "الاسم": "الفهرس" ،
    "الوصف": "فهرس معرض الصور"
  }،
  "طرق": [
    {"path": "/"}
  ]،
  "مصادر البيانات": [
    "ألبومات"
    "الصور"
  ]
}

نحن هنا نعرّف مسار الصفحة كـ / ونربط بين مصدرين البيانات لدينا: الألبومات والصور. بعد ذلك ، افتح مساحة العمل / الصفحات / index.dust وأدخل ما يلي:

{> "أجزاء / رأس" /}
{# albums.results}
  
           

{عنوان}          {# photos.results albumId = ._ id}       {eq key = albumId value = .album}         
                       

{عنوان}                      

            

{> "أجزاء / تذييل" /}

نحن هنا ندور حول جميع الألبومات ، ثم نتحقق من الصور التي تنتمي إلى هذا الألبوم ، ثم نعرض بعض المعلومات بما في ذلك صورة صغيرة. نحن نستخدم تغيير صورة DADI CDN هنا.

بعد ذلك ، قم بإنشاء ملف يسمى ملف مساحة العمل / pages / photo.json بما يلي:

{
  "الصفحة": {
    "الاسم": "الصورة" ،
    "الوصف": "عرض صور معرض الصور"
  }،
  "طرق": [
    {
      "المسار": "/ photo /: photoId" ،
      "params": [
        {
          "param": "photoId" ،
          "جلب": "صور"
        }
      ]
    }
  ]،
  "مصادر البيانات": [
    "الصور"
  ]
}

نحن هنا نحدد أن المسار يأخذ معلمة باسم photoId ، وأنه يجب أن يتم تمريرها إلى مصدر بيانات الصور ، مما يؤدي إلى تصفية نتائجنا كما تطرقنا إليها سابقًا.

قم بعد ذلك بإنشاء ملف يسمى ملف مساحة العمل / pages / photo.dust وإدراج ما يلي:

{> "أجزاء / رأس" /}
{# photos.results}
  
           

{عنوان}          

      

{> "أجزاء / تذييل" /}

سنعرض هنا صورة واحدة ، أي ضعف حجم هذه المرة ، إلى جانب بعض المعلومات ذات الصلة.

بعد ذلك ، قم بإنشاء مساحة عمل / صفحات / album.json:

{
  "الصفحة": {
    "الاسم": "الألبوم" ،
    "الوصف": "عرض ألبوم ألبوم الصور"
  }،
  "طرق": [
    {
      "path": "/ album /: albumId" ،
      "params": [
        {
          "param": "albumId" ،
          "جلب": "ألبومات"
        }
      ]
    }
  ]،
  "مصادر البيانات": [
    "ألبومات"
    "الصور"
  ]
}

هذا يشبه إلى حد كبير الملف الآخر ، ولكن مع مسار مختلف ومعلمات مختلفة. أنشئ مساحة عمل / صفحات / album.dust بما يلي:

{> "أجزاء / رأس" /}
{# albums.results}
  
           

{عنوان}          {# photos.results albumId = ._ id}       {eq key = albumId value = .album}         
                       

{عنوان}                      

            

{> "أجزاء / تذييل" /}

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

أخيرًا ، في مساحة العمل / الدليل العام ، قم بتحرير style.css واستبدال المحتويات بهذا:

*، الجسم {
  التحجيم مربع: مربع الحدود.
  الهامش: 0
  الحشو: 0؛
  اللون الابيض؛
}
الجسم {
  الخلفية: # 111؛
}
h1 {
  font-family: 'Vollkorn SC'، serif؛
  حجم الخط: 240 ٪ ؛
}
h2 ، h3 ، h4 {
  font-family: 'Scope One'، serif؛
}
ع
  font-family: 'Scope One'، sans-serif؛
  حجم الخط: 80 ٪ ؛
}
أ {
  زخرفة النص: لا شيء ؛
}
a: hover {
  زخرفة النص: تسطير
  اللون: #ccc؛
}
رأس {
  العرض: 1280 بكسل ؛
  الهامش: 50px auto ؛
  محاذاة النص: المركز ؛
}
div.album {
  العرض: 1280 بكسل ؛
  الهامش: 15px auto ؛
  الحشو: 30px 15px.
  محاذاة النص: المركز ؛
  الخلفية: # 151515 ؛
}
div.album: بعد {
  يحتوي: ''؛
  جدول العرض؛
  واضحة على حد سواء؛
}
div.album h2 {
  الهامش السفلي: 30 بكسل ؛
}
div.photo {
  تعويم: اليسار؛
  العرض: 615 بكسل ؛
  الهامش: 0 5 بكسل ؛
}
div.photo.full {
  العرض: 1230 بكسل ؛
}
div.photo p.date {
  الهامش: 2px 0 6px 0 ؛
}
div.photo img {
  العرض: 600 بكسل ؛
}
div.photo img.full {
  العرض: 1200 بكسل ؛
}

ونحن قبة! الوقت لمعاينة الموقع

أنت الآن جاهز لتشغيل خدمة الويب. تأكد من تشغيل كل من خدمات API و CDN أولاً ، ثم من دليل الويب ، قم بتشغيل npm start وانتقل إلى http: // localhost: 8000. يجب أن تستقبلك صفحة الفهرس:

إذا قمت بالنقر فوق أحد الألبومات ، فيجب أن تستقبلك صفحة الألبوم:

إذا نقرت فوق صورة ، فيجب أن تستقبلك صفحة الصور:

هناك الكثير الذي يمكننا القيام به ، مثل إضافة ترقيم الصفحات ، وإضافة واجهة مستخدم أفضل ، وربما ربط DADI Publish للإدارة ، ولكن لدينا هنا التدفق الأساسي لتخزين الصور ومعالجتها مع CDN ، وتخزين البيانات والوصول إليها مع واجهة برمجة التطبيقات ، وكذلك جهد العرض مع الويب.

يمكنك العثور على الكود المصدري لعينة معرض الصور هذا في جيثب لدينا في dadi / sample-photo-gallery.

كتبه آدم ك دين ، كبير المهندسين في دادي.