A-Webkit第五章：添加成绩

这一章主要记录添加学生的成绩。

1.修改sco.html

首先要修改sco.html文件，添加成绩都会在这里面添加，修改代码如下：

  <div class="ctrl" ng-controller="ScoCtrl">

      <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">学生，科目信息</div>
      <div class="panel-body">
        学生：
        <span class="list-stu" ng-repeat="stu in stus">
            <button type="button" ng-click='shows(stu.name)' class="btn btn-primary btn-sm">{{ stu.name }}</button>
        </span>

        <p/>
        科目：
        <span class="list-stu" ng-repeat="cla in clas">
            <button type="button" ng-click='showc(cla.name)' class="btn btn-info btn-sm">{{ cla.name }}</button>
        </span>
      </div>
    </div>

    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">添加分数信息</div>
      <div class="panel-body">

        <div class="col-xs-2">
            <input type="text" ng-model="stuname" class="form-control" placeholder="学生">
        </div>

        <div class="col-xs-2">
            <input type="text" ng-model="claname" class="form-control" placeholder="科目">
        </div>
        <div class="col-xs-2">
            <input type="text" ng-model="score" class="form-control" placeholder="分数">
        </div>
        <div class="col-xs-2">
            <button type="button" class="btn btn-primary" ng-click="addlist()">添加</button>
        </div>
        <div class="col-xs-1">
            <button type="button" class="btn btn-primary" ng-click="submit()">添加入库</button>
        </div>
      </div>

      <!-- Table -->
      <table class="table table-hover">
        <tr>
            <td>编号</td>
            <td>学生</td>
            <td>科目</td>
            <td>分数</td>
        </tr>
        <tr ng-repeat="sco in scores">
            <td>{{ $index+1 }}</td>
            <td>{{ sco.stuname }}</td>
            <td>{{ sco.claname }}</td>
            <td>{{ sco.score }}</td>
        </tr>
      </table>
    </div>
  </div>

在sco.html文件都做了写什么，点击学生名称选择学生，点击科目选择科目，输入分数，放到暂存列表中，在保存到数据库。

2.新增class.js文件

在model下新增class.js文件，此文件主要负责读取数据库中的class信息。代码如下：

var db = require('./db');

var Class = {};

module.exports = Class;


/**
 * 查询所有学生列表
 * Callback:
 * - err, 数据库错误
 * @param {Function} callback 回调函数
 */
Class.getClass = function(callback){

    //从连接池中获取一个连接
    db.getConnection(function(err, connection) {

      //查询
      connection.query("select id, name from class", function(err, classes) {
        if (err){
          callback(err, null);
        }

        callback(null, classes);

        connection.release();        //使用完之后断开连接，放回连接池
      });
    });
};

此处的代码都很好理解就不多叙述。

3.添加score.js

在model文件夹下添加score.js文件，此文件就要负责添加用户成绩到数据库，读取用户成绩等等。代码如下：

var queues = require('mysql-queues');
var db = require('./db');

var Score = {};

module.exports = Score;


/**
 * 添加成绩信息
 * Callback:
 * - err, 数据库错误
 * @param {string} scores 用户成绩对象
 * @param {Function} callback 回调函数
 */
Score.addScore = function(scores, callback){
    //从连接池中获取一个连接
    db.getConnection(function(err, connection) {

        //关闭调试
        queues(connection, false);

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

        //循环添加
        for(var i=0;i<scores.length;i++){
            (function(score, index, leng){
                
                var sql = "insert into score(uid, cid, score) values((select id from users where name=?), (select id from class where name=?), ?)";
                var inserts = [score.stuname, score.claname, score.score];
                sql = connection.format(sql, inserts);

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

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

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

这里要提下这句代码：“var queues = require('mysql-queues');”。这个库主要是负责处理事务的，因为是要循环写入数据，所以使用事务会好点。

4.修改controller.js中ScoCtrl控制器代码

修改controller.js中ScoCtrl代码，首先要读取学生和科目信息，点击学生和科目然后在输入分数，添加数据会被暂存起来，当点击添加添加入库之后数据才会被写入到数据库。代码如下：

//读取学生
    Users.getStuList(function(err, stus){
        $scope.stus = stus;

        $scope.$apply();
    });

    //读取科目
    Class.getClass(function(err, classes){
        $scope.clas = classes;
    });

    //选择学生
    $scope.shows = function(name){
        $scope.stuname = name;
    };

    //选择科目
    $scope.showc = function(name){
        $scope.claname = name;
    };
    
    var scores = [];
    //暂存数据
    $scope.addlist = function(){
        if($scope.stuname != null && $scope.claname != null && $scope.score != null){
            scores[scores.length] = {
                stuname: $scope.stuname,
                claname: $scope.claname,
                score: $scope.score
            };

            $scope.scores = scores;
        }
    };

    //添加数据库到数据库
    $scope.submit = function(){
        if(scores.length > 0){
            Score.addScore(scores, function(err, info){
                //清空数组
                scores.length = 0;
                $scope.stuname = "";
                $scope.claname = "";
                $scope.score = "";
                $scope.$apply();
            });
        }
    };

到这里整个项目的目录如下：

运行下项目登录进入，效果如下：

到此添加学生成绩的功能就算完成了。下一章会记录学生成绩图标的功能。