electron应用操作数据的几种方法：
1、远程api接口 （多个客户端公用一套数据） *
2、连接远程数据库 (局域网内使用 多个客户端公用一套数据 ) （不建议使用）
3、连接本地数据库 （nedb sqlite） 应用本地保存数据（localstore 5M） 用户设置信息 qq聊天记录
electron-vue读写本地数据库文件
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/savingreading-local-files.html
electron app模块详细：
https://www.w3cschool.cn/electronmanual/electronmanual-electronapp.html
Nedb 数据库文档：
https://github.com/louischatriot/nedb
nedb数据库和mongodb数据库的操作方法几乎一模一样。
electron-vue中使用Nedb 数据库。
1、安装nedb数据库
cnpm install nedb --save
2、新建一个src/render/datastore.js
import Datastore from 'nedb'
import path from 'path'
import { remote } from 'electron'
export default new Datastore({
autoload: true,
filename: path.join(remote.app.getPath('userData'), '/data.db')
})
3、src/renderer/main.js
import db from './datastore.js'
/* 其它代码 */
Vue.prototype.$db = db
4、在vue的组件里面实现数据的增加 修改 删除 显示
this.$db.insert({},function(){
})
this.$db.find({},function(){
//获取查询的数据
})
this.$db.update({条件},{$set:{更改的数据}},function(){
})
this.$db.remove({条件},{},function(){
})
示例代码：
home.vue
<template>
<div id="home">
<input type="text" v-model="name" placeholder="姓名"/>
<input type="text" v-model="age" placeholder="年龄"/>
<br>
<button @click="addData()">增加数据</button>
<br>
<br>
<button @click="updateData()">编辑数据</button>
<br>
<br>
<button @click="deleteData()">删除数据</button>
<br><br><br>
<button @click="findData()">查找数据</button>
<br>
<ul>
<li v-for="item in list">
{{item._id}}-- {{item.name}}-----{{item.age}}
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return {
msg:'首页组件',
name:'',
age:'',
list:[]
}
},
methods:{
findData(){
//查找数据
// this.$db.find({"age":30}, (err, docs)=>{
// if(err){
// console.log(err);
// return;
// }
// console.log(docs);
// this.list=docs;
// })
this.$db.find({}, (err, docs)=>{
if(err){
console.log(err);
return;
}
console.log(docs);
this.list=docs;
})
},
addData(){
//获取表单数据
console.log(this.name,this.age);
//https://github.com/louischatriot/nedb
this.$db.insert({"name":this.name,"age":this.age},function(err,doc){
if(err){
console.log(err);
return;
}
console.log(doc);
})
},
updateData(){
// this.$db.update({"name":"wangwu","age":30},{$set:{"name":"王五"}},function(err,data){
// if(err){
// console.log(err);
// return;
// }
// console.log(data);
// })
this.$db.update({"_id":"cHODtJOIft1YcOMN"},{$set:{"name":"赵六"}},function(err,data){
if(err){
console.log(err);
return;
}
console.log(data);
})
},
deleteData(){
this.$db.remove({"_id":"6nAYPLImXRs7mB0P"},{},function(err,data){
if(err){
console.log(err);
return;
}
console.log(data);
})
}
}
}
</script>
new.vue
<template> <div id="news"> 新闻组件 <br> <button @click="runNode()">使用nodejs的fs模块</button> <ul> <li v-for="item in list"> {{item._id}}-- {{item.name}}-----{{item.age}} </li> </ul> </div> </template> <script> var fs=require('fs'); export default{ data(){ return { msg:'我是新闻页面', list:[] } }, methods:{ runNode(){ fs.readFile('package.json',(err,data)=>{ if(err){ console.log(err); return; } console.log(data.toString()); }) } }, mounted() { this.$db.find({}, (err, docs)=>{ if(err){ console.log(err); return; } console.log(docs); this.list=docs; }) } } </script>
datastore.js
import Datastore from 'nedb'; import path from 'path'; import { remote } from 'electron'; export default new Datastore({ autoload: true, filename: path.join(remote.app.getPath('userData'), '/data.db') //指定数据库文件路径 // 路径参考https://www.w3cschool.cn/electronmanual/electronmanual-electronapp.html })
main.js
import Vue from 'vue' import axios from 'axios' import App from './App' import router from './router' //实例化db库 import db from './datastore.js'
/* 其它代码 */ Vue.prototype.$db = db; if (!process.env.IS_WEB) Vue.use(require('vue-electron')) Vue.http = Vue.prototype.$http = axios Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ components: { App }, router, template: '<App/>' }).$mount('#app')