前端之MVC應用 1、indexedDB（Model） -- 前端瀏覽器對象型資料庫，一般我們後臺用的資料庫都是關係型資料庫。那麼indexeddb有什麼特點呢： 首先，從字義上它是索引型資料庫，從實際使用中可以體現為，它需要為表創建索引才可以根據某個欄位來獲取數據，而在關係型資料庫中，這明顯是不需 ...
前端之MVC應用
1、indexedDB（Model） -- 前端瀏覽器對象型資料庫，一般我們後臺用的資料庫都是關係型資料庫。那麼indexeddb有什麼特點呢：
首先，從字義上它是索引型資料庫，從實際使用中可以體現為，它需要為表創建索引才可以根據某個欄位來獲取數據，而在關係型資料庫中，這明顯是不需要的。
其次，我不需要行列數據的轉化，我只需要通過類似於數組的處理方式：
objectStore.push(data);
有點像是把一個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(); //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) { // 刷新數據結構,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" } ]
