Electron-Vue 操作本地数据库nedb

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')