• 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_modulessqlite3libindingelectron-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_modulessqlite3libinding electron-v2.0-win32-x64 路径,手动修改并不能解决问题,需要重新手动编译。

    进入node_modulessqlite3文件夹,运行以下命令:

    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
    .
    ode_modules.binelectron-rebuild.cmd
  • 相关阅读:
    util-tool工具 、时间格式化
    好用的 UI 调试技巧
    扩展jQuery的方法
    mybatis判断是否传递了条件
    mysql创建视图不允许子查询
    springMVC传递MAP给JS
    XPS15 安装ubuntu之后无法进入系统
    XPS15 9560 切换显卡之后,无法登陆的解决方式
    fedora安装chrome报错
    linux挂载硬盘
  • 原文地址:https://www.cnblogs.com/zerotoinfinity/p/14184576.html
Copyright © 2020-2023  润新知