本例子的关注和取消关注,是通过ajax的方法实现的;nodejs后台写好api接口;响应前台的ajax

先看ajax的代码实现:

 // 用户关注标签
function subscribe(uid, tid) {
if(!uid || uid.length === 0) window.location.href = '/signin'; var api = "/users/" + uid + "/tags/" + tid; $.post(api, function(data) {
var effect = 'animated bounceIn';
var btn = $("#subscribe-btn");
btn.addClass('active').html('已关注');
btn.addClass(effect);
btn.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
btn.removeClass(effect);
btn.attr('onclick', "unsubscribe('" + uid + "', '" + tid + "');");
});
});
} // 用户取消关注标签
function unsubscribe(uid, tid) {
var api = "/users/" + uid + "/tags/" + tid;
$.delete(api, function(data) {
var effect = 'animated bounceIn';
var btn = $("#subscribe-btn");
btn.removeClass('active').html("<span class='fa fa-plus'></span> 订阅");
btn.addClass(effect);
btn.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
btn.removeClass(effect);
btn.attr('onclick', "subscribe('" + uid + "', '" + tid + "');");
});
});
}

比较有技巧的地方是,在关注的时候发生了两件事:

1、向后台发送数据;

2、添加动画特效,

3、动画特效完成后回调,修改a标签的onclick属性,使其再次被点击时触发 取消关注 事件;

需要注意的是,关注和取消关注是通过a标签的onclick属性触发javascript函数的,行间事件;

还有一种是在href中触发;

后台api代码如下:

 /* 用户添加关注标签 */
router.post('/users/:id/tags/:tid', function(req, res) {
thenjs.parallel([
function(cb) {
User.findById(req.params.id).exec(function(err, me) { cb(err, me); });
},
function(cb) {
Tag.findById(req.params.tid).select('id').exec(function(err, tag) { cb(err, tag); });
}
]).then(function(error, results) {
var me = results[0];
var tag = results[1]; if(me && tag) {
if(!me.tags) me.tags = [];
me.tags.push(tag.id);
me.tags = _.unique(me.tags, function(t) { return t.id; });
me.save(function(err) {
res.json({error:err, tag: tag});
});
} else {
res.json({error:"not found user or tag"});
}
});
}); /* 用户取消关注标签 */
router.delete('/users/:id/tags/:tid', function(req, res) {
User.findById(req.params.id).exec(function(err, me) {
if(me) {
me.tags = _.remove(me.tags, function(t) { return t.id == req.params.tid});
me.save(function(err) {
res.json({error:err});
})
} else {
res.json({error:"not found user or tag"});
}
});
});

此段代码中用到了then.js;

并且好像有delete方法,$.delete是jquery ajax方法吗;

暂时搁置;去谷歌

找到了一篇文章:这篇文章提到了一句

http://www.cnblogs.com/tylerdonet/p/3520862.html

关于关注和取消关注的nodejs写法的更多相关文章

  1. python Sina微博自动转发带抽奖字样的微博,添加关注,取消关注

    项目地址:https://github.com/chengshuyi/SinaWeibo 具有的功能 转发带抽奖字样的微博并可以@相应数量的好友 提取关注并添加关注 取消关注 获取粉丝列表

  2. jQuery-ajax: 取消关注|关注

    ylbtech-jQuery-ajax: 取消关注|关注 1.A,jQuery-效果图返回顶部   1.B,jQuery-Source Code(源代码)返回顶部 <script src=&qu ...

  3. js-点击+加关注变成已关注,已关注状态时,鼠标滑动上的状态时取消关注

    效果: HTML: <div class="rightBtn cur">+关注</div> CSS: .rightBtn{ width: 80px; hei ...

  4. h5开发微信公众号重定向到关注页面没有关注按钮 (微信你个坑)

    搜索微信公众号是这样的 微信公众号重定向到关注页面没有关注按钮 如何微信公众号重定向到关注页面没有关注按钮,请看上篇笔记 无解,微信一直在封这种通过链接跳转到公众号关注页面的方法.只有放个二维码提示长 ...

  5. JQuery实现点击关注和取消功能

    点赞,网络用语,表示“赞同”.“喜爱”. 该网络语来源于网络社区的“赞”功能.送出和收获的赞的多少.赞的给予偏好等,在某种程度能反映出你是怎样的人以及处于何种状态.点赞的背后,反映出你自己.与之对应的 ...

  6. juqery 给本身的class加上一个class 或也可以实现关注商品,取消关注商品

    $("#goods1").on("click",".ICON-fen-LOVE",function(){ var $this = $(thi ...

  7. 微信公众平台开发教程Java版(六) 事件处理(菜单点击/关注/取消关注)

    https://blog.csdn.net/tuposky/article/details/40589325

  8. 判断是否关注了微信公众号 subscribe 0=未关注 1=已关注

    $appid=''; $secret=''; //微信网页授权获取openid $web_url='http://www.xxxx.com/shouquan.php'; if (!isset($_GE ...

  9. flask_关注者,联系人和好友

    在这节我们实现的功能比较复杂,就是实现用户"关注"和"取消关注"的功能. 一个用户可以关注多个其他的用户,一个用户也可以被其他多个用户所关注,这样看的话,在数据 ...

随机推荐

  1. 使用Python管理Azure(1):基础配置

    Azure提供了丰富的Python SDK来对Azure进行开发管理,包括使用Azure的开源框架在Azure上创建web应用程序,对Azure的虚拟机,存储等进行管理,本系类会简单介绍如何在ASM和 ...

  2. SQL Server数据库空间管理 (1)

    数据库经常遇到的问题: 1).数据库文件空间用尽  2).日志文件不停增长 3).数据库文件无法收缩  4).自动增长和自动收缩 本系列就以上面的4个问题入手分析并总结数据库空间的管理方法.   1. ...

  3. Qt5 基于TCP传输的发送/接收文件服务器(支持多客户端)

    一.实现功能 1.服务器端选择待发送的文件,可以是多个 2.开启服务器,支持多客户端接入,能够实时显示每个客户端接入状态 3.等待所有客户端都处于已连接状态时,依次发送文件集给每个客户端,显示每个客户 ...

  4. GPS功能:百度路书自定义【轨迹回放】

    如题所述:百度的编辑界面很直观,修改后就可以运行,地址:http://developer.baidu.com/map/jsdemo.htm#c2_8: 因为同事研究了一下午结果都没搞出来,他copy百 ...

  5. Makefile里调用Shell注意点

    http://www.linuxidc.com/Linux/2012-04/59093.htm 大家经常编写和使用Makefile, Makefile里面也经常用到shell, 但对其中一些需要注意的 ...

  6. magent编译安装及常见错误

    安装magent到/usr/local/下 cd /usr/local mkdir magent cd magent/ wget http://memagent.googlecode.com/file ...

  7. .NET与你若仅仅如初见(一)

    难忘初次见到你,那是一个夏日的午后,可是天空中乌云密布.大雨来临前的一段时间总是非常闷热的,当我朦胧的睡眼看到你之后瞬间就清醒了,感觉空气也凉爽了起来.尽管仅仅一眼但就是被你那清新脱俗沉鱼落雁之美所征 ...

  8. 《github一天一道算法题》:分治法求数组最大连续子序列和

    看书.思考.写代码. /*************************************** * copyright@hustyangju * blog: http://blog.csdn. ...

  9. 【枚举+小技巧】【TOJ4115】【Find the number】

    题目大意 找到一个最小的奇数 约数个数为n 结果mod10^9+7 根据 约数个数=(p1+1)*(p2+1)............ 将n 枚举分解成连乘式.(枚举个数,dfs) 比较大小 log ...

  10. 【Trie】【HDU1247】【Hat’s Wordsfd2】

    题目大意: hat's word 的定义是字典中 恰好由另外两个单词连接起来的单词 给你一本字典,问有多少个hat's word,(字典按字典序给出) 单词数50000.. 初步思路: 单词分为前缀单 ...