前言：
此篇文章基于
篇一
和
篇二
中搭建好的项目进行，项目中安装了
Element
， 相应的代码地址：
https://github.com/ddx2019/vue-electron-demo
Lowdb
,一个小型的本地
JSON
数据库; 用于
Node
，
Electron
和浏览器的小型
JSON
数据库。由
Lodash
驱动.用法如下：
示例的
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
}
yarn add lowdb
在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.prototype.mydb = function (FileName) {
const NamePath = path.join(__static, `/json/${FileName}.json`)
const adpets = new FileSync(NamePath)
const data = DataStore(adpets)
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" }即可。
import Vue from 'vue'
import db from '@/utils/datastore.js'
Vue.use(db)
LowdbTest.vue （在views文件夹下新建了一个test文件夹，test文件夹下新建文件LowdbTest.vue）
<template>
<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(){
let data=this.mydb('db').get('RECORDS').find({uid:2}).value();
console.log(data);
insertData(){
this.mydb('db').get('RECORDS').push({ uid: 4, name: 'xxx', info: '新纪录' }).write();
updateData(){
this.mydb('db').get('RECORDS').find({ uid:1 }).assign({ title: 'Lowdb'}).write()
delData(){
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
介绍：轻量级本地
JSON数据库；
使用JSON为存储的数据结构，基于lodash（https://www.lodashjs.com/）开发；
实际应用：
Vue项目中Vuex存储数据，刷新页面时数据丢失的问题；此种情况下可用
lowdb＋LocalStorage适配器解决；
即在路由钩子函数 beforeEach
中重新加载数据，从
lowdb中获取数据，并将获取的数据重新放入
Vuex的state对象
中；每次更新state
中的数据时， 同时也更新
lowdb中存放的数据；
lowdb使用方法
const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync'); // 同步模块
const Memory = require('lowdb/adapters/Memory'); // 存入内存
const path = require('path');
const fs = r...
之前在上面这篇博文写到想做一个标记的本地应用,最近感觉想法成型了,于是开始研究怎么做出来.
中间种种过程略去不提,但谈我最后选用
electron 来开发,然后需要用到
数据库,没怎么比较,选择了
lowdb 这个基于
json 的
小型数据库.
先贴官方链接.
Githug-
lowdb
然后入门教程看的这篇 :
Electron-
vue开发实战2——引入基于Lodash的
JSON数据库l...
Lowdb
适用于Node，Electron和浏览器的小型JSON数据库。 由Lodash驱动。 :high_voltage:
db . get ( 'posts' )
. push ( { id : 1 , title : 'lowdb is awesome' } )
. write ( )
npm install lowdb
const low = require ( 'lowdb' )
const FileSync = require ( 'lowdb/adapters/FileSync' )
const adapter = new FileSync ( 'db.json' )
const db = low ( adapter )
// Set some defaults (required if your JSON file is empty)
db . defaults ( { posts : [ ] , user : { } , count : 0 } )
. write ( )
// Add a post
db . get ( 'posts' )
电子和其他Node.js应用程序的平面文件数据库解决方案。
electronic-db是一个npm库，可让您简化json文件的数据库创建和操作。
json文件保存在应用程序文件夹中，或者您可以指定要创建的数据库的位置。 从版本0.10.0开始，用户可以选择将数据库表保存到他们选择的任何位置。
与默认位置的唯一区别在于，用户必须将字符串位置作为第二个参数传递给要使用的任何函数（如果要控制数据库位置，这是可选的）。
table_name.json包含的表格式应为
"table_name": [
"field1": "Value of field 1",
"field2": "Value of field 2",
要点：使用该库的脚本应首先与电子命令一起运行，以便在用户数据文件夹上创建目
适用于Node，Electron和浏览器的小型JSON数据库。 由Lodash驱动。 您可以使用简写语法使用任何强大的lodash函数，例如_.get和_.find。 一般而言，Lowdb非常适合CLI，小型服务器，Electron应用程序和npm软件包。 它支持浏览器Node并使用lodash API，因此学习非常简单。 实际上，如果您了解Lodash，那么您已经知道如何使用lowdb。 lowdb不支持集群，并且可能与非常大的JSON文件（约200MB）有关。 还可以在unpkg上使用UMD版本进行测试和快速原型制作。 数据库lodash实例。 使用它来添加您自己的实用程序功能或第三方混合，例如underscore-contrib或lodash-id。 使用lowdb，您可以访问整个lodash API，因此有许多方法可以查询和处理数据。
电子json存储
在Electron应用程序中轻松写入和读取用户设置
缺乏一种简单的方法来保存和读取应用程序的用户设置。 electron-json-storage实现了某种类似于的API，以将app.getPath('userData')定义的JSON对象写入操作系统应用程序数据目录，或从操作系统应用程序数据目录读取JSON对象。
相关模块：
通过运行以下命令安装electron-json-storage ：
$ npm install --save electron-json-storage
您可以从main或renderer进程（带remote和不带remote ）中都需要
"productName": "MyElectronApp",
"appId": "com.example.my-electron-app",
"directories": {
"output": "build"
"files": [
"dist/**/*",
"node_modules/**/*",
"package.json"
"win": {
"icon": "public/icon.ico",
"target": "nsis"
"nsis": {
"oneClick": false,
"allowElevation": true,
"installerIcon": "public/icon.ico",
"uninstallerIcon": "public/icon.ico",
"installerHeaderIcon": "public/icon.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "MyElectronApp"
其中，productName、appId、icon等可以根据实际情况进行修改。
5. 修改main.js
在src/main.js文件中添加以下内容：
const { app, BrowserWindow } = require('electron')
let win
function createWindow() {
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
win.loadFile('dist/index.html')
win.on('closed', () => {
win = null
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
app.on('activate', () => {
if (win === null) {
createWindow()
6. 编译打包
在终端中输入以下命令来编译打包应用：
npm run build
打包后的应用程序将保存在build目录中。
7. 运行应用
在终端中输入以下命令来启动应用：
npm start
应用程序将在Electron中运行。
element的pagenation，使用pager-count报错，Invalid prop: custom validator check failed for prop “pagerCount
非洲药王:
vue+Electron,自定义最大化、最小化、关闭窗口的功能
ddx2019:
vue+Electron,自定义最大化、最小化、关闭窗口的功能
qq_48617559:
Element的input 实现带图标密码框的明密文（点击眼睛显示密码,再次点击图标隐藏密码）
ddx2019:
Element的input 实现带图标密码框的明密文（点击眼睛显示密码,再次点击图标隐藏密码）
小猫猫改bug:
