반응형
일렉트론에서 MySQL을 연동하여 데이터를 읽어오는 것을 배워봅니다.
이 글의 동영상 강의입니다.
Database와 Data 생성
MySQL Workbench를 실행합니다.
아래 쿼리로 스키마를 생성합니다.
CREATE SCHEMA test;사용자를 생성하고 권한을 설정합니다.
CREATE USER 'test'@'localhost' identified with mysql_native_password by 'test';
GRANT ALL PRIVILEGES ON test.* TO 'test'@'localhost';
flush privileges;Workbench에서 Connection을 추가합니다.
설정한 Connection으로 접속합니다.
테이블을 생성합니다.
CREATE TABLE IF NOT EXISTS `test`.`user` (
`id` INT NOT NULL AUTO_INCREMENT,
`userid` VARCHAR(50) NULL,
`username` VARCHAR(50) NULL,
PRIMARY KEY (`id`))
ENGINE = InnoDB;아래와 같이 생성된 테이블에 데이터를 입력합니다.
insert into test.user(userid, username) values ('codegear', '코드기어');
insert into test.user(userid, username) values ('ironman', '아이언맨');
insert into test.user(userid, username) values ('spiderman', '스파이더맨');
일렉트론 Appllication 만들기
다음 스크립트로 일렉트론 Application을 만듭니다.
npx create-electron-app electron-mysqlmysql 사용을 위해 'mysql' 패키지를 설치합니다.
npm i mysqlsrc/index.html을 다음 코드를 입력합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
<title>Hello World!</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>💖 Hello World!</h1>
<p>Welcome to your Electron application.</p>
<input type="button" id="btn" value="connectToMysql"/>
<div id='users'></div>
<script src='./function.js'></script>
</body>
</html>src/function.js를 만들고 다음 코드를 입력합니다.
const mysql = require('mysql');
function setInnerHTML(text) {
const element = document.getElementById('users');
element.innerHTML += '<div>'+text+'</div>';
}
document.getElementById("btn").addEventListener("click", ()=>{
//ipc.send('getUsers');
var connection = mysql.createConnection({
host : 'localhost',
user : 'test',
password : 'test',
database : 'test'
});
connection.connect();
connection.query('SELECT * from USER', function (error, results, fields) {
if (error) throw error;
console.log('users: ', results);
results.forEach(user => {
setInnerHTML(user.username);
});
});
connection.end();
})application을 실행합니다.
npm start"require is not defined" 오류를 확인할 수 있습니다.
src/index.js의 createWindow에 다음 내용을 추가합니다.
webPreferences: {
nodeIntegration: true,
contextIsolation : false
}
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation : false
}
});Application을 다시 실행하면 아래와 같은 결과를 확인할 수 있습니다.
반응형
'일렉트론' 카테고리의 다른 글
| 일렉트론기초-14.Electron + Vue.js (0) | 2022.03.06 |
|---|---|
| 일렉트론기초-13.Electron + React로 IPC 통신하기 (0) | 2021.11.13 |
| 일렉트론기초-12.React + Electron 한방에 띄우기 (7) | 2021.11.04 |
| 일렉트론기초-10.일렉트론 사이드 메뉴 만들기 (0) | 2021.10.09 |
| 일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC) (0) | 2021.10.04 |
| 일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인 (0) | 2021.10.04 |
| 일렉트론기초-07.일렉트론 화면 개발하기 (0) | 2021.10.03 |
| 일렉트론기초-06.일렉트론 메뉴 추가하기 (0) | 2021.10.01 |
