vue-cli+Electron项目中___ 小型本地JSON数据库Lowdb的使用

来源:csdn博客 分类: 文章浏览史 发布时间:2021-09-12 18:36:12 最后更新:2021-09-12 浏览:429
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-09-12 18:36:12

前言:
此篇文章基于篇一篇二中搭建好的项目进行,项目中安装了Element, 相应的代码地址:https://github.com/ddx2019/vue-electron-demo

Lowdb

Lowdb ,一个小型的本地JSON数据库; 用于NodeElectron和浏览器的小型JSON数据库。由Lodash驱动.用法如下:

1. 在项目的public 下有一个本地JSON文件,db.json如下:

示例的JSON中,该json是一个大对象,对象内有一大数组,所有的内容都在RECORDS数组中,数组的每一个元素又是一个对象,且每一个对象都有唯一的标志字段,uid

db.json ( 在项目的public下新建一个json文件夹,在它下面新建一个db.json文件,内容如下:)

{
    "RECORDS":[
        { 
            "uid": 1, 
            "title": "lowdb is awesome", 
            "count": 1
        },
        {
            "uid":2 ,
            "user": {"name": "typicode","age":18}
        }      
]
  }

在这里插入图片描述

2. 安装Lowdb

yarn add lowdb 

3. 在一个单独的文件中进行封装

src下新建一个utils文件夹,utils下新建一个datastore.js文件(这两个名字可以任意取,位置也可自选)

datastore.js

import DataStore from 'lowdb'
import FileSync from 'lowdb/adapters/FileSync'
import path from 'path'

export default {
 install (Vue) { // 该行固定写法,安装vue.js插件时,关于install方法,参考vue官网,https://cn.vuejs.org/v2/api/
    Vue.prototype.mydb = function (FileName) { //  将 mydb 这个方法挂载在Vue的原型上,FileName是json文件的名字
      const NamePath = path.join(__static, `/json/${FileName}.json`)// 拿到传入的json的存储路径;该json文件存在public文件夹下的json文件夹下。
      const adpets = new FileSync(NamePath) // 初始化lowdb读写的json文件名以及存储路径
      const data = DataStore(adpets) // lowdb接管该文件
      return data
    }
  }
}

注意:

  1. 这里的__staticlowdb提供的,故能在vue-cli3中使用,它取到的是当前项目的public的路径,
  2. 如,我的项目在G盘,我项目的名字是vue-electron-demo,这里的 __static就是: G:\vue-electron-demo\public
  3. 新版的 eslint 下,可能会检测出__static未定义,导致项目报错,此时可以选择去除eslint的对未定义变量的检测规则,
    如: 在package.json中,加 "rules": { "no-undef": "off" }即可。

4. 在main.js中引入并挂载在vue实例,方便在全局使用:

import Vue from 'vue'
import db from '@/utils/datastore.js'
Vue.use(db) // 将db挂载在vue 的实例上,在任意组件中都可以通过this.mydb访问到 datastore.js中的mydb方法

5. 在组件中使用,LowdbTest.vue中:

LowdbTest.vue (在views文件夹下新建了一个test文件夹,test文件夹下新建文件LowdbTest.vue)

<template>
    <div>
        <el-button @click="getData">获取数据</el-button>
        <el-button @click="insertData">插入数据</el-button>
        <el-button @click="updateData">修改数据</el-button>
        <el-button @click="delData">删除数据</el-button>
    </div>
</template>
export default {
    name:'home',
    methods:{
        getData(){
            // this.mydb('db') 访问挂载在Vue上的mydb方法,并将json文件名‘db’传给该方法
            let data=this.mydb('db').get('RECORDS').find({uid:2}).value();//找到项目的 public下的db.json文件中的,RECORDS下的,字段uid为2的对象;
            console.log(data); // {uid: 2, user: {…}}uid: 2user: {name: "typicode", age: 18}__proto__: Object
        },
        insertData(){
           // 给项目中 public下的db.json文件的RECORDS数组新增一个元素
            this.mydb('db').get('RECORDS').push({ uid: 4, name: 'xxx', info: '新纪录' }).write();
            // push成功后可以查看到,db.json中多了一个比之前多了一个 { uid: 4, name: 'xxx', info: '新纪录' }
        },
        updateData(){
            // 找到db.json里RECORDS数组中,uid为1的元素(是一个对象),并把它的title改为  Lowdb
           this.mydb('db').get('RECORDS').find({ uid:1 }).assign({ title: 'Lowdb'}).write()
           // 修改成功后,可查看到db.json中的uid为1的对象的title的值为 Lowdb
        },
        delData(){
            //删除db.json里RECORDS数组中 uid为1的对象,删除的前提是uid为1的数据存在
             this.mydb('db').get('RECORDS').remove({ uid: 1 }).write()
        }
    }
}      

如果是按顺序执行的上面的getDatainsetDataupdateDatadelData方法 , 最终的db.json应该是:

{
  "RECORDS": [
    {
      "uid": 2,
      "user": {
        "name": "typicode",
        "age": 18
      }
    },
    {
      "uid": 4,
      "name": "xxx",
      "info": "新纪录"
    }
  ]
}

在实际的项目中,实际可能只用得到获取本地JSON数据,并将数据渲染到页面上
也可在electron中使用Lowdb指定存储位置进行数据本地持久化存储。

这里只是简单的使用示例,详细用法 参考 https://github.com/typicode/lowdb

php技术微信