签到系统、评价系统、后台审核系统前后端接口实现总结

1、签到系统

实现点击签到，用户账户金币值更新，同时按钮变灰，今天不能再签到，第二天可以再次签到。

 /*设置页面顶部点击事件*/
    function clickEvent() {
        /*点击头像*/
        $(".personal-main-top-user .personal-main-top-user-img").off("click").on("click", function() {
            var id = $(this).attr("user-id");
            location.href = "user-show.html?id=" + id;
        });
        // 点击签到
       $(".btn").click(function () {
           var userId = $(".personal-main-top-user-img").attr("user-id");
            $.get(ServerUrl + "my/signIn/" + userId, function(datas) {
                if (datas.status == Status.Status_OK) {
                    $.alert("签到成功", function(){
                        $.get(ServerUrl + "my/user", function (datas) {
                            if (datas.status == Status.Status_OK) {
                                $.toast("数据获取成功");
                                // 展示个人资料界面
                                initUserInfoAtCenter(datas.data);
                            } else {
                                $.toast("数据获取错误");
                            }
                        });
                    });
                };
            });
        });    

请求个人中心页面接口后台返回的数据及格式如下：

点击签到，先获取用户Id，然后请求后台签到接口，并把用户id传给后台。签到成功后，请求用户数据接口。

获取成功以后，会重新调用UserInfoAtCenter（）函数，重新加载个人中心处的信息。

请求签到接口http://timeseller.fantasy512.cn/ddh/my/signIn/173

格式及内容如下：

{"status":1,"data":null}

状态为1，代表今天未签到。状态为0，代表今天已签到。 

function initUserInfoAtCenter(datas) {
        $("#user_golds").text(datas[0].goldCoins);//重新请求金币数
        $(".personal-main-top-user-img img").attr("src", datas[0].headimgurl);//加载用户微信头像
        $(".personal-main-top-user-img").attr("user-id", datas[0].uid);//给用户头像元素的user-id属性设置为datas[0].uid
        $("#user-name").text(datas[0].nickname);//加载微信名称
        if (datas[0].sex == "女") {
            $(".personal-main-top-username img").attr("src", "../img/personCenter/gender-girl.png")
        }
        $("#user-school").text(datas[1].schoolName);//获取学校名称
        $("#user-school").attr("school-id", datas[1].schoolId);//给用户学校元素的school-id属性设置为datas[1].schoolId
//datas[2]存放签到状态，今天未签到，按钮为黄色，如果已经签到则按钮变为灰色
         if (datas[2]) {
                $(".btn").attr("class", "btn true");
                //再获取一次数据
            }else{
                $(".btn").attr("class", "btn false");
        }
    }

 2、评价系统

主要是当前用户在个人中心，点击我的任务，右边三个点会对此任务进行评价，进入评价页面。评价完成后，被评价人的信息展示页面会出现别人给她发出的任务的评价。

在此页面提交信息后，把数据提交给后台。

   //获取用户id
    var taskId = getSearchValue(location.search, "tid");
    //获取用户id
    var userId = getSearchValue(location.search, "uid");
function submit_form() {
        /* 提交评论*/
        $("#comment-submit").click(function() {
            /*获取并组装表单项*/
            var datas = {
                tid: taskId,
                commentGrade: ($("#comment-grade").val() * 2), //数据库分数范围1-10
                commentContent: $("#comment-describe").val(),
                commentType: comType
            };
            /*检查表单项*/
            /*如果没有选择评分，不能发表评论*/
            if ("undefined" == typeof($("#comment-grade").val())) {
                alert("请选择评分星数");
            } else {
                /*上传服务器*/
                $.confirm("确定提交评价吗？", function() {
                    uploadCommentData(datas);
                });
            }

        });
}
 // 提交评价表单
    function uploadCommentData(datas) {
        $.showLoading("评价提交中");
        $.post(ServerUrl + "comment/comment/" + taskId, datas, function(data) {
            $.hideLoading();
            if (data.status == Status.Status_OK) {
                $.alert("评价成功", function() {
                    location.href = ServerUrl + "web/wechat/view/personCenter.html";
                });
            } else {
                $.alert("啊哦~评价失败", function() {

                });
            }
        });
    }

填好评价表单，点击提交，组装好填的数据，提交给后台，接口为://timeseller.fantasy512.cn/ddh/comment/comment/173

接下来在用户信息展示页面，展示这条别人给他的评价。

<div class="weui-cell">
            <div  id="comments" contenteditable="true">
                <div id="content" contenteditable="false">
                    <div class="hd">
                        <img class="headimgurl" src="">
                        <div class="name"></div>
                        <div class="count"></div>
                    </div>
                    <div class="usercomment"></div>
                    <div class="time"></div>
                </div>
            </div>
        </div>

js代码如下：

// 展示个人数据
    function showUserInfo(datas) {
        // 判断访问页面者的是否为本人
        $.get(ServerUrl + "my/user", function(mydatas) {
            if (mydatas.status == Status.Status_OK) {
                if (datas[0].openid == mydatas.data[0].openid) {
                    init_show_data(datas, 1);
                } else {
                    init_show_data(datas, 0);
                }
            } else {
                $.toast("数据获取错误");
            }
        });

        var uid = datas[0].uid;
        $.get(ServerUrl + "comment/getComments/" + uid, function(mydatas) {//请求接口 ，需要分数和评论内容
            if (mydatas.status == Status.Status_OK) {
                //组装评论的数据
                var datas=mydatas.data;
                var comments=$("#comments");
                for(i=0;i<datas.length;i++){
                    buildComment(datas[i]);
                }
            } else if (mydatas.status == Status.Status_NULL_Result) {
                //评论为空，需要设置

            } else {
                $.toast("数据获取错误");
            }

        });
    }
    function buildComment(data){
        var $html = $("#content");
        $html.find(".headimgurl").attr("src", data.headimgurl); //获取评论者头像
        $html.find(".name").text(data.nickname);//获取评论者昵称
        $html.find(".count").text(data.commentGrade);//取得分数
        $html.find(".usercomment").text(data.commentContent);//取得评论
        $html.find(".time").text(data.commentDate);//取得评论者评论的时间
    }

 后台写接口，其实是在进行数据库操作，不断地根据逻辑增、删、改、查。

提交评价时，请求后台接口，提交用户Id，用户评论分数、评论内容。后台会根据用户Id查表。表里会有当前用户的头像和昵称。

头像和昵称是用户注册时就存储了，只需要根据id查找。

获取评论数据时，请求接口，这时后台写接口用了两个数据表，用户信息表和评论信息表。

相当于两个表合并差信息。然后返回所有数据给前端。

3、后台审核系统

<div class="content">
        <ul class="u-table">
            <li>用户ID</li>
            <li>上传一卡通图片</li>
            <li>操作</li>
        </ul>
            <ul id="task-list">
            </ul>
</div>

js代码

function init() {
        //获取用户Id以及用户对应的图片
        $.get("http://timeseller.fantasy512.cn/ddh/check/getAllImage", function (datas) {
            //如果请求成功，flag状态改变，按钮内容改变
            if (datas.status == 1) {
                var taskData = datas.data;
                var $goods = $("#task-list");
                //   console.log(taskData);
                for (var i = 0; i < taskData.length; i++) {
                    /*需要将数据传给build()*/
                    var item = build(taskData[i]);
                    $goods.append(item);
                    (function (i) {
                        $(".flag:eq(" + i + ") .btn").click(function () {
                            //如果请求成功，flag状态改变，按钮内容改变
                            var id = taskData[i - 1].uid;
                            var data = {
                                uid: id,
                                flag: 1
                            };
                            $.post("http://timeseller.fantasy512.cn/ddh/check/setImageFlag1", data, function (datas) {
                                if (datas.status == 1) {
                                    $(".flag:eq(" + i + ")").html("审核通过");
                                    $(".flag:eq(" + i + ") .btn").hide();
                                }
                            })
                        });
                        $(".flag:eq(" + i + ") .btn1").click(function () {
                            $(".flag").eq(i).html("审核未通过");
                        });
                    })(i + 1);
                }
            }
        }) ;
        function build(datas) {
            /*对data进行处理*/
            var $html = $("#task");
            if ( datas.length != 0 ) {
                $html.find(".u-id").text(datas.uid);
                var imgurl = "http://timeseller.fantasy512.cn/ddh/" + datas.card ;
                $html.find(".u-img img").attr("src", imgurl);
                $html.find(".btn").attr("id", "btn" + datas.uid);
                $html.find(".btn1").attr("id", "btn1" + datas.uid);
                $html.find(".flag").attr("id", "flag" + datas.uid);
            }
            return $html.html();
        }
$("#task-list").on("click", ".btn1", function (e) {
            //如果请求成功，flag状态改变，按钮内容改变
            var id = e.target.id.substring(4, e.target.id.length);

            var data = {
                uid: id,
                flag: 2
            };
            //把用户id传给后台，后台改变flag状态----与用户是否可以发布任务相关
            $.post("http://timeseller.fantasy512.cn/ddh/check/setImageFlag1", data, function (datas) {
                if (datas.status == 1) {
                    $("#flag" + id).html("审核未通过");
                    $("#btn" + id).hide();
                } else {
                    alert("false");
                }
            })
        })
}
});

此接口，http://timeseller.fantasy512.cn/ddh/check/getAllImage是请求所有未被审核的一卡通图片

后台返回的数据如下

datas.status=1为没有进行审核的图片。

请求这个接口http://timeseller.fantasy512.cn/ddh/check/setImageFlag1是为了给后台发送请求状态，是审核通过还是未通过。

运行流程：

先获取用户ID，和图片。然后将获取到的用户ID，组装成data，在用post提交到后台接口，来管理审核通过与否

var id = taskData[i - 1].uid;
           var data = {
                uid: id,
                flag: 1
               };

flag 用来标记审核状态。flag为1表示未审核，点击未通过按钮，则改变flag状态为2。