Wie man…

Erstellen Sie eine Fotogalerie-Website mit DADI

In diesem Artikel wird erläutert, wie Sie mithilfe von DADI-Webdiensten, insbesondere Web, API und CDN, eine Fotogalerie erstellen können. Zuerst erstellen wir jeden der DADI-Services mit dem Kommandozeilen-Interface-Tool. Anschließend greifen wir auf einige Beispielbilder zu, speichern sie im CDN, fügen sie über die API zu unserer Datenbank hinzu und erstellen dann ein Frontend im Web.

Für dieses Projekt werde ich in einem einzigen Verzeichnis namens "gallery" mit einem Unterverzeichnis für jeden der Dienste arbeiten, die das DADI CLI-Tool für uns erstellen wird.

Wenn Sie die CLI noch nicht installiert haben, gehen Sie wie folgt vor:

$ npm install @ dadi / cli -g

Jetzt erstellen wir das "Galerie" -Verzeichnis, das alle Dienste enthält:

$ mkdir ~ / projects / gallery
$ cd ~ / projects / gallery

1. DADI CDN

Beginnen wir mit dem CDN.

Zuerst erstellen wir einen neuen CDN-Dienst mit dem DADI-CLI-Befehl dadi cdn new :

$ dadi cdn new cdn

Dadurch wird DADI CDN heruntergeladen und installiert, und Sie werden durch einen interaktiven Assistenten geführt. Wir werden nur einen einfachen, dateibasierten HTTP-CDN-Dienst ausführen:

Beginnen wir mit der Konfiguration des Webservers, auf dem DADI CDN ausgeführt wird. (0% abgeschlossen)
? Wie heißt diese CDN-Instanz? DADI (CDN)
? Auf welchem ​​Protokoll soll diese CDN-Instanz ausgeführt werden? HTTP (unsicher)
? Mit welcher IP-Adresse sollte die Anwendung ausgeführt werden? 0.0.0.0
? Auf welcher Portnummer sollte die Anwendung ausgeführt werden? 8002
Zeit zum Konfigurieren der Quellen, die CDN zum Abrufen von Bildern verwendet. (18% abgeschlossen)
? Möchten Sie Bilder aus dem lokalen Dateisystem laden? Ja
? Wie lautet der Pfad zum Bilderverzeichnis? ./images
? Möchten Sie Bilder von Amazon S3 laden? Nein
? Möchten Sie Bilder von einer entfernten URL laden? Nein
Toll! Definieren wir nun, wie CDN mit anderen Assets (z. B. CSS, JS oder Schriftarten) umgeht (44% vollständig).
? Möchten Sie Assets aus dem lokalen Dateisystem laden? Nein
? Möchten Sie Assets von Amazon S3 laden? Nein
? Möchten Sie Assets von einer Remote-URL laden? Nein
Betrachten wir nun das Caching, das entscheidend ist, um sicherzustellen, dass CDN Images und Assets auf performante Weise bereitstellt. (67% abgeschlossen)
? Wie lange dauert es, bis zwischengespeicherte Elemente in Sekunden eingelesen werden? 3600
? Möchten Sie Elemente im lokalen Dateisystem zwischenspeichern? Ja
? Wie lautet der Pfad zum Cache-Verzeichnis? ./Zwischenspeicher/
? Möchten Sie Elemente auf einem Redis-Server zwischenspeichern? Nein
Super. Sie müssen auch die Anmeldeinformationen für authentifizierte Benutzer konfigurieren, die über oAuth verwendet werden sollen. (85% vollständig)
? Welche ID sollten authentifizierte Clients verwenden? FotogalerieBenutzer
? Welches Geheimnis sollten authentifizierte Clients verwenden? s3cr3tsqu1rr3l
? Was ist die Restlaufzeit (Time-to-Live, TTL) für oAuth-Token in Sekunden? 1800
Fast dort! Noch ein paar Fragen zu Ihrer CDN-Installation. (92% abgeschlossen)
? Möchten Sie, dass DADI CDN im Cluster-Modus ausgeführt wird und für jeden CPU-Kern einen Worker startet? Nein
? Für welche Umgebung gilt diese Konfiguration? Entwicklung
Alles erledigt!

Gut, jetzt bereiten wir unsere Bilder vor. Erstellen Sie ein Verzeichnis im cdn-Verzeichnis und nennen Sie es images. Als nächstes holen wir uns ein paar Beispielbilder für unsere Galerie. Ein großartiger Ort, um diese zu erhalten, ist Fujifilm, das Beispielbilder von Kameramodellen liefert. Laden Sie die folgenden Bilder in das Bilderverzeichnis herunter: sample-1.jpg, sample-2.jpg, sample-3.jpg, sample-4.jpg, sample-5.jpg.

Führen Sie im cdn-Verzeichnis npm start aus und überprüfen Sie, ob die Bilder funktionieren, indem Sie zu http: // localhost: 8002 / sample-1.jpg navigieren.

Wir sind jetzt bereit, auf API umzusteigen.

2. DADI API

Verlassen Sie das CDN-Verzeichnis und kehren Sie in das Verzeichnis „gallery“ zurück. Wir werden einen neuen API-Service mit dem DADI-CLI-Befehl dadi api new erstellen:

$ cd ..
$ dadi api new api

Zum Zeitpunkt des Schreibens wird DADI API 2.x installiert, sodass kein interaktiver Assistent vorhanden ist. In Kürze werden Sie mit der DADI API 3.0 durch einen Setup-Assistenten geführt und können aus einer Reihe von Datenconnectors auswählen.

Hinweis: Für API 2.x ist eine MongoDB-Instanz erforderlich. Wenn Sie noch nicht über eines dieser Setups verfügen, können Sie eines ganz einfach mit Docker starten und testen:
$ docker run -d -p 27017: 27017 mongo: 3.2

Als Erstes bearbeiten wir die Konfigurationsdatei config / config.development.json und ändern die Servereinstellungen.

Ändern Sie den Port unter server und publicUrl in 8001. Ändern Sie auch den Datenbankwert von dadi-api in photo-gallery in den Abschnitten database und auth. Hier ist eine kurze Zusammenfassung der Änderungen:

"server": {
    "port": 8001
  },
  "publicUrl": {
    "port": 8001
  },
  "Datenbank": {
    "Datenbank": "Fotogalerie",
  },
  "auth": {
    "Datenbank": {
      "Datenbank": "Fotogalerie"
    }
  },

Wie wir in meinem letzten Beitrag zur Authentifizierung in der DADI-API gesehen haben, müssen wir einige Anmeldeinformationen für unseren Webdienst erstellen, um uns bei unserem API-Dienst zu authentifizieren. Wir können die DADI-CLI verwenden, das ist wirklich einfach. Wechseln Sie in das neue API-Verzeichnis und führen Sie Folgendes aus:

$ dadi api clients: add
? Wie lautet die Kundennummer? Fotogallerie
? Was ist das Geheimnis? s3cr3tsqu1rr3l
? Welche Art von Zugang benötigt der Benutzer? Benutzer
✔ Erstellt Client mit ID-Fotogalerie und Typ Benutzer

Als Nächstes werden wir einige Sammlungen in API erstellen.

Löschen Sie im Verzeichnis api / workspace / collections / 1.0 / das Beispielbibliotheksverzeichnis und erstellen Sie ein neues Verzeichnis mit dem Namen gallery. Erstellen Sie darin eine Datei mit dem Namen collection.albums.json mit dem folgenden Inhalt:

{
  "Felder": {
    "Titel": {
      "type": "String",
      "label": "Albumtitel",
      "erforderlich": wahr
    },
    "Veröffentlichungsdatum": {
      "type": "DateTime",
      "label": "Erscheinungsdatum",
      "erforderlich": wahr
    }
  },
  "die Einstellungen": {
    "cache": wahr,
    "authentifizieren": wahr,
    "count": 10,
    "sort": "publicationDate",
    "sortOrder": 1,
    "storeRevisions": false,
    "Index": [
      {
        "Schlüssel": {
          "Datum der Veröffentlichung": 1
        }
      }
    ]
  }
}

Erstellen Sie nun eine collection.photos.json-Datei mit folgendem Inhalt:

{
  "Felder": {
    "album": {
      "type": "String",
      "label": "Fotoalbum ID",
      "erforderlich": wahr
    },
    "Titel": {
      "type": "String",
      "label": "Fototitel",
      "erforderlich": wahr
    },
    "Dateiname": {
      "type": "String",
      "label": "Ressourcendateiname",
      "erforderlich": wahr
    },
    "Veröffentlichungsdatum": {
      "type": "DateTime",
      "label": "Erscheinungsdatum",
      "erforderlich": wahr
    }
  },
  "die Einstellungen": {
    "cache": wahr,
    "authentifizieren": wahr,
    "count": 10,
    "sort": "publicationDate",
    "sortOrder": 1,
    "storeRevisions": false,
    "Index": [
      {
        "Schlüssel": {
          "Datum der Veröffentlichung": 1
        }
      }
    ]
  }
}

Toll. Wir haben jetzt zwei Sammlungen, Alben mit den Feldern title und publicationDate und Fotos mit den Feldern album, title, description, filename und publicationDate. Jetzt ist es Zeit, einige Einträge zu erstellen. Führen Sie im API-Verzeichnis npm start aus.

Füllen Sie die Datenbank

Der Kürze halber werden wir cURL nur zum Ausführen von API-Aufrufen verwenden. Nehmen wir uns mit cURL zunächst ein Authentifizierungstoken:

$ curl \
  --Anfrage POST \
  --header "Accept: application / json" \
  --header "Content-Type: application / json" \
  --data "{" clientId ":" photogallery "," secret ":" s3cr3tsqu1rr3l "}"
  http://127.0.0.1:8001/token
  
{"accessToken": "aa9c8513-1d10-4e62-9457-08891dda6136", "tokenType": "Bearer", "expiresIn": 1800}

Erstellen Sie mit dem neuen Zugriffstoken einige Alben. Wir werden drei erstellen: Herbstlaub, Musik und Reisen.

Stellen Sie sicher, dass Sie das im Authorization-Header verwendete Zugriffstoken im folgenden cURL-Befehl ändern!
$ curl \
  --Anfrage POST \
  --header "Accept: application / json" \
  --header "Content-Type: application / json" \
  --header "Autorisierung: Inhaber aa9c8513-1d10-4e62-9457-08891dda6136" \
  --Daten [{\ "title \": \ "Travel \", \ "PublicationDate \": \ "2017-05-18T10: 00: 00Z \"},
           {"title": "Music", "publicationDate": "2017-06-20T12: 00: 00Z"},
           {"title": "Autumn leaves", "publicationDate": "2017-10-01T14: 00: 00Z"}] "
  http://127.0.0.1:8001/1.0/gallery/albums
  
{"results": [{"title": "Travel", "publicationDate": "2017-05-18T10: 00: 00.000Z", "apiVersion": "1.0", "createdAt": 1512056399962, "createdBy": "photogallery", "v": 1, "_ id": "5a20264f94c0a42e53d0823f"}, {"title": "Music", "publicationDate": "2017-06-20T12: 00: 00.000Z", "apiVersion": " 1.0 "," createdAt ": 1512056399962," createdBy ":" photogallery "," v ": 1," _ id ":" 5a20264f94c0a42e53d08240 "}, {" title ":" Autumn leaves "," publicationDate ":" 2017-10 -01T14: 00: 00.000Z "," apiVersion ":" 1.0 "," createdAt ": 1512056399962," createdBy ":" photogallery "," v ": 1," _ id ":" 5a20264f94c0a42e53d08241 "}}

Extrahieren wir die Album-IDs aus den Ergebnissen. Sie werden zum Hinzufügen von Fotos zu jedem Album benötigt: 5a20264f94c0a42e53d0823f für Reisen, 5a20264f94c0a42e53d08240 für Musik und 5a20264f94c0a42e53d08241 für Herbstblätter.

Lassen Sie uns nun einige Fotos erstellen. Wir fügen sample-1.jpg und sample-2.jpg zum ersten Album, sample-3.jpg und sample-4.jpg zum zweiten Album und sample-5.jpg zum letzten Album hinzu.

Vergessen Sie nicht, das im Authorization-Header verwendete Zugriffstoken im folgenden cURL-Befehl UND die Album-ID-Werte zu ändern!
$ curl \
  --Anfrage POST \
  --header "Accept: application / json" \
  --header "Content-Type: application / json" \
  --header "Autorisierung: Inhaber aa9c8513-1d10-4e62-9457-08891dda6136" \
  --data "[{" album ":" 5a20264f94c0a42e53d0823f "," title ":" Travel 1 "," filename ":" sample-5.jpg "," publicationDate " ":" 2017-05-18T10: 00: 00Z "},
           {"album": "5a20264f94c0a42e53d08240", "title": "Music 1", "filename": "sample-3.jpg", "publicationDate": " 2017-06-20T12: 00: 00Z "},
           {"album": "5a20264f94c0a42e53d08240", "title": "Music 2", "filename": "sample-4.jpg", "publicationDate": " 2017-06-20T12: 00: 00Z "},
           {"album": "5a20264f94c0a42e53d08241", "title": "Leaves 1", "filename": "sample-1.jpg", "publicationDate": " 2017-10-01T14: 00: 00Z "},
           {"album": "5a20264f94c0a42e53d08241", "title": "Leaves 2", "filename": "sample-2.jpg", "publicationDate": " 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", "publicationDate": "2017-05-18T10: 00: 00.000 Z, apiVersion: 1.0, createdAt: 1512056536558, createdBy: photogallery, v: 1, _ id: 5a2026d894c0a42e53d08242}, {album: 5a20264f94c0a42e53d title ":" Music 1 "," filename ":" sample-3.jpg "," publicationDate ":" 2017-06-20T12: 00: 00.000Z "," apiVersion ":" 1.0 "," createdAt ": 1512056536558 , "createdBy": "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 ":" photogallery "," v ": 1," _id ":" 5a2026d894c0a42e53d08244 "}, {" album ":" 5a20264f94c0a42e53d08241 "," title ":" Leaves 1 "," filename ":" sample-1.jpg "," publicationDate ":" 2017-10-01T14: 00 : 00.000Z, apiVersion: 1.0, createdAt: 1512056536558, createdBy: Fotogalerie, v: 1, _id: 5a2026d894c0a42e53d08245}, {album: 5a20264f94c0842e "t itle ":" Leaves 2 "," filename ":" sample-2.jpg "," publicationDate ":" 2017-10-01T14: 00: 00.000Z "," apiVersion ":" 1.0 "," createdAt ": 1512056536558 , "createdBy": "photogallery", "v": 1, "_ id": "5a2026d894c0a42e53d08246"}]}

Okay, jetzt haben wir drei Alben und fünf Fotos. Wir sind jetzt bereit, zu unserem Web-Service überzugehen und unser Galerie-Frontend zu erstellen.

3. DADI WEB

Verlassen Sie das API-Verzeichnis und kehren Sie in das Verzeichnis „gallery“ zurück. Wir werden einen neuen Webdienst mit dem DADI-CLI-Befehl dadi web new erstellen:

$ cd ..
$ dadi web new web

Sie werden gefragt, welche Template-Engine verwendet werden soll. Wir werden Dust.js einfach mit dem Modul @ dadi / web-dustjs verwenden, da dies ganz einfach ist.

Als Erstes aktualisieren wir unsere Datei config / config.development.json. Öffnen Sie das und stellen Sie den Inhalt auf:

{
  "global": {
    cdn: http://127.0.0.1:8002
  },
  "server": {
    "host": "127.0.0.1",
    "port": 8000
  },
  "api": {
    "host": "127.0.0.1",
    "port": 8001
  },
  "auth": {
    "tokenUrl": "/ token",
    "clientId": "Fotogalerie",
    "secret": "s3cr3tsqu1rr3l"
  },
  "cluster": false,
  "allowJsonView": true,
  "debug": wahr
}

Im globalen Bereich sehen Sie, dass wir eine einzige Variable haben, die die URL unserer CDN-Instanz ist. Im Server sehen Sie, dass wir Port 8000 überwachen. Wenn Sie sich erinnern, überwacht die API Port 8001 und das CDN Port 8002. Anschließend konfigurieren wir den Speicherort der API-Instanz und geben einige Authentifizierungsinformationen (die wir verwenden) an früher einrichten.)

Vorbereiten unserer Datenquellen

Als Nächstes bereiten wir unsere Datenquellen vor. Diese Dateien teilen Web mit, wie Daten von unserem API-Service abgerufen werden. Erstellen Sie eine Datei mit dem Namen albums.json im Verzeichnis workspace / datasources mit den folgenden Angaben:

{
  "Datenquelle": {
    "key": "albums",
    "Name": "Fotoalben",
    "Quelle": {
      "Typ": "Dadiapi",
      "Endpunkt": "1.0 / Galerie / Alben"
    },
    "paginieren": falsch,
    "count": 8,
    "sort": {
      "PublicationDate": -1
    },
    "requestParams": [
      {
        "field": "_id",
        "param": "albumId"
      }
    ],
    "filter": {},
    "Felder": {}
  }
}

Erstellen Sie nun eine Datei mit dem Namen photos.json mit folgenden Angaben:

{
  "Datenquelle": {
    "Schlüssel": "Fotos",
    "Name": "Fotos",
    "Quelle": {
      "Typ": "Dadiapi",
      "Endpunkt": "1.0 / Galerie / Fotos"
    },
    "paginieren": falsch,
    "count": 8,
    "sort": {
      "PublicationDate": -1
    },
    "requestParams": [
      {
        "field": "_id",
        "param": "photoId"
      }
    ],
    "filter": {},
    "Felder": {}
  }
}

Diese Datenquellen werden von unseren Seiten verwendet, um Daten von der API abzurufen. Insbesondere gibt das Quellfeld den Speicherort des Datenanbieters an, und das requestParams-Feld wird später zum Filtern der Daten mit bestimmten IDs verwendet (zum Laden einzelner Fotos usw.).

Vorbereiten unserer Webseiten

Jetzt arbeiten wir an den Webseiten. Die DADI-CLI hat einige Dateien im Verzeichnis workspace / pages für uns automatisch generiert. Lassen Sie uns diese schnell vereinfachen und aufräumen.

Ersetzen Sie workspace / pages / partials / header.dust durch Folgendes:



  
     FOTOGALERIE </ title>
    <link rel = "stylesheet" type = "text / css" href = "/ styles.css">
    <link href = "https://fonts.googleapis.com/css?family=Scope+One|Vollkorn+SC" rel = "stylesheet">
  </ head>
  <body></pre><pre>  <header>
    <a href="/">
      <h1> FOTOGALERIE </ h1>
    </a>
  </ header></pre><p>Ersetzen Sie workspace / pages / partials / footer.dust durch Folgendes:</p><pre></ body>
</ html></pre><p>Löschen Sie diese Dateien, da wir sie nicht verwenden werden:</p><ul><li>Arbeitsbereich / pages / partials / pagination.dust</li><li>Arbeitsbereich / pages / partials / post.dust</li><li>Arbeitsbereich / pages / post.dust</li><li>Arbeitsbereich / pages / post.json</li></ul><h4>Erstellen Sie die Galerieseiten</h4><p>Jetzt können wir mit der Konfiguration unserer Indexseite beginnen, um die Daten unserer Fotogalerie abzurufen. Öffnen Sie die Datei workspace / pages / index.json und ersetzen Sie sie durch diese:</p><pre>{
  "Seite": {
    "name": "index",
    "description": "Foto-Galerie-Index"
  },
  "routen": [
    {"path": "/"}
  ],
  "Datenquellen": [
    "Alben",
    "Fotos"
  ]
}</pre><p>Hier definieren wir den Seitenpfad als / und verbinden unsere beiden Datenquellen: Alben und Fotos. Öffnen Sie als Nächstes workspace / pages / index.dust und fügen Sie Folgendes ein:</p><pre>{> "partials / header" /}</pre><pre>{# albums.results}
  <div class = "album">
    <a href="/album/{_id}">
      <h2> {. title} </ h2>
    </a>
    {# photos.results albumId = ._ id}
      {@eq key = albumId value = .album}
        <div class = "photo">
          <a href="/photo/{._id}">
            <h3> {title} </ h3>
          </a>
          <p class = "date">
            <time datetime = "{publicationDate}">
              {@formatDate
                data = PublicationDate
                parseFormat = "JJJJ-MM-TT hh: mm: ss"
                format = "MMMM Do, YYYY"
              /}
            </ time>
          </ p>
          <a href="/photo/{._id}">
            <img
              src = "{global.cdn} / {filename}? width = 640 & amp; resize = aspectfit & amp; devicePixelRatio = 2"
              alt = "{title}">
          </a>
        </ div>
      {/ eq}
    {/photos.results}
  </ div>
{/albums.results}</pre><pre>{> "partials / footer" /}</pre><p>Hier durchlaufen wir alle Alben, suchen nach Fotos, die zu diesem Album gehören, und zeigen dann einige Informationen an, darunter ein kleines Foto. Wir verwenden hier die Bildgröße des DADI CDN.</p><p>Erstellen Sie als Nächstes eine Datei mit dem Namen workspace / pages / photo.json mit den folgenden Angaben:</p><pre>{
  "Seite": {
    "Name": "Foto",
    "Beschreibung": "Fotogalerie Fotoansicht"
  },
  "routen": [
    {
      "path": "/ photo /: photoId",
      "params": [
        {
          "param": "photoId",
          "holen": "fotos"
        }
      ]
    }
  ],
  "Datenquellen": [
    "Fotos"
  ]
}</pre><p>Hier geben wir an, dass der Pfad einen Parameter mit dem Namen "photoId" annimmt und dieser an die Datenquelle "photos" übergeben werden soll, die unsere Ergebnisse filtert, wie wir zuvor angesprochen haben.</p><p>Erstellen Sie als Nächstes eine Datei mit dem Namen workspace / pages / photo.dust und fügen Sie Folgendes ein:</p><pre>{> "partials / header" /}</pre><pre>{# photos.results}
<div class = "album">
  <div class = "photo full">
    <a href="/{._id}">
      <h3> {title} </ h3>
    </a>
    <p class = "date">
      <time datetime = "{publicationDate}">
        {@formatDate
          data = PublicationDate
          parseFormat = "JJJJ-MM-TT hh: mm: ss"
          format = "MMMM Do, YYYY"
        /}
      </ time>
    </ p>
    <a href="/{._id}">
      <img src = "{global.cdn} / {filename}? width = 1920 & amp; resize = aspectfit & amp; devicePixelRatio = 2" alt = "{title}" class = "full">
    </a>
  </ div>
</ div>
{/photos.results}</pre><pre>{> "partials / footer" /}</pre><p>Hier zeigen wir ein einzelnes Foto, das dieses Mal doppelt so groß ist, sowie einige relevante Informationen.</p><p>Als nächstes erstellen Sie workspace / pages / album.json:</p><pre>{
  "Seite": {
    "name": "album",
    "Beschreibung": "Fotogalerie Albumansicht"
  },
  "routen": [
    {
      "path": "/ album /: albumId",
      "params": [
        {
          "param": "albumId",
          "holen": "Alben"
        }
      ]
    }
  ],
  "Datenquellen": [
    "Alben",
    "Fotos"
  ]
}</pre><p>Dies sieht der anderen Datei sehr ähnlich, hat jedoch einen anderen Pfad und andere Parameter. Erstellen Sie den Arbeitsbereich / pages / album.dust mit den folgenden Schritten:</p><pre>{> "partials / header" /}</pre><pre>{# albums.results}
  <div class = "album">
    <a href="/album/{_id}">
      <h2> {. title} </ h2>
    </a>
    {# photos.results albumId = ._ id}
      {@eq key = albumId value = .album}
        <div class = "photo">
          <a href="/photo/{._id}">
            <h3> {title} </ h3>
          </a>
          <p class = "date">
            <time datetime = "{publicationDate}">
              {@formatDate
                data = PublicationDate
                parseFormat = "JJJJ-MM-TT hh: mm: ss"
                format = "MMMM Do, YYYY"
              /}
            </ time>
          </ p>
          <a href="/photo/{._id}">
            <img src = "{global.cdn} / {filename}? width = 640 & amp; resize = aspectfit & amp; devicePixelRatio = 2" alt = "{title}">
          </a>
        </ div>
      {/ eq}
    {/photos.results}
  </ div>
{/albums.results}</pre><pre>{> "partials / footer" /}</pre><p>Dies unterscheidet sich kaum von der Indexseite, es sei denn, wir filtern die Alben, die wir über requestParams zurückgeben. Wir könnten (und würden sicherlich) Teilcodes verwenden, um sich wiederholenden Code zu reduzieren, aber um die Dinge einfach zu halten, überspringen wir dies hier.</p><p>Bearbeiten Sie schließlich im Verzeichnis workspace / public style.css und ersetzen Sie den Inhalt durch Folgendes:</p><pre>*, Körper {
  Box-Größe: Border-Box;
  Rand: 0;
  Polsterung: 0;
  Farbe weiß;
}</pre><pre>Körper {
  Hintergrund: # 111;
}</pre><pre>h1 {
  Schriftfamilie: 'Vollkorn SC', Serife;
  Schriftgröße: 240%;
}</pre><pre>h2, h3, h4 {
  Schriftfamilie: 'Scope One', Serife;
}</pre><pre>p {
  Schriftfamilie: 'Scope One', serifenlos;
  Schriftgröße: 80%;
}</pre><pre>ein {
  Textdekoration: keine;
}
a: schwebeflug {
  Textdekoration: unterstrichen;
  Farbe: #ccc;
}</pre><pre>Header {
  Breite: 1280px;
  Rand: 50px Auto;
  Textausrichtung: Mitte;
}</pre><pre>div.album {
  Breite: 1280px;
  Rand: 15px Auto;
  Polsterung: 30px 15px;
  Textausrichtung: Mitte;
  Hintergrund: # 151515;
}
div.album: nach {
  Inhalt: '';
  Anzeige: Tabelle;
  Lösche beide;
}
div.album h2 {
  Rand-Boden: 30px;
}</pre><pre>div.photo {
  Schwimmer: links;
  Breite: 615px;
  Rand: 0 5px;
}
div.photo.full {
  Breite: 1230px;
}
div.photo p.date {
  Rand: 2px 0 6px 0;
}
div.photo img {
  Breite: 600px;
}
div.photo img.full {
  Breite: 1200px;
}</pre><h3>Und wir sind Kuppel! Zeit für eine Vorschau der Site</h3><p>Jetzt können Sie den Webdienst ausführen. Stellen Sie sicher, dass die API- und CDN-Dienste zuerst ausgeführt werden. Führen Sie dann im Webverzeichnis npm start aus und navigieren Sie zu http: // localhost: 8000. Sie sollten von der Indexseite begrüßt werden:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1573915151293.jpg" /><p>Wenn Sie in ein Album klicken, sollten Sie von der Albumseite begrüßt werden:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1573915153544.jpg" /><p>Wenn Sie auf ein Foto klicken, sollten Sie von der Fotoseite begrüßt werden:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1573915155385.jpg" /><p>Es gibt noch mehr Dinge, die wir tun könnten, z. B. eine Paginierung hinzufügen, eine bessere Benutzeroberfläche hinzufügen oder DADI Publish für die Verwaltung einrichten, aber hier haben wir den grundlegenden Ablauf der Bildspeicherung und -bearbeitung mit CDN, der Datenspeicherung und des Zugriffs mit API sowie mühelose Präsentation mit Web.</p><p>Den Quellcode für diese Beispielfotogalerie finden Sie in unserem Github unter dadi / sample-photo-gallery.</p><p>Geschrieben von Adam K Dean, einem Senior Engineer bei DADI.</p></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">Siehe auch</h4><a href="/item/how-to-contribute-in-meetings-9a5e99/" title="Wie kann ich an Meetings teilnehmen?">Wie kann ich an Meetings teilnehmen?</a><a href="/item/how-to-learn-css-grid-with-pinegrow-cbed4e/" title="Wie lerne ich CSS Grid mit Pinegrow?">Wie lerne ich CSS Grid mit Pinegrow?</a><a href="/item/how-to-authenticate-your-e-mail-29100a/" title="So authentifizieren Sie Ihre E-Mail">So authentifizieren Sie Ihre E-Mail</a><a href="/item/a-how-to-on-picking-pretty-colors-105209/" title="Eine Anleitung zum Auswählen hübscher Farben">Eine Anleitung zum Auswählen hübscher Farben</a><a href="/item/how-to-get-ideas-for-new-product-features-0473aa/" title="So erhalten Sie Ideen für neue Produktfunktionen">So erhalten Sie Ideen für neue Produktfunktionen</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.chinthaka.org/item/how-to-058434/"><i class="vn flag"></i></a><a href="https://uk.chinthaka.org/item/how-to-058434/"><i class="ua flag"></i></a><a href="https://tr.chinthaka.org/item/how-to-058434/"><i class="tr flag"></i></a><a href="https://th.chinthaka.org/item/how-to-058434/"><i class="th flag"></i></a><a href="https://sv.chinthaka.org/item/how-to-058434/"><i class="ch flag"></i></a><a href="https://sr.chinthaka.org/item/how-to-058434/"><i class="rs flag"></i></a><a href="https://sl.chinthaka.org/item/how-to-058434/"><i class="si flag"></i></a><a href="https://sk.chinthaka.org/item/how-to-058434/"><i class="sk flag"></i></a><a href="https://ru.chinthaka.org/item/how-to-058434/"><i class="ru flag"></i></a><a href="https://ro.chinthaka.org/item/how-to-058434/"><i class="ro flag"></i></a><a href="https://pt.chinthaka.org/item/how-to-058434/"><i class="pt flag"></i></a><a href="https://pl.chinthaka.org/item/how-to-058434/"><i class="pl flag"></i></a><a href="https://ar.chinthaka.org/item/how-to-058434/"><i class="sa flag"></i></a><a href="https://bg.chinthaka.org/item/how-to-058434/"><i class="bg flag"></i></a><a href="https://cs.chinthaka.org/item/how-to-058434/"><i class="cz flag"></i></a><a href="https://da.chinthaka.org/item/how-to-058434/"><i class="dk flag"></i></a><a href="https://el.chinthaka.org/item/how-to-058434/"><i class="gr flag"></i></a><a href="https://es.chinthaka.org/item/how-to-058434/"><i class="es flag"></i></a><a href="https://et.chinthaka.org/item/how-to-058434/"><i class="ee flag"></i></a><a href="https://fi.chinthaka.org/item/how-to-058434/"><i class="fi flag"></i></a><a href="https://fr.chinthaka.org/item/how-to-058434/"><i class="fr flag"></i></a><a href="https://hi.chinthaka.org/item/how-to-058434/"><i class="in flag"></i></a><a href="https://hr.chinthaka.org/item/how-to-058434/"><i class="hr flag"></i></a><a href="https://hu.chinthaka.org/item/how-to-058434/"><i class="hu flag"></i></a><a href="https://id.chinthaka.org/item/how-to-058434/"><i class="id flag"></i></a><a href="https://it.chinthaka.org/item/how-to-058434/"><i class="it flag"></i></a><a href="https://ja.chinthaka.org/item/how-to-058434/"><i class="jp flag"></i></a><a href="https://ko.chinthaka.org/item/how-to-058434/"><i class="kr flag"></i></a><a href="https://lt.chinthaka.org/item/how-to-058434/"><i class="lt flag"></i></a><a href="https://lv.chinthaka.org/item/how-to-058434/"><i class="lv flag"></i></a><a href="https://ms.chinthaka.org/item/how-to-058434/"><i class="my flag"></i></a><a href="https://nl.chinthaka.org/item/how-to-058434/"><i class="nl flag"></i></a><a href="https://no.chinthaka.org/item/how-to-058434/"><i class="no flag"></i></a><a href="https://uz.chinthaka.org/item/how-to-058434/"><i class="uz flag"></i></a></div>chinthaka.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>