Electron-Vue 調用本地數據庫

一、安裝 sqlite3

npm install sqlite3 –save

二、編寫建表腳本，導入數據庫

//  建表腳本，導出db對象供之后使用
import fse from 'fs-extra';
import path from 'path';
import sq3 from 'sqlite3';

export const dbPath = path.join(__dirname, '/library/seed.db');
fse.ensureFileSync(dbPath);

const sqlite3 = sq3.verbose();
const seedDB = new sqlite3.Database(dbPath);
seedDB.serialize(() => {
  /**
   * 上傳任務列表 upload_table
   * ID 任務id
   * FileCount 文件數量
   * Status 任務狀態
   * CreateDate 任務創建日期
   * SuccessDate 任務完成日期
   */
  seedDB.run(`CREATE TABLE "upload_table" (
    "ID"  INTEGER NOT NULL,
    "FileCount"  INTEGER NOT NULL,
    "Status"  INTEGER NOT NULL,
    "CreateDate"  TEXT,
    "SuccessDate"  TEXT,
    PRIMARY KEY ("ID")
    )`, err => {
    console.log(err);
  });

  /**
   * 下載任務列表 download_table
   * ID 任務id
   * FileCount 文件數量
   * Status 任務狀態
   * CreateDate 任務創建日期
   * SuccessDate 任務完成日期
   */
  seedDB.run(`CREATE TABLE "download_table" (
    "ID"  INTEGER NOT NULL,
    "FileCount"  INTEGER NOT NULL,
    "Status"  INTEGER NOT NULL,
    "CreateDate"  TEXT,
    "SuccessDate"  TEXT,
    PRIMARY KEY ("ID")
    )`, err => {
    console.log(err);
  });
});

export default {
  seedDB
}

三、導入數據存儲

將數據存儲導入到 src/renderer/main.js 里，並將其附加到 Vue 的原型（prototype）上。后續通過在所有組件文件中使用 this.$db，就可以訪問數據存儲的 API。

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './store'

//  新添加
//------------------------------------------------
import ElementUI, { Button, Select, Tabs, Table } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

//  本地數據庫
import db from './datastore'
Vue.prototype.$seeddb = db.seedDB
//------------------------------------------------

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,
  store,
  template: '<App/>'
}).$mount('#app')

四、在組件中使用數據庫

serialize 可以使內部的 sql 語句都順序執行。node 的函數都是異步的，所以這個函數應該多多重點使用。

//  更新上傳列表
updateUploadList() {
  this.tableUploadData = [];

  var temp = this.tableUploadData;
  this.$seeddb.serialize(() => {
    this.$seeddb.all('select * from [upload_table]', function(err, res) {
      res.forEach(function(obj, index, arr) {
        temp.push({
          mission_id: obj.ID,
          count: '2/3',
          process: '80%',
          status: obj.Status
        });
      });
    });
  });
}

五、遇到的問題

提示在 node_modules\sqlite3\lib\binding\electron-v2.0-win32-x64 下 cannot find mudule，去 binding 下找不到 electroon-v1.4-win32-x64 文件夾，原因是 npm install 時加載 package.json 時會在 node_modules 下安裝原生 sqlite3 模塊，binding 下會產生一個類似 node-v64-win32-x64 的文件夾，需要做的是編譯產生 node_modules\sqlite3\lib\binding\ electron-v2.0-win32-x64 路徑，手動修改並不能解決問題，需要重新手動編譯。

進入node_modules\sqlite3文件夾，運行以下命令：

npm install nan –save
node-gyp configure --module_name=node_sqlite3 --module_path=../lib/ electron-v2.0-win32-x64
node-gyp rebuild --target=2.0.4 --arch=x64 --target_platform=win32 --dist-url=https://npm.taobao.org/mirrors/atom-shell --module_name=node_sqlite3 --module_path=../lib/binding/ electron-v2.0-win32-x64

注意：

1) --target 指的是 Electron 的版本號

2) 最后的部分，一定要跟紅色框上的路徑保持一致!

3) 如果執行到對應的sql語句還是報錯，並錯誤原因跟 NODE_MODULE_VERSION 有關，大意是 version 不匹配，則運行以下命令重新並編譯即可。

npm install --save-dev electron-rebuild
.\node_modules\.bin\electron-rebuild.cmd