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');
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,
electron vue教程
"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 (!v.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
/* 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=/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\.d

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。