一、安装 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