# 增加刪除按鈕
klass/index.html
```
<td><a ng-href="#!/klass/edit/{{klass.id}}">編輯</a> <button ng-click="del($index, klass)">刪除</button></td>
```
同時,我們增加發生錯誤或產生消息時的提醒
```
<div class="row">
<div class="col-md-12">
<div ng-show="message" class="alert alert-success" role="alert">{{message}}</div>
<div ng-show="isError" class="alert alert-danger" role="alert">{{errors}}</div>
</div>
</div>
...
```
# 完善C層
klass/index.js
```
$scope.message = ''; // 消息
$scope.error = ''; // 錯誤消息
// 設置提示消息
var setMessage = function (message) {
$scope.message = message;
$scope.error = '';
$timeout(function() {
$scope.message = '';
}, 1500);
}
// 設置錯誤提示消息
var setError = function (error) {
$scope.error = error;
$scope.message = '';
$timeout(function() {
$scope.error = '';
}, 1500);
}
// 刪除, 注意這里的參數,不能使用klass, 原因是:....
var del = function (index, klassEntity) {
console.log(index);
console.log(klassEntity);
};
...
$scope.del = del;
```
上面,我們定義了兩個setxxx,但由于在下面的代碼中沒有應用,所以會出現兩個警告。等下面完善代碼后就沒有了。
# M層
services/klass.js
```
// 刪除
var del = function (id, callback) {
server.http({
method:'GET',
url: '/klass.Delete.json?id=' + id,
}, function(response) {
callback(response);
});
};
...
update: update,
del: del
};
```
## 單元測試
```
...
// 增加del
url = config.apiRootPath + '/klass.Delete.json?id=1';
$httpBackend.when('GET', url).respond(data);
...
// 調用del
klass.del(1, function(){
console.log('klass del 通過');
});
```
# C層對接
```
// 刪除, 注意這里的參數,不能使用klass, 原因是:....
var del = function (index, klassEntity) {
klass.del(klassEntity.id, function(response) {
// 發生錯誤
if (!angular.equals({}, response.errors)) {
setError('系統發生錯誤');
console.log(response.errors);
// 刪除成功
} else if(response.errorMessages.length === 0) {
setMessage('刪除成功');
console.log(index);
$scope.klasses.splice(index, 1);
// 發生警告
} else {
setMessage('系統失敗:' + response.errorMessages.toString());
}
});
};
```
## 測試

# 總結
由于我們在前期的命名問題,在這里產生了實體與M層的沖突,看來正確的命名還是非常必要的。以后,我們的服務器,全部起名為`xxxServer`。
至此,前端的基本開發講解完畢。其實的更復雜的操作,其實現的步驟基本如此。無非就是找到接口,傳對數據,然后按返回的數據進行接收后并處理。細節還待我們在實際開發中具體掌握。
- README
- 第一章:準備
- 第二章:Hello World!
- 第一節:查看工程文件
- 第二節:JDK、JRE與環境變量
- 第三節:index.jsp
- 第三章:Hello Struts
- 第一節:Web.xml
- 第二節:單入口
- 第三節:Hello Struts
- 第四節:觸發C層
- 第四章:建立數據表
- 第一節:建立實體類
- 第二節:測試一
- 第三節:測試二
- 第四節:引入Hibernate
- 第五節:配置Hibernate
- 第六節:建立連接
- 第七節:實體類映射數據表
- 第八節:完善數據表
- 第五章:教師管理
- 第一節:增加數據--add
- 第二節:增加數據--save
- 1 獲取傳入數據數據
- 2 數據寫入測試
- 3 對接C層
- 第三節:數據列表
- 1 獲取數據
- 2 重構代碼
- 3 C層對接--初始化
- 4 C層添加數據
- 5 V層顯示數據
- 6 獲取數據庫中數據
- 7 顯示性別
- 8 分頁
- 9 條件查詢
- 第四節:修改數據
- 1 edit
- 2 update
- 第五節:刪除數據
- 第六節:總結
- 第六章:重構C層
- 第一節:繼承ActionSupport類
- 第二節:數據驗證
- 第七章:前臺分離(前臺)
- 第一節:環境搭建
- 第二節:運行環境
- 第三節:共享開發環境
- 第四節:生產環境
- 第八章:前臺開發(前臺)
- 第一節:本地化
- 第二節:教師列表
- 1 引入M層
- 2 模擬后臺返回數據
- 3 C與M對接
- 4 C與V對接
- 第九章:前后臺對接(前后臺)
- 第一節:后臺輸出json(后臺)
- 第二節:對接前臺(全棧)
- 第二節:對接API(前臺)
- 第二節:跨域請求(后臺)
- 第三節:重構代碼(前臺)
- 第十章:重構后臺M層
- 第一節:數據訪問DAO層
- 第二節:項目整體重構
- 第十一章:用戶登陸(前后臺)
- 第一節:制定規范
- 第二節:定制測試用例
- 第三節:后臺輸入測試代碼(后臺)
- 第四節:postman(后臺)
- 第五節:新建用戶登陸模塊(前臺)
- 第六節:代碼重構(前臺)
- 第十二章:班級管理(前后臺)
- 第一節:班級列表
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第二節:Add
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第三節:Save
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第四節:Edit
- 1 原型開發
- 2 制定規范
- 3 后臺對接開發
- 4 前臺對接開發
- 第五節:Update
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第六節:Delete
- 1 制定規范
- 2 后臺對接開發
- 3 前臺對接開發
- 第七節:小結
- 第十三章:班級管理(API)
- 第一節:ER圖
- 第二節:create
- 1 實體層
- 2 dao層
- 3 service(server)層
- 4 action層
- 第三節:ManyToOne
- 第四節:Read
- 1 service(server)層
- 2 action層
- 第五節:update
- 1 service(server)層
- 2 action層
- 第六節:update
- 第十四章:重構服務層