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 ...
随机推荐
- 8. Oracle通过rman进行克隆
一. 安装规划 IP ROLE 192.168.1.235 克隆对象 192.168.1.221 克隆库 二. 备库创建相应的dump文件夹 # 在主库查询对应的dump目录 select name, ...
- linux相关(3)
1. shell环境变量 能够存在于本shell进程及其子shell进程的变量.变量可以从父shell进程传递给子shell进程,而不能反过来,因此环境变量在子shell进程中无论如何修改都不会影响到 ...
- Maven传递依赖的坑:父pom中dependencyManagement版本优先级高于传递依赖版本
一.由来 之前同事问了个问题,就是当前工程为spring boot项目,假设版本号为2.0.3 这个项目中依赖了一个spring boot项目依赖(先别管为啥有这么奇葩的依赖,这个版本是1.5.9). ...
- Python scipy 计算短时傅里叶变换(Short-time Fourier transforms)
计算短时傅里叶变换(STFT) scipy.signal.stft(x,fs = 1.0,window ='hann',nperseg = 256,noverlap = None,nfft = Non ...
- H - Being a Good Boy in Spring Festival
一年在外 父母时刻牵挂 春节回家 你能做几天好孩子吗 寒假里尝试做做下面的事情吧 陪妈妈逛一次菜场 悄悄给爸爸买个小礼物 主动地 强烈地 要求洗一次碗 某一天早起 给爸妈用心地做回早餐 如果愿意 你还 ...
- 遍历form表单里面的表单元素,取其value
form.elements 获取所有表单元素 form 表单 <form action="http://localhost:1995/api/post" class=&quo ...
- 错误票据|2013年蓝桥杯B组题解析第七题-fishers
错误票据 某涉密单位下发了某种票据,并要在年终全部收回. 因为工作人员疏忽,在录入ID号的时候发生了一处错误,造成了某个ID断号,另外一个ID重号. 你的任务是通过编程,找出断号的ID和重号的ID. ...
- Eclipse中代码格式化配置
一.配置formatter 从Eclipse主菜单选择“窗口→首选项”,进入“代码格式化程序”设置页.如下图所示: 确认选择的是格式化配置是Eclipse [built-in]. 注意:编写好代码后需 ...
- sql里的ROW_NUMBER() OVER是啥意思?
是一个分析函数,生成一个排序列select row_number(XX) over(partition by XXX order by XX [desc/asc]) frou table;partit ...
- nowcoder 211B - 列队 - [(伪·良心贪心)真·毒瘤暴力]
题目链接:https://www.nowcoder.com/acm/contest/211/B 题目描述 炎热的早上,gal男神们被迫再操场上列队,gal男神们本来想排列成x∗x的正方形,可是因为操场 ...