Express.js 教程：帶有 Storify API 的 Instagram Gallery 示例應用程序
注意： 本文是 Express.js 指南的一部分：Express.js 綜合書籍。
使用 Storify API 作為數據源的 Express.js 應用程序示例是 Express.js 教程介紹的延續。
其他帖子包括以下主題：
- Express.js 簡介：參數、錯誤處理和其他中間件
- Express.js 簡介：使用 Monk 和 MongoDB 的簡單 REST API 應用
- Node.js MVC：Express.js + Derby Hello World 教程
Instagram 畫廊
Storify 在 Node.js 和 Express.js 上運行，因此為什麼不使用這些技術編寫一個應用程序來演示如何構建依賴於第三方 API 和對它們的 HTTP 請求的應用程序？
Instagram Gallery 應用程序將獲取故事對象並顯示標題、描述和元素/圖像的畫廊，如下所示：
Express.js 教程：帶有 Storify API 的 Instagram Gallery 示例應用
一個文件結構
- index.js
- package.json
- views/index.html
- css/bootstrap-responsive.min.css
- css/flatly-bootstrap.min.css
GitHub 位於 github.com/storify/sfy-gallery。
依賴項
- 快遞：3.2.5
- 超級代理：0.14.6
- 整合：0.9.1
- 車把：1.0.12
包.json：
{
"name": "sfy-demo",
"version": "0.0.0",
"description": "Simple Node.js demo app on top of Storify API",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"express": "3.2.5",
"superagent": "0.14.6",
"consolidate": "0.9.1",
"handlebars": "1.0.12"
},
"repository": "",
"author": "Azat Mardanov",
"license": "BSD"
}
Node.js 服務器
需要依賴：
var express = require('express');
var superagent = require('superagent');
var consolidate = require('consolidate');
var app = express();配置模板引擎：
app.engine('html', consolidate.handlebars);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');設置靜態文件夾中間件：
app.use(express.static(__dirname + '/public'));
var user = 'azat_co';
var story_slug = 'kazan';
粘貼您的值，即 Storify API 密鑰、用戶名和 _token：
var api_key = "";
var username = "";
var _token = "";
app.get('/',function(req, res){從 Storify API 中獲取元素：
superagent.get("http://api.storify.com/v1/stories/" + user + "/" + story_slug)
.query({api_key: api_key,
username: username,
_token: _token})
.set({ Accept: 'application/json' })
.end(function(e, storifyResponse){
if (e) next(e);使用 HTTP 響應正文的 content 屬性中的故事對象渲染模板：
return res.render('index', storifyResponse.body.content);
})
})
app.listen(3001);車把模板
views/index.html 文件內容：
[旁注]
閱讀博客文章很好，但觀看視頻課程更好，因為它們更具吸引力。
許多開發人員抱怨 Node.js 上缺乏負擔得起的高質量視頻材料。觀看 YouTube 視頻會讓人分心，花 500 美元購買 Node 視頻課程很瘋狂！
去看看 Node University，它有關於 Node 的免費視頻課程：node.university。
[旁注結束]
<!DOCTYPE html lang="en">
<html>
<head>
<link type="text/css" href="css/flatly-bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="css/bootstrap-responsive.min.css" rel="stylesheet"/>
</head>
<body class="container">
<div class="row">
<h1>{{title}}<small> by {{author.name}}</small></h1>
<p>{{description}}</p>
</div>
<div class="row">
<ul class="thumbnails">
{{#each elements}}
<li class="span3"><a class="thumbnail" href="{{permalink}}" target="_blank"><img src="{{data.image.src}}" title="{{data.image.caption}}" /></a></li>
{{/each}}
</ul>
</div>
</body>
</html>結論
Storify API 允許開發人員檢索和操作故事和故事中的元素。完整說明可在 dev.storify.com 上找到。
自己試試吧！
https://gist.github.com/azat-co/5725820
