NLifeBill第四章添加页面

这一节主要记录添加页面的功能，其实在做这个添加页面浪费了我不少时间，因为这个里面我遇到了几个问题，不过最后都一一解决了。

 

阅读目录：

　　1.主要问题
　　2.解决第一个问题：Tags分类显示
　　3.解决第二个问题：使用事务
　　4.前端angularjs处理

 

主要问题

这做添加页面的时候遇到的第一个问题是tags分类显示的问题，问题描述如下：

id       name       pid
1        AA           0
2        BB           0
3        CC           0
4        DD           1
5        EE            1
6        FF             3
7        GG            2
8        HH            3
9        II              2
.................
这个是表结构，总共也就几十条数据。

因为mysql不支持迭代查询sql,所以数据读出来之后是没有分类的，所以这个地方分类要我自己处理。

我遇到的第二个问题就是我在添加数据的时候是一次添加多笔数据，也就是要批量处理，其实批量处理也还好，主要是我想使用事务，而nodejs这方面有关mysql使用事务的资料却不多，我也是瞎子摸象。

  

解决第一个问题：Tags分类显示

这个问题我在上面已经描述过了，我显示出来的效果是这样的：

因为前端是使用angularjs，那么对数据的格式多少是有点要求的，所以我要把数据库里面读出来的列表转为一个数组，然后数组里面每个分类又是一个数组，大分类在数组的第一个位置，如这样：

[
    [object1, object2, object3......],            //这里第一个object是衣
    [object4, object5, object6............],      //这里的第一个object是食
    [object4, object5, object6............],
    ................
]

我的做法是双层循环，拿第一个对象和后面的每个对象比较，如果自己的pid和别的pid相同并且pid不等于0的就是同一类，然后把找到的对象放到一个临时数组中并且做个标记，如果是自己的pid和别的id相同的，就说明这个是父类然后放到临时数组的第一个位置并且也做个标记。当内层循环第一次循环完之后，把整个临时数组都放到一个外围定义的数组里面然后就就开始做清除处理，把所有标记的对象都清除掉那么剩余的就是接下来其他的分类，然后再次进入循环。代码如下：

//temp就是数据库中读出的数组列表对象
function changeTags(temp){
    //存放结果的数组
    var arr = new Array();

    //外围循环控制数组数量
    for(var i=0, x=0;i<temp.length;i++){

        //临时数组存放每个单个数组项
        var temparr = new Array();

        //查找相同对象并且标记
        for(var j=x+1;j<temp.length;j++){

            //如果是父类就放到第一个位置
            if(temp[x].pid == temp[j].id){
                temparr.unshift(temp[j]);

                //标记这个项是处理过的
                temp[j].mark = 'D';
            }

            
            //如果是子类就放第一个的后面
            if(temp[x].pid == temp[j].pid && temp[j].pid != 0){
                temparr[temparr.length] = temp[j];

                temp[j].mark = 'D';
            }

            //本身也要放进数组
            if(j == temp.length-1){
                temparr[temparr.length] = temp[x];

                temp[x].mark = 'D';
            }
        }

        //查找到的结果放到结果数组里
        arr[arr.length] = temparr;

        //清除标记的对象
        for(var z=0, k=0;z<temp.length;z++){
            //判断前一个是否已经删除
            if(k==0){
                z=0;
            }

            //如果是标记过的就删除
            if(temp[z].mark == 'D'){
                //这里没有多余，这个属性也用不着
                delete temp[z].mark;

                //清除标记过的项
                temp.splice(z, 1);

                //归零，方便下次从0开始
                k=0;

                //继续操作
                continue;
            }else{
                //如果没有标记就累加，用于跳过
                k++;
            }
        }
    }

    return arr;
}

  

解决第二个问题：使用事务

第二个问题是批量处理的时候使用事务，这样可以保持数据的一致性。效果如下：

像这种一次就有3个分类的时候就要批量添加数据了，使用事务可以保持数据一致。最开始的时候我使用的是一个mysql事务库--》mysql-queues但是我配置好之后却一致没有办法成功，后来我又在node-mysql中看到另外一种方式处理事务，地址。我配置这种之后也还是一直不成功，不能说不成功，只能说成功了一半，以为它卡在第一次保存数据的地方之后就退不出来了，大概需要几分钟吧然后下面的程序也不执行，后来没有办法我又再次回头用第一种办法，结果发现我第一种办法是方式没有处理对，后来修改了下代码就正常了，下面是处理代码：

Bills.addBills = function(master, details, callback){
    //从连接池中获取一个连接
    db.getConnection(function(err, connection) {

        queues(connection, config.mysql_queues_debug);

        //开启事务
        var trans = connection.startTransaction();

        //拼接主档sql
        var sql = "insert into billmaster(years, months, days, revenue, outlay, addtime, userid) values(?, ?, ?, ?, ?, now(), 1)";
        var inserts = [master.years, master.months, master.days, master.revenue, master.outlay];
        sql = connection.format(sql, inserts);

        //先插入主档
        trans.query(sql, function(err, info) {
            if(err){
                //callback(err, null);
                trans.rollback();
            }else{
                //trans.commit();
            }
        });

        //查询主档ID
        var cql = "(select id from billmaster where years=? and months=? and days=?)";
        var csert = [master.years, master.months, master.days];
        cql = connection.format(cql, csert);

        for(var i=0;i<details.length;i++){
            (function(detail, index, leng){
                
                var dql = "insert into billdetail(masterid, tagid, price, notes, addtime) values("+cql+", ?, ?, ?, now())";
                var dsert = [detail.tagid, detail.price, detail.notes];
                dql = connection.format(dql, dsert);

                //插入明细档
                trans.query(dql, function(err, info) {
                    if(err){
                        //callback(err, null);
                        trans.rollback();
                    }else{
                        //如果是最后一次就提交事务断开连接
                        if(index == leng-1){
                            trans.commit(function(err, infos){

                                callback(null, info);
                                connection.release();        //使用完之后断开连接，放回连接池
                            });
                        }
                        //
                    }
                });
            })(details[i], i, details.length);
        }

        //提交执行
        trans.execute();
    });
};

  

前端angularjs处理

整个数据的整理基本都是在前端的angularjs处理的，所以看整个项目的代码前端的代码是多余后端的。添加页面的流程是，当用户点击分类的时候如果是小分类就可以在输入框中输入数据失去焦点事件之后就会记录在输入框下面，如果点击的是大分类就会提示用户不能输入。当当天的账记录完之后点击添加入账就会记录到数据库，整个添加页面是一个controller，下面是整个addcontroller的代码：

//添加分部视图的控制器
app.controller('addctrl', ['$scope', '$http', '$routeParams', '$location', function($scope, $http, $routeParams, $location){
    var params = {
        year: $routeParams.year,
        month: $routeParams.month,
        day: $routeParams.day
    };

    $scope.params = params;

    var cont = {
        result: [],            //用户存储添加的信息
        ashow: false,        //用于控制添加按钮是否显示
        inkey:[]            //用于存放时收入的分类
    };

    $scope.cont = cont;

    //从服务器获取所有类别事件
    $http.get('/getTags').success(function(data, status, headers, config){
        $scope.tags = data.tag;

        //因为传过来的数据时数组套数组对象
        for(var i=0;i<data.tag.length;i++){
            var obj = data.tag[i];
            //内层数组循环
            for(var j=0;j<obj.length;j++){
                //如果类型是进账行就保存下来
                if(obj[j].tagtype == 'I'){
                    cont.inkey.push(obj[j].tagname);
                }
            }
        }
    });

    //点击类别事件
    $scope.show = function(name){
        //判断是否有几个大分类，大分类不计入
        if (name == '衣' || name == '食' || name == '它' || name == '住' || name == '行'){
            cont.error = "你所点击分类：'" + name + "' 不支持入账；";
            cont.eshow = true;        //错误信息框打开
        }else{
            cont.tagname = name;
            cont.eshow = false;        //错误信息框关闭

            //循环判断是否是新的分类
            for(var i=0, k=0;i<cont.result.length;i++){
                if(cont.result[i].name == name){
                    cont.scontent = cont.result[i].value;
                    break;
                }else{
                    k++;
                }
            }

            //如果是新的分类就清空输入框
            if(k == cont.result.length){
                cont.scontent = "";
            }
        }
    };

    //输入框失去焦点事件
    $scope.blur = function(){
        //1.0.7版本的blur不行的

        var content = $scope.cont.scontent;

        var val = content.replace(/,/g, ";").replace(/；/g, ";").replace(/，/g, ";").replace(/：/g, ":");

        //计算输入框中的总额
        if(val.length > 0 && val != null && cont.tagname != null){

            var s = val;
            var reg = /[+-]?\d+\.?\d*/g;
            var sum = 0.0;
            var expr;
            var numbers = s.match(reg);
            if (numbers != null) {
                for (v in numbers) {
                    if (v == 0)
                        expr = numbers[v];
                    else
                        expr += '+' + numbers[v];

                    sum += parseFloat(numbers[v]);
                }
            }

            var resulttype = 'O';

            //判断记账类型
            for(var i =0;i<cont.inkey.length;i++){
                if(cont.tagname == cont.inkey[i]){
                    resulttype = 'I';
                    break;
                }
            }

            //判断是否是第一次
            if(cont.result.length == 0){
                cont.result[cont.result.length] = { name: cont.tagname, value: val, total: sum, type: resulttype };
            }else{
                //循环判断是否这个新增的tag是否已经存在
                for(var i=0, k=0;i<cont.result.length;i++){
                    if(cont.result[i].name == cont.tagname){
                        cont.result.splice(i, 1, { name: cont.tagname, value: val, total: sum, type: resulttype });
                        break;
                    }else{
                        k++;
                    }
                }

                //如果是新的分类就添加
                if(k == cont.result.length){
                    cont.result[cont.result.length] = { name: cont.tagname, value: val, total: sum, type: resulttype };
                }
            }

        }
    };

    //提交方法
    $scope.submit = function(){
        var total = sum();

        //拼接主档
        var master = {
            years: params.year,
            months: params.month,
            days: params.day,
            revenue: total.iTotal,
            outlay: total.oTotal
        };

        //明细档
        var details = [];
        //cont.result

        var temptags = new Array();

        //循环拼接明细档
        var tags = $scope.tags;
        for(var i=0;i<tags.length;i++){
            var tag = tags[i];
            for(var j=0;j<tag.length;j++){
                temptags[temptags.length] = tag[j];
            }
        }

        //循环存储起来的数组
        for(var i=0;i<cont.result.length;i++){
            //{ name: cont.tagname, value: val, total: sum, type: resulttype };
            var temp = cont.result[i];

            for(var j=0;j<temptags.length;j++){
                if(temp.name == temptags[j].tagname){
                    details[details.length] = {
                        tagid: temptags[j].id,
                        price: temp.total,
                        notes: temp.value
                    };
                }
            }
        }

        var data = {master: master, details: details};

        //把数据写入到数据库
        $http.post('/addBill', data).success(function(data, status, headers, config){
            window.alert('添加成功');
            $location.path('/');
        });

    };
    
    //监视添加的账单的总额
    $scope.$watch(function(){
        var total = sum();

        if(total.iTotal > 0 || total.oTotal > 0){
            cont.ashow = true;
        }else{
            cont.ashow = false;
        }
        
        cont.total = '总进账: ' + total.iTotal + ' 总出账: ' + total.oTotal;
    });

    //计算总额
    function sum(){
        var total = {
            iTotal: 0,
            oTotal: 0
        };
        var arr = $scope.cont.result;
        for(var i=0;i<arr.length;i++){
            if(arr[i].type == 'I'){
                total.iTotal += arr[i].total;
            }else{
                total.oTotal += arr[i].total;
            }
        }
        return total;
    }

}]);

基本上大部分的业务逻辑都在客户端。