哪些编程语言适合网站开发,拓者设计吧课程,虚拟服务器搭建,网站反链一般怎么做前言
帮公司弄了一个vueelectron项目#xff0c;里面用到了axios、element-ui、ue-router、js-md5、sqlite3这些依赖库#xff0c;其中sqlite3比较难搞下面会详细展开来讲#xff0c;同时也涉及打包#xff08;window包、mac包#xff09;
开始
其实项目整体没啥好讲electron项目里面用到了axios、element-ui、ue-router、js-md5、sqlite3这些依赖库其中sqlite3比较难搞下面会详细展开来讲同时也涉及打包window包、mac包
开始
其实项目整体没啥好讲我就讲一下数据库的封装、打包配置注意事项即可
sqlite3数据库使用
ps: 你要有python2.7版本
npm install sqlite3 --save
具体安装步骤你可以百度或者参考这篇文章
安装完成之后你还要配置来到vue.config.js文件开启node环境
module.exports {pluginOptions:{electronBuilder:{nodeIntegration:true}}
}
简单封装的db.js
时间戳小技巧main.js
Date.prototype.Format function (fmt) {var o {M: this.getMonth() 1, //月份 d: this.getDate(), //日 h: this.getHours(), //小时 m: this.getMinutes(), //分 s: this.getSeconds(), //秒 q: Math.floor((this.getMonth() 3) / 3), //季度 S: this.getMilliseconds() //毫秒 };if (/(y)/.test(fmt)) fmt fmt.replace(RegExp.$1, (this.getFullYear() ).substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp(( k )).test(fmt)) fmt fmt.replace(RegExp.$1, (RegExp.$1.length 1) ? (o[k]) : ((00 o[k]).substr(( o[k]).length)));return fmt;
}
let sqlite3 require(sqlite3).verbose();
const path require(path);
let basePath process.env.NODE_ENV ! development ? path.dirname(process.execPath) : process.cwd();
let dbPath path.join(basePath, /dataBase/table.db);
console.log(数据库路径: , dbPath);
const db new sqlite3.Database(dbPath);// 启动软件时判断是否有db文件没有就创建db文件同时创建表...看个人需求自行完成// db.all(select * from province_list, (err, res) {
// console.log(JSON.stringify(res))
// })export default db// 使用1
// 1.main.js 引入注册
import db from ./db
Vue.prototype.$db db// 2.index.vue文件使用
this.$db.all(select * from province_list, (err, res) {console.log(JSON.stringify(res))
})// 使用2
// 1.index.vue文件使用
import modelHome from /db/api/home
modelHome.test()
// 2./db/aip/home/index.jsimport db from ../db
test() {return new Promise((resolve, reject) {db.all(select * from task_list, (err, res) {// console.log(res)if (err) {reject(err);} else {resolve(res);}})})},__addTask(item) {item.update_time new Date().Format(yyyy/MM/dd hh:mm:ss)item.crate_time new Date().Format(yyyy/MM/dd hh:mm:ss)return new Promise((resolve, reject) {db.all(INSERT INTO task_list VALUES (NULL, ${item.name}, ${item.linkUrl}, ${item.ua_type}, ${item.plan_open_num}, ${item.window_num}, ${item.proxy_config},${item.update_time}, ${item.crate_time}), (err, res) {if (err) {reject(err)} else {resolve(res)}})})},__updateTask(item) {item.update_time new Date().Format(yyyy/MM/dd hh:mm:ss)return new Promise((resolve, reject) {db.all(UPDATE task_list SET name${item.name}, linkUrl${item.linkUrl}, ua_type${item.ua_type}, plan_open_num${item.plan_open_num}, window_num${item.window_num}, proxy_config${item.proxy_config}, update_time${item.update_time} WHERE id${item.id}, (err, res) {if (err) {reject(err)} else {resolve(res)}})})},__dateltTask(item) {return new Promise((resolve, reject) {db.all(DELETE FROM task_list WHERE id${item.id}, (err, res) {if (err) {reject(err)} else {resolve(res)}})})},
数据库知识我们就讲完了注意点如果你没有自动生成db文件你打包之后需要手动复制db文件到安装软件的目录里面。
打包
1.隐藏help、file这些菜单
src/background.js
import { app, protocol, BrowserWindow, Menu } from electronapp.on(ready, async () {createWindow()// 隐藏菜单栏Menu.setApplicationMenu(null);
})
2.修改窗口标题名
public/index.html
!DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.ico!-- title% htmlWebpackPlugin.options.title %/title --title测试标题名/title/headbodynoscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div!-- built files will be auto injected --/body
/html3.打包配置修改各种东西
vue.config.js
module.exports {pluginOptions:{electronBuilder:{nodeIntegration:true,// 打包配置参数builderOptions: {productName: 测试应用, // 应用的名称appId: www.xxx.com, // 项目唯一标识copyright: Copyright © xxx,directories: {output: build_electron // 输出文件夹},electronDownload: {mirror: https://npm.taobao.org/mirrors/electron/ //镜像设置},win: {icon: ./src/assets/logo.ico, //打包windows版本的logotarget: [{target: nsis, // 利用nsis制作安装程序arch: [x64, // 64位ia32]}]},nsis: {oneClick: false, // 一键安装perMachine: true, // 是否开启安装时权限限制此电脑或当前用户allowElevation: true, // 允许请求提升。 如果为false则用户必须使用提升的权限重新启动安装程序。allowToChangeInstallationDirectory: true, // 允许修改安装目录installerIcon: ./src/assets/logo.ico, // 安装图标installerHeaderIcon: ./src/assets/logo.ico, // 安装时头部图标uninstallerIcon: ./src/assets/logo.ico, // 卸载图标createDesktopShortcut: true, // 创建桌面图标createStartMenuShortcut: true, // 创建开始菜单图标},}},}
}4.打包window包和mac包
package.json scripts: {e:build:mac: vue-cli-service electron:build --mac,e:build: vue-cli-service electron:build,e:serve: vue-cli-service electron:serve}
npm run e:build
// window包
npm run e:build:mac
// mac包
注意mac包需要在mac电脑才能打同时第一次打包的时候需要开启科学上网它会自动下载electron-builder依赖第一次打包成功之后 第二次就会快很多。
总结
1.sqlite3数据库安装、使用
2.打包配置注意点就是要开启科学上网
