zoukankan      html  css  js  c++  java
  • 关于关注和取消关注的nodejs写法

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

    先看ajax的代码实现:

     1 // 用户关注标签
     2 function subscribe(uid, tid) {
     3   if(!uid || uid.length === 0) window.location.href = '/signin';
     4 
     5   var api = "/users/" + uid + "/tags/" + tid;
     6 
     7   $.post(api, function(data) {
     8     var effect = 'animated bounceIn';
     9     var btn = $("#subscribe-btn");
    10     btn.addClass('active').html('已关注');
    11     btn.addClass(effect);
    12     btn.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    13       btn.removeClass(effect);
    14       btn.attr('onclick', "unsubscribe('" + uid + "', '" + tid + "');");
    15     });
    16   });
    17 }
    18 
    19 // 用户取消关注标签
    20 function unsubscribe(uid, tid) {
    21   var api = "/users/" + uid + "/tags/" + tid;
    22   $.delete(api, function(data) {
    23     var effect = 'animated bounceIn';
    24     var btn = $("#subscribe-btn");
    25     btn.removeClass('active').html("<span class='fa fa-plus'></span> 订阅");
    26     btn.addClass(effect);
    27     btn.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    28       btn.removeClass(effect);
    29       btn.attr('onclick', "subscribe('" + uid + "', '" + tid + "');");
    30     });
    31   });
    32 }

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

    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

    坚持下去就能成功
  • 相关阅读:
    无法重用Linq2Entity Query
    The Joel Test
    MSBuilder directly instead of default VSComplie with keyborad shotcut 原创
    客户端缓存(Client Cache)
    关于代码重构和UT的一些想法,求砖头
    ExtJS2.0实用简明教程 应用ExtJS
    Perl information,doc,module document and FAQ.
    使用 ConTest 进行多线程单元测试 为什么并行测试很困难以及如何使用 ConTest 辅助测试
    史上最简单的Hibernate入门简介
    汽车常识全面介绍 传动系统
  • 原文地址:https://www.cnblogs.com/suoking/p/4863404.html
Copyright © 2011-2022 走看看