本文主要介绍通过使用mysql包进行mysql数据库的连接，其他数据库有对应的包，可自行查询。
直接上代码，清晰明了
1.安装mysql
yarn add mysql
2.创建连接数据库的主文件mySql.js
// mySql.js
const mysql = require('mysql');
const pool = mysql.createPool({
host: 'localhost', // 数据库地址
user: 'root', // 用户名
password: 'root',// 密码
port: '3306',// 端口
database: 'demo' // 查询的数据库
});
//导出查询相关
var query = function (sql, callback) {
pool.getConnection(function (err, conn) {
if (err) {
callback(err, null, null);
} else {
conn.query(sql, function (qerr, vals, fields) {
//释放连接
// conn.release();
pool.releaseConnection(conn);
//事件驱动回调
callback(qerr, vals, fields);
});
}
});
};
//向外暴露方法
module.exports = {
pool,
query
}
3.在electron主文件main.js中引入mySql.js,并添加一个ipcMain进程实现监听渲染进程发过来的queryMysql（自定义）事件。
const mySql = require('./mySql');
// 添加一个进程监听，监听来自send的事件
ipcMain.on('queryMysql',(event, arg) => {
console.log('connect mysql sql:',arg) // prints "sql"
// 接收一个args 此处args是一条sql语句
mySql.query(arg,(qerr,vals,fields)=>{
// 通过conn.query进行查询，查询结果是vals
// 发起消息回调事件，发起reply，将vals传递回去
event.sender.send('replyMysql', vals);
})
});
4.渲染进程创建一个操作数据库的jsx页面ConnectDb.tsx（vue同理）,如下代码所示
import React ,{useState}from 'react';
const { ipcRenderer} = window.require('electron');
import { Button ,Input} from 'antd';
const { TextArea } = Input;
const ConnectDb: React.FC = () => {
const [fileValue, setFileValue] = useState<string>('1');
const connectNow = () => {
// 通过ipcRenderer.send发起一个send请求，将sql语句作为args传递过去
ipcRenderer.send('queryMysql','select * from temp');
// 渲染进程监听reply
ipcRenderer.on('replyMysql',(event:any,args:any)=>{
// 获取的args就是sql中查询出来的数据
console.log(event);
console.log(args);
setFileValue(JSON.stringify(args));
})
}
return (
<div>
<Button onClick={connectNow}> 读取数据库</Button>
<div>以下为数据库内容</div>
<TextArea
rows={4}
value={fileValue}
onChange={(e) => {
setFileValue(e.target.value);
}}
/>
</div>
);
};
export default ConnectDb;
