本例子的关注和取消关注,是通过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. Nginx 配置指令的执行顺序(二)

    我们前面已经知道,当 set 指令用在 location 配置块中时,都是在当前请求的 rewrite 阶段运行的.事实上,在此上下文中,ngx_rewrite 模块中的几乎全部指令,都运行在 rew ...

  2. 【写一个自己的js库】 4.完善跨浏览器事件操作

    1.阻止冒泡. function stopPropagation(event){ event = event || getEvent(event); if(event.stopPropagation) ...

  3. jquery 单击table行事件和radio的选中事件冲突

    原文地址:http://zhidao.baidu.com/link?url=HER7lu4jqejWUhWQO2nq6LZ6tf7vyhPZRADSL-xaBQSF4P4yftD9vg08Ss8HF- ...

  4. vmware重装系统后虚拟机实例文件*.vmdk重用

    如题:vmware重装系统后自定义的:虚拟机名称*.vmdk文件重用. 一.问题描述 系统磁盘坏道,装不上系统直接换了硬盘,但是新装的Vmware不能够通过open方式打开“自定义*.vmdk”(这个 ...

  5. they're hiring

    Gather Health ⋅ Careers Careers at Gather

  6. HDU 5785 Interesting

    题目: 大概说给一个字符串,找到其所有子串[i...k]满足它是由两个回文串拼成的,求Σi*k. 分析: 用val[1][i]表示以i结尾的回文串的起始位置的和val[0][i]表示以i起始的回文串的 ...

  7. NSRangeFromString(<#NSString * _Nonnull aString#>) 和rangeOfString

    NSRangeFromString NSString *str1 = @"abcdef"; NSString *str2 = @"1-105"; NSStrin ...

  8. oracle表导入导出

    数据导出: 1 将数据库TEST完全导出,用户名system 密码manager 导出到D:\daochu.dmp中   exp system/manager@TEST file=d:\daochu. ...

  9. codeforces 几道题目

    BZOJ挂了....明天就要出发去GDKOI了....不能弃疗. 于是在cf水了几道题, 写写详(jian)细(dan)题解, 攒攒RP, 希望GDKOI能好好发挥.......  620E. New ...

  10. 用SQL将查询出来的多列的值拼接成一个字符串【转载】

    MySQL中: [sql] view plaincopyprint? -- 单列拼接,先查出一行,再加上逗号,接着拼接 查出的下一行 select group_concat(E.SUPPORT) fr ...