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