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

    坚持下去就能成功
  • 相关阅读:
    19. 删除链表的倒数第 N 个结点
    相交链表
    环形链表2
    环形链表
    K8s 网络通讯
    Hutool-二维码生成
    Hutool-加解密
    Hutool-解析JSON
    Hutool-读取配置文件中的配置
    Hutool-操作图片
  • 原文地址:https://www.cnblogs.com/suoking/p/4863404.html
Copyright © 2011-2022 走看看