A-Webkit第四章：添加學生

時間 2019-11-10

標籤 webkit 第四添加學生简体版

原文原文鏈接

上一章學習了登陸，這一章主要記錄添加學生信息。這一章會有不少的內容。下面咱們來一步一步的實現它。css

1.修改main.htmlhtml

首先咱們修改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文件。jquery

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中實際上是沒有嚴格的前端和後端的。git

2.添加分部視圖angularjs

由於使用路由控制不一樣的視圖文件，那麼咱們在view文件夾裏面添加三個視圖文件，如：github

stu.html,代碼以下：web

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

sco.html,代碼以下：sql

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     };