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/
相关文章推荐
- 如何实现简单的自动提示(autocomplete)填充搜索功能java代码。
- 使用jQuery简单实现模拟浏览器搜索功能
- 简单实现Android搜索功能 显示清除历史搜索记录
- django学习——如何实现简单的搜索功能
- thymeleaf实现简单的条件搜索并分页搜索功能
- iOS tableview 实现简单的搜索功能
- 使用 JavaScript 实现简单候选项推荐功能(模糊搜索)【收藏】【转】
- jQuery实现简单前端搜索功能
- swift 搜索框(UISearchBar)实现简单的搜索功能(swift3)
- iOS tableview实现简单搜索功能
- 使用 JavaScript 实现简单候选项推荐功能(模糊搜索)【收藏】【转】
- swift 搜索框(UISearchBar)实现简单的搜索功能
- UISearchBar, NSPredicate 实现简单的搜索功能
- python+opencv实现简单的图片搜索功能
- 使用Lucene实现一个简单的布尔搜索功能
- 简单JavaScript语句实现搜索关键字高亮功能
- java简单的实现搜索框的下拉显示相关搜索功能
- 简单三步-实现dede站内搜索功能
- 用angular方法简单实现了吃了么搜索小功能,还不太完善,后续会继续添加新内容。
- 使用jquery简单实现腾讯地图的地址搜索定位功能