|
|
|
@ -3,13 +3,16 @@ |
|
|
|
* @email: binbin0314@126.com |
|
|
|
* @Date: 2021-07-09 09:10:14 |
|
|
|
* @LastEditors: aBin |
|
|
|
* @LastEditTime: 2021-07-09 10:24:25 |
|
|
|
* @LastEditTime: 2021-07-09 17:27:02 |
|
|
|
--> |
|
|
|
<template> |
|
|
|
<div>1223</div> |
|
|
|
<div style="padding: 12px"> |
|
|
|
<a-button type="primary" @click="getValue">请求参数</a-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { cache } from 'config/api'; |
|
|
|
export default { |
|
|
|
name: 'Index', |
|
|
|
data() { |
|
|
|
@ -17,14 +20,42 @@ export default { |
|
|
|
nowTime: new Date(), |
|
|
|
str: '', |
|
|
|
showVideo: false, |
|
|
|
db: null, |
|
|
|
isHave: false, |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
this.justifyIndexDEB(); |
|
|
|
console.log('hello world', this.$md5('hello world')); |
|
|
|
// this.getData(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async getValue() { |
|
|
|
console.log('开始执行请求方法判断:', new Date().getTime()); |
|
|
|
const kkk = 'www.baidu.com,params:{param:{}}'; // 假的 api路径及参数 |
|
|
|
await this.read(kkk, true); // read为封装好的接口请求 |
|
|
|
setTimeout(function() { |
|
|
|
console.log('---------------------------------------------'); |
|
|
|
}, 1000); |
|
|
|
}, |
|
|
|
async getData(kkk, md5) { |
|
|
|
try { |
|
|
|
console.log('开始请求接口:', new Date().getTime()); |
|
|
|
const params = { md5 }; |
|
|
|
const res = await cache(params); |
|
|
|
const { code, msg, data } = res.data; |
|
|
|
if (code === 200) { |
|
|
|
console.log('获取到参数', data, new Date().getTime()); |
|
|
|
if (data) { |
|
|
|
this.addData(kkk, data); |
|
|
|
} else { |
|
|
|
console.log('已缓存的数据:', value, new Date().getTime()); |
|
|
|
} |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.log('error', error); |
|
|
|
} |
|
|
|
}, |
|
|
|
justifyIndexDEB() { |
|
|
|
if ('indexedDB' in window) { |
|
|
|
// 支持 |
|
|
|
@ -56,30 +87,30 @@ export default { |
|
|
|
//第一次打开数据库 ^-* |
|
|
|
|
|
|
|
console.log('第一次打开该数据库，或者数据库版本发生变化....', new Date().getTime()); |
|
|
|
var db = e.target.result; |
|
|
|
var storeNames = db.objectStoreNames; |
|
|
|
that.db = e.target.result; |
|
|
|
var storeNames = that.db.objectStoreNames; |
|
|
|
|
|
|
|
//创建数据库的表格（或者叫数据库仓库） |
|
|
|
if (!storeNames.contains('chart')) { |
|
|
|
db.createObjectStore('chart', { keyPath: 'id' }); |
|
|
|
that.db.createObjectStore('chart', { keyPath: 'kkk' }); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
openRequest.onsuccess = function(e) { |
|
|
|
//success：打开成功^-^ |
|
|
|
console.log('数据库打开成功...', new Date().getTime()); |
|
|
|
var db = e.target.result; |
|
|
|
var trans = db.transaction(['chart'], 'readwrite'); |
|
|
|
that.db = e.target.result; |
|
|
|
var trans = that.db.transaction(['chart'], 'readwrite'); |
|
|
|
var store = trans.objectStore('chart'); |
|
|
|
|
|
|
|
//4-这里面我要写很多要调用的函数了，比如，下面.....wu la wu la..... |
|
|
|
|
|
|
|
that.addData(db); //数据库中添加数据 ------->xian说这个啦 |
|
|
|
// that.addData(); //数据库中添加数据 ------->xian说这个啦 |
|
|
|
// del_data(db); //数据库中删除数据 |
|
|
|
// deal_data(db); //读取数据 |
|
|
|
// traverse_data(db); //遍历数据 |
|
|
|
that.read(db); |
|
|
|
that.update_data(db); //更新数据（类似于Add方法） |
|
|
|
// that.read(); |
|
|
|
// that.update_data(); //更新数据（类似于Add方法） |
|
|
|
}; |
|
|
|
|
|
|
|
openRequest.onerror = function(e) { |
|
|
|
@ -88,25 +119,26 @@ export default { |
|
|
|
console.dir(e); |
|
|
|
}; |
|
|
|
}, |
|
|
|
addData(db) { |
|
|
|
var name = '添加数据'; |
|
|
|
//1-把前面创建的数据库，传递过来 |
|
|
|
var db = db; |
|
|
|
addData(kkk, data) { |
|
|
|
console.log('开始判断是添加还是更新数据', new Date().getTime()); |
|
|
|
if (this.read(kkk, false)) { |
|
|
|
console.log('有数据,开始更新', new Date().getTime()); |
|
|
|
this.update_data(kkk, data); |
|
|
|
return; |
|
|
|
} |
|
|
|
console.log('无数据,开始添加', new Date().getTime()); |
|
|
|
//2-返回一个事务对象,indexDB 数据库只有 readwrite 以及readonly两个可爱的状态。 |
|
|
|
var tt = db.transaction(['chart'], 'readwrite'); |
|
|
|
var tt = this.db.transaction(['chart'], 'readwrite'); |
|
|
|
//3-objectStore方法用于返回指定的对象仓库(数据库表格)对象。 |
|
|
|
var store = tt.objectStore('chart'); |
|
|
|
//4-创建一个要添加的对象。 |
|
|
|
let list = []; |
|
|
|
for (let i = 0; i < 10000; i++) { |
|
|
|
list.push(i); |
|
|
|
} |
|
|
|
var o = { |
|
|
|
id: 100, |
|
|
|
list, |
|
|
|
var obj = { |
|
|
|
kkk, |
|
|
|
data, |
|
|
|
}; |
|
|
|
//5-添加数据：add方法的第一个参数是所要添加的数据，第二个参数是这条数据对应的键名（key） |
|
|
|
var request = store.add(o); |
|
|
|
console.log(console.log('需要添加的数据:'), obj); |
|
|
|
//5-添加数据：add方法的第一个参数是所要添加的数据，第二个参数是这条数据对应的键名（kkk） |
|
|
|
var request = store.add(obj); |
|
|
|
//6-添加数据：add方法也有两个事件，一个error一个success可以在回调函数中调用。 |
|
|
|
request.onerror = function(e) { |
|
|
|
console.log('Error', e.target.error.name); |
|
|
|
@ -118,46 +150,53 @@ export default { |
|
|
|
console.log('数据添加成功...', new Date().getTime()); |
|
|
|
}; |
|
|
|
}, |
|
|
|
read(db) { |
|
|
|
/** |
|
|
|
* 根据请求接口的路径及参数，判断indexDB数据库中是否已有数据 |
|
|
|
* 有则取旧数据，然后生成md5，再去获取新数据 |
|
|
|
* 无则直接返回旧数据 |
|
|
|
*/ |
|
|
|
read(kkk, boer) { |
|
|
|
console.log('开始判断是否已存在数据', new Date().getTime()); |
|
|
|
const that = this; |
|
|
|
var transaction = db.transaction(['chart']); |
|
|
|
var transaction = that.db.transaction(['chart']); |
|
|
|
var objectStore = transaction.objectStore('chart'); |
|
|
|
var request = objectStore.get(100); |
|
|
|
var request = objectStore.get(kkk); |
|
|
|
|
|
|
|
request.onerror = function(event) { |
|
|
|
console.log('事务失败'); |
|
|
|
request.onerror = event => { |
|
|
|
console.log('获取失败'); |
|
|
|
}; |
|
|
|
|
|
|
|
request.onsuccess = function(event) { |
|
|
|
request.onsuccess = event => { |
|
|
|
if (request.result) { |
|
|
|
console.log('通过索引获取数据:', request.result, new Date().getTime()); |
|
|
|
console.log(that.$md5(JSON.stringify(request.result))); |
|
|
|
if (boer) { |
|
|
|
console.log('获取到数据:', request.result, new Date().getTime()); |
|
|
|
that.getData(kkk, that.$md5(JSON.stringify(request.result.data)), request.result.data); |
|
|
|
} |
|
|
|
this.isHave = true; |
|
|
|
} else { |
|
|
|
console.log('未获得数据记录'); |
|
|
|
if (boer) { |
|
|
|
console.log('未获得数据', request.result, new Date().getTime()); |
|
|
|
that.getData(kkk); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
return this.isHave; |
|
|
|
}, |
|
|
|
update_data(db) { |
|
|
|
update_data(kkk, data) { |
|
|
|
//1-把前面创建的数据库，传递过来 |
|
|
|
var db = db; |
|
|
|
//2-返回一个事务对象,indexDB 数据库只有 readwrite 以及readonly两个可爱的状态。 返回一个事务对象。 |
|
|
|
|
|
|
|
var trans = db.transaction(['chart'], 'readwrite'); |
|
|
|
var trans = this.db.transaction(['chart'], 'readwrite'); |
|
|
|
var store = trans.objectStore('chart'); |
|
|
|
|
|
|
|
//3-创建一个要添加的对象，类似于add方法，但是这里对象的名称一定要和前面一样。 |
|
|
|
let list = []; |
|
|
|
for (let i = 10000; i < 20000; i++) { |
|
|
|
list.push(i); |
|
|
|
} |
|
|
|
var o = { |
|
|
|
id: 100, |
|
|
|
list, |
|
|
|
|
|
|
|
var obj = { |
|
|
|
kkk, |
|
|
|
data, |
|
|
|
}; |
|
|
|
//4-更新记录：put方法。 |
|
|
|
var request = store.put(o); |
|
|
|
var request = store.put(obj); |
|
|
|
console.log('已更新数据', new Date().getTime()); |
|
|
|
this.read(db); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
