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

Bootstrap 前端之家
前端之家收集整理的这篇文章主要介绍了indexedDB bootstrap angularjs之 MVC DOMO (应用示例)，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1、indexedDB（Model）@H_301_2@ -- 前端浏览器对象型数据库，一般我们后台用的数据库都是关系型数据库。那么indexeddb有什么特点呢：

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

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

代码如下:

　　有点像是把一个json对象塞入数据库，是不是很暴力？

　　2、bootstrap（View@H_301_2@）　　-- bootstrap，老实说，我不是很熟悉这个东西，毕竟我是后端java开发出身。以我的理解，这就是一个以响应式布局为特点的前端框架，至于说比较特别的，应该就是它比较流行吧？！老实说，我这边只用到css，而我也认为，后现代的前端开发，将不会需要bootstrap的js部分，毕竟那还是以jquery为主的方式。

　

301_2@　　-- 必须承认这个东西东西的诞生完全颠覆了我对前端开发的看法，以前和现在我们依然困在前后端无法彻底分离的窘境中，但我认为如果后期，前端人员普遍采用应用式的angularjs脚本来开发（还有一些类似的框架），我们将不再需要让后端开发工程师套用诸多的前端样式、结构等等。

　　这么说，很多后端人员可能还是不能体会得到，举个例子：angularjs的使用方式有点像是jsp、freemarker等渲染html的东西，只是一个在客户端渲染，另一个在后台服务器渲染。我们只要改变数据的结构和属性，对应渲染出来的页面就会不同，angularjs就是让我们更加关注数据的变化，而非DOM的变化，就是说：你将很少会去写到$("btnSave").click(function() {});这样需要获取到html节点的脚本代码，可以说，这完全脱离了jQuery的范畴。所以这可以算是一个跨时代的改变？

　　

接下来就上例子吧（最终必须运行到服务器上）： @H_301_2@

user.html@H_301_2@

@H_502_35@ <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width"/> Users@H_301_2@ Edit Edit

301_2@

301_2@

jdbc.js(作为一个数据访问的模块，可供各个应用加载调用)

用户 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,o) { _self.openDB(myDB.name,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 (应用示例)的全部叙述，希望对大家有所帮助！

angularjsangularjs和bootstrapdemodemodemomvcmvc

猜你在找的Bootstrap相关文章

使用BootStrapValidator来完成前端输入验证
BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基...
顶求网首页整体设计思路
顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给...
自己手写简约实用的Jquery tabs插件（基于bootstrap环境）
一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅...
BootStrap中Affix控件的使用方法及如何保持布局的美观
在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这...
针对BootStrap中tabs控件的美化和完善
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何...
使用BootStrap制作用户登录UI
先看看劳动成果 布局 左右各一半（col-md-6） 左侧登录框占左侧一半的10/12 右侧是登录系统...
打造简单实用的Thinkphp分页样式(Bootstrap版本)
先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单...
Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播（carousel）插件来展示文章中的图片。我在程序中...
移动开发中单页异步加载所有列表项
在做WEB开发的时候我们经常会遇到分页的处理，如果在PC上显示网页的话，使用传统的分页是可...
仿豆瓣分类标签的实现
为了和文章分类部分的样式进行区分，我决定自己动手写一个具有其他样式的分类标签集。刚好...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作

First Name Last Name