vue中indexDB的应用
// indexedDB.js,浏览器本地数据库操作 export default {
// indexedDB兼容
indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || mozIndexedDB,
// 打开数据库
// 新对象储存空间newStore参数:newStore.name、newStore.key
// 新增对象存储空间要更改数据库版本
openDB: function (dbname, version, db, newStore, callback) {
var version = version || ;
var request = this.indexedDB.open(dbname, version);
request.onerror = function (event) {
console.log('IndexedDB数据库打开错误');
};
request.onsuccess = function (event) {
db = event.target.result;
if (callback && (typeof callback === 'function')) {
callback(db);
}
};
// onupgradeneeded,调用创建新的储存空间
request.onupgradeneeded = function (event) {
var db = event.target.result;
if (newStore) {
if (!db.objectStoreNames.contains(newStore.name)) {
var objectStore = db.createObjectStore(newStore.name, {
keyPath: newStore.key,
});
objectStore.createIndex('counter_index', 'counter', { unique: false });
objectStore.createIndex('barcode_index', 'barcode', { unique: false });
objectStore.createIndex('qty_index', 'qty', { unique: false });
objectStore.createIndex('counter_code', ['counter', 'barcode'], { unique: false });
}
}
};
},
// 删除数据库
deleteDB: function (dbname, callback) {
var deleteQuest = this.indexedDB.deleteDatabase(dbname);
deleteQuest.onerror = function () {
console.log('删除数据库出错');
};
deleteQuest.onsuccess = function () {
if (callback && (typeof callback === 'function')) {
callback();
}
}
},
// 关闭数据库
closeDB: function (dbname) {
dbname.close();
console.log('数据库已关闭');
},
// 更新旧值,针对输入数量
putData: function (db, storename, dataArr, callback) {
let mybarcode = "";
let QTY = "";
let key = "";
let counter = "";
let barcode = "";
let addtime = "";
dataArr.forEach(item => {
mybarcode = item.barcode;
QTY = item.qty;
barcode = item.barcode;
counter = item.counter;
key = item.counterCode;
addtime = item.addtime; });
this.getdatabycursor(db, storename).then(arr => {
if (arr.length == ) {
//console.log("添加")
var store = db.transaction(storename, 'readwrite').objectStore(storename),
request;
for (var i = , len = dataArr.length; i < len; i++) {
request = store.put(dataArr[i]);
request.onerror = function () {
console.error('PUT添加数据报错');
};
request.onsuccess = function (result) {
if (callback && (typeof callback === 'function')) {
callback();
}
};
}
}
else {
this.read(db, storename, counter, barcode).then(x => {
if (x) {
//console.log("最新的值是" + QTY)
this.updateDataByKey(db, storename, key, QTY, addtime).then(x => {
if (callback && (typeof callback === 'function')) {
callback();
} }); }
else {
//console.log("再次添加")
var store = db.transaction(storename, 'readwrite').objectStore(storename),
request;
for (var i = , len = dataArr.length; i < len; i++) {
request = store.put(dataArr[i]);
request.onerror = function () {
console.error('PUT添加数据报错');
};
request.onsuccess = function (result) {
if (callback && (typeof callback === 'function')) {
callback();
}
};
}
}
})
}
})
},
// 更新旧值
putDatas: function (db, storename, dataArr, callback) {
let mybarcode = "";
let QTY = "";
let key = "";
let counter = "";
let barcode = "";
let addtime = "";
dataArr.forEach(item => {
mybarcode = item.barcode;
QTY = item.qty;
key = item.counterCode;
counter = item.counter;
barcode = item.barcode;
addtime = item.addtime; });
this.getdatabycursor(db, storename).then(arr => {
if (arr.length == ) {
//console.log("添加")
var store = db.transaction(storename, 'readwrite').objectStore(storename),
request;
for (var i = , len = dataArr.length; i < len; i++) {
request = store.add(dataArr[i]);
request.onerror = function () {
console.error('PUT添加数据报错');
};
request.onsuccess = function (result) {
if (callback && (typeof callback === 'function')) {
callback();
}
};
}
}
else {
this.read(db, storename, counter, barcode).then(x => {
if (x) {
this.updateDataByKeys(db, storename, key, addtime).then(x => {
this.getdata(db, storename).then(result => {
if (callback && (typeof callback === 'function')) {
callback();
}
});
}); }
else {
//console.log("再次添加")
//console.log("当前的值是"+barcode)
var store = db.transaction(storename, 'readwrite').objectStore(storename),
request;
for (var i = , len = dataArr.length; i < len; i++) {
request = store.add(dataArr[i]);
request.onerror = function () {
console.error('PUT添加数据报错');
};
request.onsuccess = function (result) {
if (callback && (typeof callback === 'function')) {
callback();
}
};
} }
})
}
})
},
//根据key修改数量
updateDataByKey: function (db, storeName, value, QTY, addtime) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(value);
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var stocktable = e.target.result;
if (stocktable) {
stocktable.qty = QTY;
stocktable.addtime = addtime;
resolve(store.put(stocktable));
}
else {
reject(false);
} }; }) }, updateDataBycode: function (db, storeName, value, QTY) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(value);
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var stocktable = e.target.result;
if (stocktable) {
stocktable.qty = QTY; resolve(store.put(stocktable));
}
else {
reject(false);
} }; }) },
//根据key修改数量
updateDataByKeys: function (db, storeName, value, addtime, callback) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(value); return new Promise((resolve, reject) => {
//console.log(addtime)
request.onsuccess = function (e) {
var stocktable = e.target.result;
if (stocktable) {
stocktable.qty += ;
stocktable.addtime = addtime;
resolve(store.put(stocktable));
}
else {
reject(false);
} };
}) },
// 删除数据
deleteData: function (db, storename, key, callback) {
var store = db.transaction(storename, 'readwrite').objectStore(storename);
store.delete(key);
if (callback && (typeof callback === 'function')) {
callback();
} },
// 清空数据
clearData: function (db, storename, callback) {
var store = db.transaction(storename, 'readwrite').objectStore(storename);
store.clear();
if (callback && (typeof callback === 'function')) {
callback();
}
},
// 通过key获取数据
read: function (db, storeName, counter, barcode) {
var transaction = db.transaction(storeName);
var objectStore = transaction.objectStore(storeName);
var currentdata = [counter, barcode];
var indexs = objectStore.index('counter_code');
var request = indexs.openCursor(IDBKeyRange.only(currentdata));
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
resolve(true);
}
else {
resolve(false);
}
}
}) },
// 通过barcode获取数据
reads: function (db, storeName, values) {
var transaction = db.transaction(storeName);
var objectStore = transaction.objectStore(storeName);
var indexs = objectStore.index('barcode_index');
var data = [];
var request = indexs.openCursor(IDBKeyRange.only(values));
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
data.push(cursor.value);
// resolve(data);
cursor.continue();
}
else {
resolve(data)
}
};
}) },
//根据counter索引查询数据
getdatabyCounter: function (db, storeName, values) {
var transaction = db.transaction(storeName);
var store = transaction.objectStore(storeName);
var indexs = store.index('counter_index');
var datas = [];
var request = indexs.openCursor(IDBKeyRange.only(values))
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
datas.push(cursor.value);
cursor.continue();
}
else {
resolve(datas)
}
}
}) },
//根据主键和索引查询
getAll: function (db, storeName, counter, barcode) {
var transaction = db.transaction(storeName);
var objectStore = transaction.objectStore(storeName);
var counterCode = [counter, barcode];
var indexs = objectStore.index('counter_code');
var request = indexs.openCursor(IDBKeyRange.only(counterCode));
var data = [];
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
data.push(cursor.value);
//resolve(data);
cursor.continue();
}
else {
resolve(data)
} }
})
},
//根据key查询数量是否存在
getqtyBykey: function (db, storeName, key) {
var transaction = db.transaction(storeName);
var objectStore = transaction.objectStore(storeName);
var request = objectStore.get(key);
request.onerror = function (event) {
console.log('事务失败');
};
return new Promise((resolve, reject) => {
request.onsuccess = function (event) {
if (request.result) {
//console.log(request.result.qty)
resolve(request.result);
} else {
resolve(false);
}
};
}) },
// //通过游标遍历数据
getdatabycursor: function (db, storename) {
var objectStore = db.transaction(storename).objectStore(storename);
var dataList = [];
var i = ;
return new Promise((resolve, reject) => {
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
dataList.push(cursor.value)
cursor.continue();
} else {
resolve(dataList);
} };
}) },
//查询所有的柜台
getAllCounter: function (db, storename) {
var transaction = db.transaction(storename);
var store = transaction.objectStore(storename);
var indexs = store.index('counter_index');
var data = [];
return new Promise((resolve, reject) => {
indexs.openCursor().onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
// console.log(cursor.value.counter);
data.push(cursor.value.counter);
resolve(data);
cursor.continue();
}
}
})
},
getdata: function (db, storename) {
var objectStore = db.transaction(storename).objectStore(storename);
var data = [];
return new Promise((resolve, reject) => {
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
data.push(cursor.value) resolve(data)
}
else {
reject(false)
} };
})
},
getqtybyqtyindex: function (db, storename) {
var transaction = db.transaction(storename);
var store = transaction.objectStore(storename);
var indexs = store.index('qty_index');
var sum = ;
return new Promise((resolve, reject) => {
indexs.openCursor().onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
sum += cursor.value.qty
cursor.continue();
}
else {
resolve(sum)
}
}
})
} }
handSumit() {
if (this.barcode == "") {
this.$createDialog({
type: "alert",
content: "條碼為空",
confirmBtn: "確定",
icon: "cubeic-alert"
}).show();
} else {
let that = this;
let Counter = localStorage.getItem("counter");
let barcodes = this.barcode;
let shopDB = null;
let QTY = parseInt(this.qty);
let CounterCode = Counter + "-" + barcodes;
var now = new Date();
this.addtime = now;
IndexedDB.openDB(
"shopDB",
,
shopDB,
{
name: "stockTable",
key: "counterCode"
},
function(db) {
let newQty = "";
IndexedDB.getqtyBykey(db, "stockTable", CounterCode).then(x => {
if (x == false) {
let shopDB = db;
IndexedDB.putDatas(
shopDB,
"stockTable",
[
{
counterCode: CounterCode,
counter: Counter,
barcode: barcodes,
qty: QTY,
addtime: that.addtime
}
],
function() {
that.flag = true;
that.getdata();
that.serchbyArecode();
}
);
} else {
let newCounter = x.counter;
if (newCounter == Counter) {
let oldqty = parseInt(x.qty);
let newQty = QTY + oldqty; IndexedDB.putDatas(
db,
"stockTable",
[
{
counterCode: CounterCode,
counter: Counter,
barcode: barcodes,
qty: newQty,
addtime: that.addtime
}
],
function() {
that.flag = true;
that.getdata();
that.serchbyArecode();
}
);
}
}
});
}
);
this.barcode = "";
}
},
vue中indexDB的应用的更多相关文章
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- vue中watched属性
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
- 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面
v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
随机推荐
- JavaScript变量复制
1.基本类型复制变量: var num1=5: var num2=num1: num1和num2是相互独立,不会相互影响 2.引用类型从一个变量向另一个变量复制引用类型的值 两个变量指向同一个对象,所 ...
- 技巧:Vim 的纵向编辑模式
https://www.ibm.com/developerworks/cn/linux/l-cn-vimcolumn/ 开始之前 人类大脑对文字的处理是平面式的,所以我们浏览文章.查找资料或者重构代码 ...
- nuxt项目中vue报错The client-side rendered virtual ...
报错: 翻译过来是: [Vue警告]:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配.这可能是由不正确的HTML标记引起的,例如在其中嵌套块级元素或丢失.Bailing水化和执行完整的客户端渲染. ...
- ES6 的模块系统
原文地址:https://hacks.mozilla.org/2015/08/es6-in-depth-modules/ ES6 是 ECMAScript 第 6 版本的简称,这是新一代的 JavaS ...
- HashSet TreeSet
1 HashSet 1.1 父类 java.lang.Object 继承者 java.util.AbstractCollection<E> 继承者 java.util.AbstractSe ...
- Android所有Demo资源汇总,太全了(申明:来源于网络)
Android所有Demo资源汇总,太全了(申明:来源于网络) 地址:http://bbs.csdn.net/topics/391928947
- TOP100summit2017:网易测试总监钱蓓蕾——新时代测试正走向精英化、自动化、智能化
壹佰案例:钱蓓蕾老师您好,很荣幸邀请到您成为第六届壹佰案例峰会测试专场的联席主席.您从事测试工作11年了,您觉得最近几年测试工作有什么趋势上的变化么? 钱蓓蕾:测试行业近几年变化挺大的,正逐渐向精英化 ...
- 线段树||BZOJ5194: [Usaco2018 Feb]Snow Boots||Luogu P4269 [USACO18FEB]Snow Boots G
题面:P4269 [USACO18FEB]Snow Boots G 题解: 把所有砖和靴子排序,然后依次处理每一双靴子,把深度小于等于它的砖块都扔线段树里,问题就转化成了求线段树已有的砖块中最大的砖块 ...
- robot framework教程-------虫师
http://www.testclass.net/2017/09/28/happy-holidays/
- 为何串口dma发送数据可能不完整
串口dma数据发送不完整, 1. 通过打印log说明数据合成,送给dma buff都是正常的. 2. 数据通过硬件串口直接配置,是正常的 3. 数据通过单片机dma转发后数据异常,通过检查发现 dma ...