您的位置:首页 > Web前端 > Node.js

node+express+jade+superagent+豆瓣API,实现简单的搜索功能

2017-04-22 13:37 246 查看

node+express+jade+superagent+豆瓣API,实现简单的搜索功能

配置入口文件(app.js)

var express = require('express');
var app = express();
var port = process.env.PORT || 3000;
app.listen(port);


使用jade模板(app.js)

app.set('view engine', 'jade');
app.set("views", "./views/pages/"); // 视图根目录
var serveStatic = require('serve-static');  // 静态文件处理
app.use(serveStatic('public')); // 路径:public


jade文件(../view/)

layou.jade-公共部分

doctype html
html
head
link(href='css/main.css', rel='stylesheet')
body
block content


index.jade

include ../layout
h1 app
p 请输入关键字
form(action='/search', method='GET')
input( type='text' name='q')
button(type='submit') 搜索


search.jade

include ../layout
h1 为您搜索的内容是
span.title #{search}
ul
each item in results
li.item #{item.title}


路由配置(app.js)

var search = require('./search'); // 引入search方法
//index page
app.get('/', function (req, res) {
res.render('index');
});
//search page
app.get('/search', function (req, res, next) {
search(req.query.q, function (err,douban) {
if (err) {
return next(err);
}
res.render('search', {
results: douban,
search: req.query.q
});
});
});


search方法(search.js)

需安装superagent

var request = require('superagent');

module.exports = function search(query, fn) {
request.get('https://api.douban.com/v2/movie/search?')
.set('Accept', 'application/json')
.query({q: query})
.end(function (err,res) {
if (err || !res.ok) {
console.log(err);
} else {
console.log('获取到了: ' + JSON.stringify(res.body.subjects));
fn(null, res.body.subjects);
}
});
};


页面呈现



文件目录



以下是豆瓣API返回的一部电影数据

[
{
"rating": {
"max": 10,
"average": 7.3,
"stars": "40",
"min": 0
},
"genres": [
"动作",
"犯罪"
],
"title": "速度与激情8",
"casts": [
{
"alt": "https://movie.douban.com/celebrity/1041020/",
"avatars": {
"small": "https://img3.doubanio.com/img/celebrity/small/53186.jpg",
"large": "https://img3.doubanio.com/img/celebrity/large/53186.jpg",
"medium": "https://img3.doubanio.com/img/celebrity/medium/53186.jpg"
},
"name": "范·迪塞尔",
"id": "1041020"
},
{
"alt": "https://movie.douban.com/celebrity/1044707/",
"avatars": {
"small": "https://img3.doubanio.com/img/celebrity/small/196.jpg",
"large": "https://img3.doubanio.com/img/celebrity/large/196.jpg",
"medium": "https://img3.doubanio.com/img/celebrity/medium/196.jpg"
},
"name": "道恩·强森",
"id": "1044707"
},
{
"alt": "https://movie.douban.com/celebrity/1018991/",
"avatars": {
"small": "https://img3.doubanio.com/img/celebrity/small/44470.jpg",
"large": "https://img3.doubanio.com/img/celebrity/large/44470.jpg",
"medium": "https://img3.doubanio.com/img/celebrity/medium/44470.jpg"
},
"name": "查理兹·塞隆",
"id": "1018991"
}
],
"collect_count": 89555,
"original_title": "The Fate of the Furious",
"subtype": "movie",
"directors": [
{
"alt": "https://movie.douban.com/celebrity/1009396/",
"avatars": {
"small": "https://img3.doubanio.com/img/celebrity/small/4451.jpg",
"large": "https://img3.doubanio.com/img/celebrity/large/4451.jpg",
"medium": "https://img3.doubanio.com/img/celebrity/medium/4451.jpg"
},
"name": "F·加里·格雷",
"id": "1009396"
}
],
"year": "2017",
"images": {
"small": "https://img3.doubanio.com/view/movie_poster_cover/ipst/public/p2444256500.jpg",
"large": "https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2444256500.jpg",
"medium": "https://img3.doubanio.com/view/movie_poster_cover/spst/public/p2444256500.jpg"
},
"alt": "https://movie.douban.com/subject/26260853/",
"id": "26260853"
}
//...
]


附录:

[
jade文档
]https://segmentfault.com/a/1190000000357534

[
豆瓣API
]https://developers.douban.com/wiki/?title=api_v2

[
superAgent文档
]https://visionmedia.github.io/superagent/

[
json数据格式化
]http://www.bejson.com/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息