A-Webkit第四章：添加学生

浏览数：31 / 时间：2015年06月09日

上一章学习了登录，这一章主要记录添加学生信息。这一章会有很多的内容。下面我们来一步一步的实现它。

1.修改main.html

首先我们修改main.html,代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>a-webkit demo</title>
 5     <meta charset="UTF-8" />
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <link rel="stylesheet" href="../public/css/bootstrap.min.css" />
 8     <link rel="stylesheet" href="../public/css/main.css" />
 9     <script src="../public/js/jquery-1.9.1.min.js"></script>
10     <script src="../public/js/bootstrap.min.js"></script>
11     <script src="../public/js/angular/angular.min.js"></script>
12     <script src="../public/js/angular/angular-route.min.js"></script>
13     <script src="../routes/controller.js"></script>
14   </head>
15   <body>
16 
17     <div class="main_cont" ng-app=‘wapp‘>
18       <div class="well">
19         <ul class="nav nav-pills nav-stacked">
20           <li><a href="#/stu">添加学生</a></li>
21           <li><a href="#/sco">添加成绩</a></li>
22           <li><a href="#/rep">成绩图表</a></li>
23         </ul>
24       </div>
25 
26       <div class="main_cont_right" ng-view>
27         
28       </div>
29     </div>
30 
31   </body>
32 </html>

修完完main.html之后你可能会发现，我添加了一个main.css文件(此文件内容请直接在github中查看这里就不叙述了)和几个js文件。

angular.min.js：文件在/public/js/angular/下，因为要使用angualrjs所以这里要引入。整个项目名称A开头就是Angularjs的意思
angular-route.min.js：从angularjs1.2*版本之后路由相关功能就移出为单个文件了，所以要单独引入，文件在：/public/js/angular/
controller.js：在/routes/下的controller.js文件不难理解，就是编写angularjs相关代码的，之所以放在routes下，是因为在webkit中其实是没有严格的前端和后端的。

2.添加分部视图

因为使用路由控制不同的视图文件，那么我们在view文件夹里面添加三个视图文件，如：

stu.html,代码如下：

1   <div ng-controller="StuCtrl">
2     StuCtrl
3   </div>

sco.html,代码如下：

1   <div ng-controller="ScoCtrl">
2     ScoCtrl
3   </div>

rep.html，代码如下：

  <div ng-controller="RepCtrl">
    RepCtrl
  </div>

3.修改controller.js

在controller.js中添加路由控制代码，代码如下：

 1 global._$ = jQuery;
 2 
 3 var app = angular.module(‘wapp‘, [‘ngRoute‘]);
 4 
 5 //配置路由
 6 app.config([‘$routeProvider‘, function($routeProvider){
 7     //定义路由
 8     $routeProvider
 9         .when(‘/‘, { templateUrl: ‘../view/stu.html‘, controller: ‘StuCtrl‘ })
10         .when(‘/stu‘, { templateUrl: ‘../view/stu.html‘, controller: ‘StuCtrl‘ })
11         .when(‘/sco‘, { templateUrl: ‘../view/sco.html‘, controller: ‘ScoCtrl‘ })
12         .when(‘/rep‘, { templateUrl: ‘../view/rep.html‘, controller: ‘RepCtrl‘ })
13         .otherwise({ redirectTo: ‘/‘ });
14 
15 }]);
16 
17 //添加学生控制器
18 app.controller(‘StuCtrl‘, [‘$scope‘, function($scope){
19 
20 }]);
21 
22 //添加分数控制器
23 app.controller(‘ScoCtrl‘, [‘$scope‘, function($scope){
24 
25 }]);
26 
27 //图表控制器
28 app.controller(‘RepCtrl‘, [‘$scope‘, function($scope){
29 
30 }]);

大家可能注意到了这句代码：“global._$ = jQuery;”。这句代码的作用是方便使用jquery把jquery改个别名。一面$使用冲突。

到这里的时候基本整体的架子就基本搭建好了，项目目录如下：

运行项目：

1 F:\webkit>nw F:\github\a-webkit\app

运行登录之后的效果如：

到这里我可以说你已经成功了！你应该对自己说声：我很棒！！！！哈哈哈。

4.修改users.js代码

这里我们在users.js文件里面新增两个方法，一个是添加用户的方法，一个是查询所有用户的方法。代码如下：

 1 /**
 2  * 添加学生信息
 3  * Callback:
 4  * - err, 数据库错误
 5  * @param {string} name 学生信息
 6  * @param {Function} callback 回调函数
 7  */
 8 Users.addStu = function(name, callback){
 9 
10     //从连接池中获取一个连接
11     db.getConnection(function(err, connection) {
12 
13       //拼接sql,数据库里面的login和pswd可以为空，学生不能登录
14       var sql = "insert into users(name, type) values(?, ‘S‘)";
15       var inserts = [name];
16       sql = connection.format(sql, inserts);
17 
18       //添加
19       connection.query(sql, function(err, info) {
20         if (err){
21           callback(err, null);
22         }
23 
24         callback(null, info);
25 
26         connection.release();        //使用完之后断开连接，放回连接池
27       });
28     });
29 };
30 
31 
32 /**
33  * 查询所有学生列表
34  * Callback:
35  * - err, 数据库错误
36  * @param {Function} callback 回调函数
37  */
38 Users.getStuList = function(callback){
39 
40     //从连接池中获取一个连接
41     db.getConnection(function(err, connection) {
42 
43       //查询
44       connection.query("select id, name from users where type=‘S‘", function(err, stus) {
45         if (err){
46           callback(err, null);
47         }
48 
49         callback(null, stus);
50 
51         connection.release();        //使用完之后断开连接，放回连接池
52       });
53     });
54 };

到这里我们添加学生和查询学生列表的方法就算完成了，接下来我们要真正的实现添加学生和显示学生了，

5.修改stu.html文件

既然要添加和显示学生，那么首先我们要修改stu.html文件。代码如下：

 1   <div class="ctrl" ng-controller="StuCtrl">
 2     
 3       <div class="panel panel-success">
 4       <div class="panel-heading">添加学生</div>
 5       <div class="panel-body">
 6         <div class="col-xs-6">
 7             <input type="text" ng-model="name" class="form-control" placeholder="学生名称">
 8         </div>
 9         <div class="col-xs-1">
10             <button type="button" class="btn btn-primary" ng-click="submit()">添加</button>
11         </div>
12       </div>
13     </div>
14 
15     <div class="panel panel-success">
16       <div class="panel-heading">学生列表</div>
17       <div class="panel-body">
18         <span class="list-stu" ng-repeat="stu in stus">
19             <button type="button" class="btn btn-primary btn-sm">{{ stu.name }}</button>&nbsp;&nbsp;
20         </span>
21       </div>
22     </div>
23 
24   </div>

部分样式代码在main.css中，这里不再叙述。stu中使用angularjs显示和添加学生信息。

6.controller.js中添加和显示学生的实现

最后我们要实现最后一步了，初始化显示所以学生名称，然后有添加功能，当添加新学生的时候直接保存到数据库并且显示出来，实现代码如下：

 1     
 2     show();
 3 
 4     $scope.submit = function(){
 5         var name = $scope.name;
 6 
 7         if(name != null && name.length != 0){
 8             Users.addStu(name, function(err, info){
 9                 show();
10             });
11         }
12     };
13 
14     function show(){
15         Users.getStuList(function(err, stus){
16             $scope.stus = stus;
17 
18             //这句代码很重要，你可以尝试不添加这句看看效果
19             $scope.$apply();
20         });
21     };