Express дозволяє передавати дані в наше представлення через маршрути, передаючи об'єкт даних.
Приклад даних в EJS
Наприклад, ми можемо передати просте повідомлення в наше уявлення, використовуючи:
p><code data-language="javascript">app.get('/', function(req, res) { res.render('pages/index', { message: 'Це дані!' }) ; });Застосовуючи EJS у нашому уявленні ми могли б відобразити змінну message, використовуючи:
<code data-language="html"><%=message %>
Використання даних Instagram
Скористаємося цими принципами для виклику instagram-node, щоб отримати популярні зображення. У файлі server.js ми повернемо зображення до головної сторінки. Для цього зробимо виклик у нашому маршруті app.get ('/'.
Отримання даних Instagram з Node
У server.js , де ми визначили маршрут нашої головної сторінки, ми замінимо маршрут таким:
<code data-language="javascript">//головна сторінка — популярні зображення app.get('/', function(req , res) { //використовуємо пакет instagram для отримання популярних картинок. : medias }); }); span class="var">medias</span>. Він містить усі дані, які ми бачили в аналізі API.</p>
<p>Використовуючи <span class="var">res.render()</span> ми можемо передати всі дані <span class="var">medias</span> у наше уявлення як об'єкт з ім'ям <span class="var">grams</span>. Тепер скористаємося цим об'єктом. </p>
<h3>Відображення даних Instagram у поданні </h3>
<p>Всередині файлу index.ejs будемо в циклі обходити об'єкт grams і відображати: </p> <ul> <li>фотографію з Instagram; </li> <li>число лайків; </li> <li>кількість коментарів.</li> </ul>
<p> Використовуючи EJS, ми можемо обходити об'єкт у циклі через <span class="var">grams.forEach()</span>. Замініть розділ <span class="tag"><main></span> нашого сайту таким: <pre class="no-result"><code data-language="html">... <main> <div class="row"> <% grams.forEach(function(gram) { %> <div class="instagram-pic col-sm-3"> <a href="<%=gram.link %> "target="_blank"><img src="<%=gram.images.standard_resolution.url %>" div class="instagram-bar"> <div class="likes"> <span class="glyphicon glyphicon-heart"></span> %></div><div class="comments"><span class="glyphicon glyphicon-comment"></span> <%=gram.comments.count %>
</div></div></div> %>
</div>
</main> ...Ми створили посилання на зображення в Instagram. У нас також є instagram-bar для відображення кількості лайків та коментарів.
При обході об'єкта grams ми отримуємо доступ до всього, що повернуто API. Ви можете скористатися аналізом API для перегляду даних та виклику необхідних елементів.
Для зображення ми використовуємо images.standard_resolution.url, а для лайків та коментарів відповідно likes.count та comments.count.
Якби нам була потрібна інформація про користувача, ми могли б використовувати user.username та user.profile_picture. Заголовок можна отримати за допомогою caption.text.
Останнім кроком є стилізація наших зображень. Додайте наступне у файл style.css:
.instagram-pic { position:relative; padding:10px; overflow:hidden; }
.instagram-pic img { padding:5px; border-radius:2px; box-shadow:0 0 5px rgba(0, 0, 0, 0.5); }
.instagram-bar { position:absolute; bottom:30px; width:100%; left:0; padding-left:30px; padding-right:30px; color:#FFF; }
.instagram-bar span { margin-right:5px; }
.instagram-bar .likes { float:left; }
.instagram-bar .comments { float:right; }Тепер у нас є програма з популярними зображеннями з Instagram!
Резюме
Підіб'ємо підсумки. Ми трохи дізналися як працює Node та чим він так гарний. Ми також змогли:
- обробити JS-файл через Node;
- встановити пакети за допомогою npm;
- створити HTTP-сервер з Node та Express;
- скористалися пакетом для отримання даних API;
- зробили шаблон програми за допомогою EJS;
- відобразили дані через EJS.
Ці підходи можна застосовувати до багатьох різних типів програм. Пограйте з пакетами, доступними в npm. Можливості, які можна отримати з Node, нескінченні.
Ви можете з'єднати все з фронтенд-фреймворком на зразок Angular та базою даних на зразок MongoDB для створення повноцінної програми.