apicloud点赞回显的实现

问题:

类似微博等app,点赞后的点赞按钮是彩色的,未点赞的按钮是黑白色的,本文写的就是实现这种效果

建表:

微博表

点赞表

html代码

<div class="" id="content">

</div>

需要引入js


<script type="text/javascript" src="../script/APICloud-rest-SHA1.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../script/doT.js"></script>

dot模板

<script id="articleTemp" type="text/x-dot-template">
    {{~it:value:index}}
    <div class="c1">
        {{= value.abstract}} {{if(value.isLike ){}} 已点赞 {{}else{}}未点赞{{}}}
    </div>
    {{~}}
</script>

js代码

//当前登录人id
var userId = '5b5fc1324ad8356a180bf13b';
    apiready = function() {
        query();
    };
//查询微博列表函数
    function query() {
    //查询weibo2表,查询id、概要、创建时间
        var client = new Resource("A6054550675047", "29AA8940-236F-7B30-FF84-2EC99D2C1524");
        var Model = client.Factory("weibo2");
        Model.query({
            filter: {
                fields: ["id", "abstract", "createdAt"],
                order: "createdAt DESC"
            }
        }, function(ret, err) {
            if (err) {
                //处理错误 err
                alert(JSON.stringify(err));
            } else {
                //处理数据 ret
                alert(JSON.stringify(ret));
                queryLike(ret);
            }
        })
    }
//处理点赞回显函数
    function queryLike(weiboArray) {
        var webiIdArray = [];
        for (var i = 0; i < weiboArray.length; i++) {
            webiIdArray[i] = weiboArray[i].id;
        }
        alert(webiIdArray);

        var client = new Resource("A6054550675047", "29AA8940-236F-7B30-FF84-2EC99D2C1524");
        var Model = client.Factory("weiboLikeDetail");
        Model.query({
            filter: {
                order: "createdAt DESC",
                "where": {
                    "and": [{
                        "weibo2": {
                            "inq": webiIdArray
                        }
                    }, {
                        "user": userId
                    }]
                }
            }
        }, function(ret, err) {
            if (err) {
                //处理错误 err
                alert(JSON.stringify(err));
            } else {
                //处理数据 ret
                alert(JSON.stringify(ret));
                for (var i = 0; i < weiboArray.length; i++) {
                    var weiboId = weiboArray[i].id;
                    for (var j = 0; j < ret.length; j++) {
                        var weibo2Id = ret[j].weibo2;
                        //alert(weiboId+"-"+weibo2Id);
                        if (weiboId == weibo2Id) {
                            weiboArray[i]["isLike"] = true;
                        }
                    }
                }
            }
            alert(JSON.stringify(weiboArray));

            //编译模版
            var interation = doT.template($('#articleTemp').html());
            //将数据显示到网页中
            $('#content').html(interation(weiboArray));
        })

    }

原文出处:https://malaoshi.top/show_1EF1gdZMax4T.html