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


Posted in Javascript onJune 20, 2016

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"
}
]

以上所述是小编给大家带来的indexedDB bootstrap angularjs之 MVC DOMO (应用示例)的全部叙述,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
JS控制层作圆周运动的方法
Jun 20 #Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 #Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 #Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 #Javascript
jQuery插件 Jqplot图表实例
Jun 18 #Javascript
jqPlot jQuery绘图插件的使用
Jun 18 #Javascript
jQuery获取radio选中项的值实例
Jun 18 #Javascript
You might like
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
php利用事务处理转账问题
2015/04/22 PHP
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
python生成器generator用法实例分析
2015/06/04 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Python 3 判断2个字典相同
2019/08/06 Python
Django密码存储策略分析
2020/01/09 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python中for in的用法详解
2020/04/17 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
大专计算机个人求职的自我评价
2013/10/21 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
个性发展自我评价
2014/02/11 职场文书
售后服务承诺书范文
2014/03/26 职场文书
医生辞职信范文
2015/03/02 职场文书
Python实现天气查询软件
2021/06/07 Python
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
MySQL深分页问题解决思路
2022/12/24 MySQL