第8章 完善之搜索、精华功能
2014-03-27 22:37
127 查看
小站:http://oideas.herokuapp.com
教程演示地址:http://omind.herokuapp.com
教程代码地址:https://github.com/joveth/OMinds
QQ交流群:158325682
1、搜索功能
还记得common.js吗,对就是这里,在将:
其中,input添加了id,和onkeydown事件监听(其它的修改没什么用)。
ok,在该文件的最后(是最后哦),添加doSubmit方法:
就是监听键盘的enter键按下后的事件(不知到为什么用form的submit方法不行,有知道的同学说一下)。
ok,打开routes/index.js,添加方法:
其中,先去查找有没有相关的用户,再根据用户查找它的minds,
打开model下的user.js,添加方法:
打开mind.js,添加方法:
ok,已经成功了,可以试试了。。。
下面来添加,精华功能
2、精华功能
首先打开header.ejs,修改精华的链接为:
打开model下的mind.js,添加方法:
这就是精华查找的内容,那么在routes/index.js中添加:
以上,就ok了,下面是截图效果:
搜索
精华
效果可能不是很明显~~~,好了赶快试试吧,
小站:http://oideas.herokuapp.com
教程演示地址:http://omind.herokuapp.com
教程代码地址:https://github.com/joveth/OMinds
QQ交流群:158325682
教程演示地址:http://omind.herokuapp.com
教程代码地址:https://github.com/joveth/OMinds
QQ交流群:158325682
1、搜索功能
还记得common.js吗,对就是这里,在将:
$("#searckBtn").click(function(){ if(!flag){ $("#headbar").append("<li id=searchinput><from id=searchForm method='get' action='/search' ><input type=text id=search_input name=searchkey class=searck_input onkeydown=doSubmit() ></form></li>"); }else{ $("#searchinput").remove(); } flag = !flag; });
其中,input添加了id,和onkeydown事件监听(其它的修改没什么用)。
ok,在该文件的最后(是最后哦),添加doSubmit方法:
function doSubmit(){ var currentKey = event.which; if(currentKey==13){ if($("#search_input").val()==null||$("#search_input").val()==''){ return false; } //$("#searchForm").action = '/search'; window.location.href="/search?searchkey="+$("#search_input").val(); } }
就是监听键盘的enter键按下后的事件(不知到为什么用form的submit方法不行,有知道的同学说一下)。
ok,打开routes/index.js,添加方法:
app.get('/search', function (req, res) { var key = req.query.searchkey; if (!key) { return res.redirect('/'); } var pattern = new RegExp("^.*" + key + ".*$"); User.searchByKey(pattern, function(err, users) { if (err) { users = []; } Mind.searchByKey(users, pattern, function(err, minds) { if (err) { req.flash('error', err); return res.redirect('/'); } res.render('index', { title : 'OMinds - 搜索', minds : minds, user : req.session.user }); }); }); });
其中,先去查找有没有相关的用户,再根据用户查找它的minds,
打开model下的user.js,添加方法:
//查找用户(检索) User.searchByKey = function(skey, callback) { mongodb.connect(settings.url, function(err, db) { if (err) { return callback(err); } db.collection('users', function(err, collection) { if (err) { db.close(); return callback(err); } collection.find({ nickname : skey }).toArray(function(err, results) { db.close(); if (err) { return callback(err); } callback(null, results); }); }); }); };
打开mind.js,添加方法:
Mind.searchByKey = function(users,skey,callback) { mongodb.connect(settings.url,function (err, db) { if (err) { return callback(err); } db.collection('minds', function(err, collection) { if (err) { db.close(); return callback(err); } collection.find({flag:true,"$or" :[{user:{"$in":users}},{"content":skey}]}).sort({cdate: -1,comments:-1,ups:-1,downs:-1}).toArray(function(err,results){ db.close(); if (err) { return callback(err); } callback(null, results); }); }); }); };
ok,已经成功了,可以试试了。。。
下面来添加,精华功能
2、精华功能
首先打开header.ejs,修改精华的链接为:
<li><a href="/essence" title="24小时内评论最多">精华</a></li>
打开model下的mind.js,添加方法:
//精华 Mind.getEssence = function(callback) {/ mongodb.connect(settings.url,function (err, db) { if (err) { return callback(err); } db.collection('minds', function(err, collection) { if (err) { db.close(); return callback(err); } //限制只取20条 collection.find({flag :true}).limit(20).skip(0).sort({comments:-1,ups:-1,cdate: -1,downs:-1}).toArray(function(err,results){ db.close(); if (err) { return callback(err); } callback(null, results); }); }); }); };
这就是精华查找的内容,那么在routes/index.js中添加:
app.get('/essence', function (req, res) { Mind.getEssence(function(err, minds) { if (err) { req.flash('error', err); return res.redirect('/'); } res.render('index', { title : 'OMinds - 精华', minds : minds, user : req.session.user }); }); });
以上,就ok了,下面是截图效果:
搜索
精华
效果可能不是很明显~~~,好了赶快试试吧,
小站:http://oideas.herokuapp.com
教程演示地址:http://omind.herokuapp.com
教程代码地址:https://github.com/joveth/OMinds
QQ交流群:158325682
相关文章推荐
- 【Android开发】完善搜索功能-添加最近查询字段
- 【Android开发】完善搜索功能-添加最近查询字段
- 【Android开发】完善搜索功能-添加最近查询字段
- 完善easyui combobox自动搜索功能
- 用angular方法简单实现了吃了么搜索小功能,还不太完善,后续会继续添加新内容。
- Android开发丶一个较为完善的搜索界面,包含了热门标签,清除输入框,搜索结果列表等功能
- [thinkPHP5项目实战_29]前台首页和文章搜索功能完善
- 公告:CSDN博客频道自定义域名、标签搜索功能正式上线!
- Google 图片搜索提出颜色过滤功能
- RxJava(七) 使用debounce操作符 优化app搜索功能
- 关于搜索提示功能的实现
- ecmall完善配送方式添加功能
- 增强 WebSphere Service Registry and Repository 的搜索功能
- 完善Person页面的视图操作功能
- Flex精华摘要 2:基本MXML功能
- 用Ajax结合div来实现的查询控件(类似51job里面的职位搜索功能)
- 电脑XP系统搜索功能失效
- 看别人代码的时候有时候查看个关键字,但是liteide没有整个项目搜索的功能,就自己随便写了一个.
- jquery实现的类似百度搜索的输入框自动完成功能
- [thinkPHP5项目实战_30]留言板功能完善