1、indexedDB（Model） -- 前端瀏覽器對象型資料庫，一般我們後台用的資料庫都是關係型資料庫。那麼indexeddb有什麼特點呢：
首先，從字義上它是索引型資料庫，從實際使用中可以體現為，它需要為表建立索引才可以根據某個欄位來擷取資料，而在關係型資料庫中，這明顯是不需要的。
其次，我不需要行列資料的轉化，我只需要通過類似於數組的處理方式：
有點像是把一個json對象塞入資料庫，是不是很暴力？
2、bootstrap（View） -- bootstrap，老實說，我不是很熟悉這個東西，畢竟我是後端java開發出身。以我的理解，這就是一個以響應式布局為特點的前端架構，至於說比較特別的，應該就是它比較流行吧？！老實說，我這邊只用到css，而我也認為，後現代的前端開發，將不會需要bootstrap的js部分，畢竟那還是以jquery為主的方式。
3、angularjs（Controller） -- 必須承認這個東西東西的誕生完全顛覆了我對前端開發的看法，以前和現在我們依然困在前後端無法徹底分離的窘境中，但我認為如果後期，前端人員普遍採用應用式的angularjs指令碼來開發（還有一些類似的架構），我們將不再需要讓後端開發工程師套用諸多的前端樣式、結構等等。
這麼說，很多後端人員可能還是不能體會得到，舉個例子：angularjs的使用方式有點像是jsp、freemarker等渲染html的東西，只是一個在用戶端渲染，另一個在後台伺服器渲染。我們只要改變資料的結構和屬性，對應渲染出來的頁面就會不同，angularjs就是讓我們更加關注資料的變化，而非DOM的變化，就是說：你將很少會去寫到$("btnSave").click(function() {});這樣需要擷取到html節點的指令碼代碼，可以說，這完全脫離了jQuery的範疇。所以這可以算是一個跨時代的改變？
接下來就上例子吧（最終必須運行到伺服器上）：
user.html
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"/><!-- 新 Bootstrap 核心 CSS 檔案 --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><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> Edit</button><button class="btn" ng-click="deleteUser(one.id)"><span class="glyphicon glyphicon-remove"></span> 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(作為一個資料訪問的模組，可供各個應用載入調用)
'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});}}};// 用於處理跟回呼函數相反的方式,當defer調用resolve方法之後,就會觸發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);}// 開啟資料庫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;// 開啟資料庫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);};// 資料庫版本變更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(); //promisegetDb(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();//promisegetDb(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();//promisevar 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();//promisegetDb(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) {// 重新整理資料結構,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;});}// 資料結構完成之後重新整理介面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) {// 從資料庫刪除記錄之後重新整理表格式資料jdbc.remove("customer", id).then(reload);};$scope.saveCustomer = function() {// 從資料庫添加或更新記錄之後重新整理表格式資料jdbc.put("customer", _user).then(reload);};jdbc.find("customer", "customer_fName_index", "林").then(function(data) {console.log(data);});}); data.json(當indexedDB無法正常擷取的時候用來顯示資料用)[{"id": 1,"fName": "林","lName": "嘉斌","telephone": "13514087953"},{"id": 2,"fName": "陳","lName": "曉","telephone": "13509890786"}]
以上所述是小編給大家帶來的indexedDB bootstrap angularjs之 MVC DOMO (應用樣本)的全部敘述，希望對大家有所協助！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
