vue-cli+Electron项目中___ 小型本地JSON数据库Lowdb的使用
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-09-12 18:36:12
前言:
此篇文章基于篇一和篇二中搭建好的项目进行,项目中安装了Element
, 相应的代码地址:https://github.com/ddx2019/vue-electron-demo
Lowdb
Lowdb
,一个小型的本地JSON
数据库; 用于Node
,Electron
和浏览器的小型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
}
}
}
注意:
- 这里的
__static
是lowdb
提供的,故能在vue-cli3
中使用,它取到的是当前项目的public
的路径, - 如,我的项目在
G
盘,我项目的名字是vue-electron-demo
,这里的 __static就是:G:\vue-electron-demo\public
- 新版的
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()
}
}
}
如果是按顺序执行的上面的getData
、insetData
、updateData
、delData
方法 , 最终的db.json
应该是:
{
"RECORDS": [
{
"uid": 2,
"user": {
"name": "typicode",
"age": 18
}
},
{
"uid": 4,
"name": "xxx",
"info": "新纪录"
}
]
}
在实际的项目中,实际可能只用得到获取本地JSON
的数据,并将数据渲染到页面上;
也可在electron
中使用Lowdb
指定存储位置进行数据本地持久化存储。
这里只是简单的使用示例,详细用法 参考 https://github.com/typicode/lowdb