新增db.js文件

src/util/indexedDb.js

@@ -0,0 +1,243 @@
+export default {
+    // indexedDB 兼容
+    indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || window.mozIndexedDB,
+   
+    /**
+     * 打开数据库
+     * 新对象存储空间newStore参数：newStore.name、newStore.key
+     * 新增对象存储空间要更改数据库版本
+     * @param {数据库名称} dbname
+     * @param {版本} version
+     * @param {数据库} db
+     * @param {配置} newStore
+     * @param {回调函数} callback
+     * */
+    openDB(dbname, version, newStore, callback) {
+        let db
+        version = version || 1;
+        const request = this.indexedDB.open(dbname, version);
+        
+        // 打开失败回调
+        request.onerror = function () {
+            throw "IndexedDb数据库打开错误"
+        }
+
+        // 打开成功回调
+        request.onsuccess = function(event) {
+            db = event.target.result;
+            if (callback && (typeof callback === 'function')) {
+                callback(db);
+            }
+        }
+
+        // 调用创建新的存储空间
+        request.onupgradeneeded = function(event) {
+            db = event.target.result;
+            if (newStore) {
+                if (!db.objectStoreNames.contains(newStore.name)) {
+                    const objectStore = db.createObjectStore(newStore.name, {
+                        keyPath: newStore.key
+                    })
+                    
+                    newStore.index.forEach(item => {
+                        objectStore.createIndex(`${item}_index`, item, {
+                            unique: false
+                        })
+                    })
+                }
+            }
+        }
+    },
+
+    /**
+     * 删除数据库
+     * @params {*} dbname
+     * @params {*} callback
+     * */ 
+    deleteDb(dbname, callback) {
+        const deleteQuest = this.indexedDB.deleteDatabase(dbname);
+        deleteQuest.onerror = function() {
+            throw "删除数据库出错";
+        }
+
+        deleteQuest.onsuccess = function() {
+            if (callback && (typeof callback === 'function')) {
+                callback();
+            }
+        }
+    },
+
+    /**
+     * 关闭数据库
+     * @params {*} dbname
+     * */
+    closeDB(dbname) {
+        dbname.close();
+    },
+
+    /**
+     * 删除数据
+     * @params {*} db
+     * @params {*} storename
+     * @params {*} key
+     * @params {*} callback
+     * */
+    deleteData(db, storename, key, callback) {
+        const store = db.transaction(storename, 'readwrite').objectStore(storename)
+        const request = store.delete(key);
+        request.onsuccess = function() {
+            if (callback && (typeof callback === 'function')) {
+                callback(`删除${storename}成功`)
+            }
+        }
+        request.onerror = function() {
+            if (callback && (typeof callback === 'function')) {
+                callback(`删除${storename}失败`)
+            }
+        }
+    },
+
+    
+    /**
+     * 清空数据
+     * @params {*} db
+     * @params {*} storename
+     * @params {*} callback
+     * */
+     clearData(db, storename, callback) {
+        const store = db.transaction(storename, 'readwrite').objectStore(storename);
+        const request = store.clear();
+
+        request.onsuccess = function() {
+            if (callback && (typeof callback === 'function')) {
+                callback(`清空${storename}成功`)
+            }
+        }       
+        request.onerror = function() {
+            if (callback && (typeof callback === 'function')) {
+                callback(`清空${storename}失败`)
+            }
+        }
+    },
+    
+
+    /**
+     * 添加数据
+     * @params {*} db
+     * @params {*} storename
+     * @params {*} obj
+     * */
+     addData(db, storename, list) {
+        const store = db.transaction(storename, 'readwrite').objectStore(storename);
+        list.forEach(ls => {
+            const request = store.add(ls);
+            request.onsuccess = function() {
+                console.log(`写入${storename}数据成功`)
+            }
+            request.onsuccess = function() {
+                console.log(`写入${storename}数据失败`)
+            }
+        })
+    },
+
+    /**
+     * 更新数据
+     * @params {*} db
+     * @params {*} storename
+     * @params {*} obj
+     * */
+     updateData(db, storename, list) {
+        const store = db.transaction(storename, 'readwrite').objectStore(storename);
+        list.forEach(ls => {
+            const request = store.put(ls);
+            request.onsuccess = function() {
+                console.log(`更新${storename}数据成功`)
+            }
+            request.onsuccess = function() {
+                console.log(`更新${storename}数据失败`)
+            }
+        })
+    },
+
+    /**
+     * 根据主键获取数据
+     * @params {*} db
+     * @params {*} storename
+     * @params {*} key
+     * @return
+     * */
+    getData(db, storename, key) {
+        const store = db.transaction(storename, 'readwrite').objectStore(storename);
+        const request = objectStore.get(key);
+        request.onerror = function() {
+            console.log(`获取${storename} 里主键 ${key} 的数据失败`)
+        }
+        return new Promise(resolve => {
+            request.onsuccess = function(e) {
+                resolve(e.target.result)
+            }
+        })
+    },
+
+
+    /**
+     * 根据索引获取数据
+     * @params {*} db
+     * @params {*} storename
+     * @params {*} field
+     * @params {*} val
+     * @return
+     * */
+     getDataByIndex(db, storename, field, val) {
+        const store = db.transaction(storename, 'readwrite').objectStore(storename);
+        const index = store.index(`${field}_index`);
+        const request = index.get(val)
+        return new Promise(resolve => {
+            request.onsuccess = function(e) {
+                resolve(e.target.result)
+            }
+        })
+    },
+
+    /**
+     * 获取全部数据
+     * @params {*} db
+     * @params {*} storename
+     * @return
+     * */
+     getAllData(db, storename) {
+        const store = db.transaction(storename, 'readwrite').objectStore(storename);
+        const request = store.openCursor();
+
+        let data = [];
+        return new Promise(resolve => {
+            request.onsuccess = function(e) {
+                let cursor = e.target.result;
+                if (cursor) {
+                    data.push(cursor.value);
+                    cursor.continue();
+                } else {
+                    resolve(data)
+                }
+            }
+        })
+    },
+
+    /**
+     * 遍历全部数据，判断是否已存在数据库
+     * @params {*} allDbData
+     * @params {*} key
+     * @return
+     * */
+    readAllData(allDbData, key) {
+        let flagIndex
+        allDbData.then((result) => {
+            flagIndex = result.findIndex(val => {
+                return (val.name == key)
+            })
+        })
+        return flagIndex;
+    }    
+
+
+}

src/views/admin/log/log.vue

@@ -3,7 +3,7 @@
   <div class="log">
     <basic-container>
       <avue-crud
-      height="100px"
+        height="100px"
         ref="crud"
         :page.sync="page"
         :data="tableData"

src/views/admin/log/msg → py.vue

@@ -1,83 +0,0 @@
-<template>
-  <div>
-    <div class="edit_container">
-      <quill-editor
-      style="height:500px;"
-        v-model="content"
-        ref="myQuillEditor"
-        :options="editorOption"
-        @blur="onEditorBlur($event)"
-        @focus="onEditorFocus($event)"
-        @change="onEditorChange($event)"
-      >
-      </quill-editor>
-    </div>
-   <div style="margin-top:100px;">
-      <el-button @click="upload">确定</el-button>
-   </div>
-  </div>
-</template>
-
-<script>
-import { quillEditor } from "vue-quill-editor"; //调用编辑器
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
-import "quill/dist/quill.bubble.css";
-// 原型
-// https://blog.csdn.net/senmage/article/details/82388728
-export default {
-  data() {
-    return {
-      content: ``,
-      editorOption: {
-        placeholder: "请在这里输入",
-        modules: {
-          toolbar: [
-            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
-            ["blockquote", "code-block"], //引用，代码块
-            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
-            [{ list: "ordered" }, { list: "bullet" }], //列表
-            [{ script: "sub" }, { script: "super" }], // 上下标
-            [{ indent: "-1" }, { indent: "+1" }], // 缩进
-            [{ direction: "rtl" }], // 文本方向
-            [{ size: ["small", false, "large", "huge"] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
-            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
-            [{ font: [] }], //字体
-            [{ align: [] }], //对齐方式
-            ["clean"], //清除字体样式
-            ["image", "video"], //上传图片、上传视频
-          ],
-        },
-      },
-    };
-  },
-  components: {
-    quillEditor,
-  },
-  mounted() {},
-  computed: {
-    editor() {
-      return this.$refs.myQuillEditor.quill;
-    },
-  },
-  methods: {
-    onEditorReady(editor) {
-      // 准备编辑器
-    },
-    onEditorBlur() {}, // 失去焦点事件
-    onEditorFocus() {}, // 获得焦点事件
-    onEditorChange() {}, // 内容改变事件
-    upload() {
-      console.log(this.content);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped >
-.edit_container{
-  height: 600px;
-
-}
-</style>