indexedDB bootstrap angularjs 前端 MVC Demo

2024-04-10 09:06•mysql•阅读 504

前端之MVC应用　　

　　1、indexedDB（Model）：数据层，前端浏览器 HTML5 API 面向对象数据库，一般现在用的数据库都是关系型数据库。

　　那么indexeddb有什么特点呢：

　　　　首先，从字义上它是索引型数据库，从实际使用中可以体现为，它需要为表创建索引才可以根据某个字段来获取数据，而在关系型数据库中，这明显是不需要的。

　　　　其次，我不需要行列数据的转化，我只需要通过类似于数组的处理方式：

objectStore.push(data); // 有点像是把一个json对象塞入数据库，是不是很暴力？

　　2、bootstrap（View）：　

　　听说是最近最流行的CSS框架，从3的版本开始往移动端偏移，原来是响应式布局，但比较偏向PC。

　　在这里并不使用bootstrap的js插件，因为：我认为它只是一个视图层框架，即使用起来方便，我也还是希望UI组件保持透明，毕竟这样使用起来容易修改。

　　3、angularjs（Controller）：

　　这是一个比较新生代的js框架，和jQuery的意图不同，它希望我们以全局性去考虑一个应用，而非对DOM的操作（这是jQuery做的事情，简化我们操作和访问DOM节点的方式）。

　　举个例子：angularjs的使用方式有点像是jsp、freemarker等渲染html的东西，只是一个在客户端渲染，另一个在后台服务器渲染。我们只要改变数据的结构和属性，对应渲染出来的页面就会不同，并且这个过程是自动的。

　　如果不太负责地说，可以把angularjs当做是另一种java解释器，它将html混合angularjs自定义指令（或者称为标签）的一个xml文本解析成我们需要的html文本，并且这个过程是动态的，这很符合MVC复合模式中使用到的观察者模式，数据的改变会通知对应绑定的UI组件，告诉它：我的数据变了，希望你能做出对应的变化，让观众能用他们的眼睛看到我的变化，万分感谢！

　　同时，用于替代一般的表单验证框架，我们经常会使用到类似于下方的代码

<button ng-disabled="error">save</button>

　　上面的代码表示，如果存在错误信息（error是一个变量，布尔型），那么提交按钮将不可用，我们只需要在javascript脚本中对error变量做操作，改变它的值，就可以改变一个流程的走向，是不是有点熟悉感：状态模式。

　　总之angularjs可以让我们更加关注数据的变化，而非DOM的变化，就是说：你将很少会去写到

$("#btnSave").click(function() {});

　　这样需要获取到html节点的脚本代码，可以说，这完全脱离了jQuery的范畴（当然我们无法否定js的世界有很大一部分都被jQuery占据了）。所以这可以算是一个跨时代的改变？

　　码ing（最终必须运行到服务器上），这是一个新增用户的demo，你将会发现：

　　1、html页面中发现很多诸多jsp、spring el标签的东西。

　　2、数据访问独立成一个模块，加载模块后再通过注入service服务来访问数据库（瞧这，是不是就跟传统的方式不一样了？）

　　3、将不会有任何的选择器代码和js绑定事件的方法

　　另外：我们使用的资源库均来自互联网，须保持外网畅通，否则将无法正常运行，或者手动将js和css资源替换成本地资源。

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>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>telephone</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.id }}</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-disabled="error || incomplete" 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 {
            $scope.user = _user = {};
        }
    };
    $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"
  }
]

上一篇 »javascript 调用 IndexedDb示例
下一篇 »angularjs封装bootstrap官网的时间插件datetimepicker

indexedDB bootstrap angularjs 前端 MVC Demo

相关推荐

angular.bootstrap手动加载angularjs模块

--@angularJS--angular与BootStrap3的应用

Bootstrap,Angularjs分页

bootstrap-multiselect与angularjs冲突

使用bootstrap+asp.net mvc4+IBatis.Net实现的小程序

AngularJs练习Demo11引入Jquery

AngularJS中bootstrap启动

[整理]通过AngularJS directive对bootstrap日期控件的的简单包装