indexedDB bootstrap angularjs之 MVC DOMO (應用示例)

更新時間：2016年06月20日 09:04:40 作者：gabin

這篇文章主要介紹了indexedDB bootstrap angularjs之 MVC DOMO (應用示例)的相關(guān)資料,需要的朋友可以參考下

1、indexedDB（Model） -- 前端瀏覽器對象型數(shù)據(jù)庫，一般我們后臺用的數(shù)據(jù)庫都是關(guān)系型數(shù)據(jù)庫。那么indexeddb有什么特點呢：

　　首先，從字義上它是索引型數(shù)據(jù)庫，從實際使用中可以體現(xiàn)為，它需要為表創(chuàng)建索引才可以根據(jù)某個字段來獲取數(shù)據(jù)，而在關(guān)系型數(shù)據(jù)庫中，這明顯是不需要的。

　　其次，我不需要行列數(shù)據(jù)的轉(zhuǎn)化，我只需要通過類似于數(shù)組的處理方式：

復制代碼代碼如下:

objectStore.push(data);

　　有點像是把一個json對象塞入數(shù)據(jù)庫，是不是很暴力？

　　2、bootstrap（View）　　-- bootstrap，老實說，我不是很熟悉這個東西，畢竟我是后端java開發(fā)出身。以我的理解，這就是一個以響應式布局為特點的前端框架，至于說比較特別的，應該就是它比較流行吧？！老實說，我這邊只用到css，而我也認為，后現(xiàn)代的前端開發(fā)，將不會需要bootstrap的js部分，畢竟那還是以jquery為主的方式。

　　3、angularjs（Controller）　　-- 必須承認這個東西東西的誕生完全顛覆了我對前端開發(fā)的看法，以前和現(xiàn)在我們依然困在前后端無法徹底分離的窘境中，但我認為如果后期，前端人員普遍采用應用式的angularjs腳本來開發(fā)（還有一些類似的框架），我們將不再需要讓后端開發(fā)工程師套用諸多的前端樣式、結(jié)構(gòu)等等。

　　這么說，很多后端人員可能還是不能體會得到，舉個例子：angularjs的使用方式有點像是jsp、freemarker等渲染html的東西，只是一個在客戶端渲染，另一個在后臺服務器渲染。我們只要改變數(shù)據(jù)的結(jié)構(gòu)和屬性，對應渲染出來的頁面就會不同，angularjs就是讓我們更加關(guān)注數(shù)據(jù)的變化，而非DOM的變化，就是說：你將很少會去寫到$("btnSave").click(function() {});這樣需要獲取到html節(jié)點的腳本代碼，可以說，這完全脫離了jQuery的范疇。所以這可以算是一個跨時代的改變？

　　接下來就上例子吧（最終必須運行到服務器上）：

user.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"/>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" >
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<h3>Users</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="one in users">
<td>
<button class="btn" ng-click="editUser(one)">
<span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
</button>
<button class="btn" ng-click="deleteUser(one.id)">
<span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Delete
</button>
</td>
<td>{{ one.fName }}</td>
<td>{{ one.lName }}</td>
<td>{{ one.telephone }}</td>
</tr>
</tbody>
</table>
<hr>
<button class="btn btn-success" ng-click="editUser()">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="user.fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="user.lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">telephone:</label>
<div class="col-sm-10">
<input type="tel" ng-model="user.telephone" placeholder="telephone">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-click="saveCustomer()">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div>
<script src="jdbc.js?v=2323"></script>
<script src="myUsers.js"></script>
</body>
</html>

jdbc.js(作為一個數(shù)據(jù)訪問的模塊，可供各個應用加載調(diào)用)

'use strict';
!(function (w, angular) {
angular.module('db', []).service('jdbc', function ($http, $q) {
var _self = this;
var myDB = {
name: 'roma',
version: 1,
db: null,
schema: {
2: function(db) {
// 初始化 用戶
var customer = db.createObjectStore('customer', {keyPath:"id", autoIncrement: true});
customer.createIndex("customer_fName_index", "fName", {unique: true});
}
}
};
// 用于處理跟回調(diào)函數(shù)相反的方式,當defer調(diào)用resolve方法之后,就會觸發(fā)defer.promise.then(callback)傳入的callback方法,并且resolve可以傳入任意的變量
/**
*
* function test() {
* var defer = $q.defer();
* setTimeout(2000, function() {
* defer.resolve("hello");
* });
* return defer.promise;
* }
*
* test().then(function(say) {
* console.log(say);
* });
*
* 2秒之后將會打印出"hello"
*
* @type {Deferred|*}
*/
var defer = $q.defer();
_self.onload = function(cb) {
return defer.promise.then(cb);
};
var getDb = function(db) {
var d = $q.defer();
if (db) {
d.resolve(db);
}
// 打開數(shù)據(jù)庫
var result = window.indexedDB.open(myDB.name);
result.onerror = function (e) {
console.log("Open DB Error!");
d.reject("error");
};
// 正確打開
result.onsuccess = function (e) {
var db = e.target.result;
myDB.db = db;
d.resolve(db);
};
return d.promise;
};
_self.openDB = function (name, version, success, upgrade) {
var d = $q.defer();
var name = name || myDB.name;
var version = version || myDB.version;
// 打開數(shù)據(jù)庫
var result = window.indexedDB.open(name, version);
// 錯誤
result.onerror = function (e) {
console.log("Open DB Error!");
d.reject(e);
};
// 正確打開
result.onsuccess = function (e) {
myDB.db = e.target.result;
if (success) success(myDB.db);
d.resolve(e);
};
// 數(shù)據(jù)庫版本變更
result.onupgradeneeded = function (e) {
myDB.db = e.target.result;
if (upgrade) upgrade(myDB.db);
d.resolve("upgradeneeded");
};
return d.promise;
};
var schema = function (schema) {
angular.forEach(schema, function(upgrade, version, o) {
_self.openDB(myDB.name, version, function() {
defer.resolve();
}, function(db) {
upgrade(db);
});
})
};
schema(myDB.schema);
_self.get = function (storeName, key) {
var d = $q.defer(); //promise
getDb(myDB.db).then(function (db) {
var transaction = db.transaction(storeName, 'readonly');
var store = transaction.objectStore(storeName);
var result = store.get(key);
result.onsuccess = function (e) {
_self.result = e.target.result;
d.resolve();
};
result.onerror = function (e) {
d.reject();
};
});
return d.promise;
};
_self.find = function (storeName, key, value) {
var d = $q.defer();//promise
getDb(myDB.db).then(function(db) {
var transaction = db.transaction(storeName, 'readonly');
var store = transaction.objectStore(storeName);
var keyRange = IDBKeyRange.only(value);
var result = store.index(key).openCursor(keyRange, "next");
var results = [];
result.onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
results.push(cursor.value);
cursor.continue();
} else {
d.resolve(results);
}
};
result.onerror = function (e) {
d.reject();
};
});
return d.promise;
};
_self.put = function (storeName, value) {
var d = $q.defer();
var db = myDB.db || getDb();
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
if (value !== null && value !== undefined) {
store.put(value);
d.resolve();
} else {
d.reject();
}
return d.promise;
};
_self.remove = function (storeName, value) {
var d = $q.defer();//promise
var db = myDB.db || getDb();
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var result = store.delete(value);
result.onsuccess = function (e) {
d.resolve();
};
result.onerror = function (e) {
d.reject();
};
return d.promise;
};
_self.findAll = function (storeName) {
var d = $q.defer();//promise
getDb(myDB.db).then(function(db) {
var transaction = db.transaction(storeName, 'readonly');
var store = transaction.objectStore(storeName);
var result = store.openCursor();
var results = [];
result.onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
results.push(cursor.value);
cursor.continue();
} else {
d.resolve(results);
}
};
result.onerror = function (e) {
d.reject();
};
});
return d.promise;
};
return _self;
});
}(window, window.angular)); 
myUsers.js (應用的controller層腳本)
'use strict';
angular.module('myApp', ['db']).controller("userCtrl", function($scope, $http, jdbc) {
// 刷新數(shù)據(jù)結(jié)構(gòu),angularjs的雙向綁定會自動幫我們渲染界面
function reload() {
jdbc.findAll("customer").then(function(response) {
if (!response) {
$http.get("data.json").success(function(response) {
$scope.users = response;
});
return;
}
$scope.users = response;
});
}
// 數(shù)據(jù)結(jié)構(gòu)完成之后刷新界面
jdbc.onload(reload);
$scope.edit = true;
var _user = $scope.user = {};
$scope.editUser = function(user) {
if (user) {
_user.id = user.id;
_user.fName = user.fName;
_user.lName = user.lName;
_user.telephone = user.telephone;
} else {
_user.fName = "";
_user.lName = "";
_user.telephone = "";
_user.id = "";
}
};
$scope.deleteUser = function(id) {
// 從數(shù)據(jù)庫刪除記錄之后刷新表格數(shù)據(jù)
jdbc.remove("customer", id).then(reload);
};
$scope.saveCustomer = function() {
// 從數(shù)據(jù)庫添加或更新記錄之后刷新表格數(shù)據(jù)
jdbc.put("customer", _user).then(reload);
};
jdbc.find("customer", "customer_fName_index", "林").then(function(data) {
console.log(data);
});
}); 
data.json(當indexedDB無法正常獲取的時候用來顯示數(shù)據(jù)用)
[
{
"id": 1,
"fName": "林",
"lName": "嘉斌",
"telephone": "13514087953"
},
{
"id": 2,
"fName": "陳",
"lName": "曉",
"telephone": "13509890786"
}
]

以上所述是小編給大家?guī)淼膇ndexedDB bootstrap angularjs之 MVC DOMO (應用示例)的全部敘述，希望對大家有所幫助！

您可能感興趣的文章: