我們觀察這兩個M層文件,不難發現在調用$http時,有大量重復的代碼.

考慮到在進行數據請求時,可能發生比如:用戶未登陸或是用戶沒有操作權限等,的錯誤。我們需要同一對發生的錯誤進行處理。鑒于此,我們對$http請求進行重構。
重構以前,我們進行數據請求時,時序圖是這樣。

重構后,時序圖變成了這樣:

這使得,可以大量的減少我們書寫的重復的代碼;可以統一對資源請求的錯誤進行錯誤;可以結合后臺返回的數據,來更友好控制用戶的訪問權限。
> 新建service: yo angular:service server
```
'use strict';
/**
* @ngdoc service
* @name webAppApp.server
* @description
* # server
* Service in the webAppApp.
*/
angular.module('webAppApp')
.service('server', function($http) {
var http = function(param, callback) {
var data = {};
// 設置請求的header
param.header = {
contentType: 'application/json',
};
// 統一處理URL
param.url = 'http://127.0.0.1:8080/javaee' + param.url;
$http(param).then(function successCallback(response) {
console.log(response);
data = response.data;
// 網絡發生錯誤
}, function errorCallback(response) {
console.log('網絡請求發生錯誤:');
console.log(response);
}).
// 發生異常
catch(function(e) {
console.log('$http發生異常: ', e);
throw e;
}).finally(function() {
// todo:進行錯誤碼的判斷,如果提示用戶未登陸,則跳轉至登陸頁面
if (typeof(data.code) === 'undefined') {
console.log('未獲取到code值');
} else if (data.code !== 200) {
// 返回的狀態碼不是200,則說明發生了錯誤
console.log('返回的狀態碼為' + data.code);
checkCode(data.code);
} else {
// 調用回調函數, 返回數據
callback(data);
}
});
};
// 核驗錯誤碼
var checkCode = function(code) {
if (code === 401) {
console.log('用戶尚未登陸,或停留的時間過長');
// 跳轉至用戶登陸界面
} else if (code === 403) {
console.log('用戶無此操作權限');
// 提示用戶無此權限
} else {
console.log('接收到了未定義的錯誤碼');
}
};
// Public API here
return {
http: http
};
});
```
## 重構user.js
```
'use strict';
/**
* @ngdoc service
* @name webAppApp.user
* @description
* # user
* Service in the webAppApp.
*/
angular.module('webAppApp')
.service('user', function(server) {
/**
* 用戶登陸
* @param {string} username 用戶名
* @param {string} password 密碼
* @param {Function} callback 回調函數
* @return {}
* @author 夢云智 http://www.mengyunzhi.com
* @DateTime 2017-02-07T18:34:55+0800
*/
var login = function(username, password, callback) {
server.http({
method: 'POST',
url: '/User_login',
data: {
username: username,
password: password
}
}, function(response) {
// 將是否通過驗證傳給V層
callback(response.isPassed);
});
};
return {
login: login
};
});
```
## 重構teacher.js
```
'use strict';
/**
* @ngdoc service
* @name webAppApp.teacher
* @description
* # teacher
* Service in the webAppApp.
*/
angular.module('webAppApp')
.service('teacher', function(server) {
/**
* 獲取當前頁的教師
* @param {string} name 查詢教師的名字
* @param {int} page 第幾頁
* @param {int} pageSize 每頁多少條
* @param {Function} callback 回調函數
* @return {[type]}
* @author 夢云智 http://www.mengyunzhi.com
* @DateTime 2017-01-21T19:05:55+0800
*/
var paginate = function(name, page, pageSize, callback) {
var teachers = [];
// 進行http POST請求.
// 由于是post請求方式,所以即便是我們在項目中存在paginate.json文件
// 但如果我們查看控制臺,仍然會發現有錯誤產生,同時,沒有正確的接收到數據
server.http({
method: 'POST',
url: '/teacher/indexJson',
data: {
name: name,
page: page,
pageSize: pageSize
}
}, function(response) {
teachers = response.teachers;
callback(teachers);
});
};
// Public API here
return {
// 獲取全部教師信息
paginate: function(name, page, pageSize, callback) {
return paginate(name, page, pageSize, callback);
},
};
});
```
沒錯,如果你現在僅僅是在進行前臺的學習,那么,此時,你只需要將`server`中的`param.url = 'http://127.0.0.1:8080/javaee' + param.url;`修改為:`param.url = 'http://www.mengyunzhi.com:8080/javaee' + param.url;`
> git checkout -f step11.6
- 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
- 第十四章:重構服務層