用electron和MySQL实现用户登录与注册功能的代码
时间: 2024-05-13 09:16:31 浏览: 156
以下是一个使用 Electron 和 MySQL 实现用户登录与注册功能的示例代码:
1. 安装必要的依赖
```
npm install mysql electron --save
```
2. 创建一个 `index.html` 文件,用于用户登录和注册的界面
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron MySQL Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="login-form">
<h1>Login</h1>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
<form id="register-form">
<h1>Register</h1>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Register</button>
</form>
<script src="renderer.js"></script>
</body>
</html>
```
3. 创建一个 `renderer.js` 文件,用于处理用户登录和注册的逻辑
```js
const mysql = require('mysql');
// 创建 MySQL 连接池
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: 'password',
database: 'demo'
});
// 处理登录表单提交事件
const loginForm = document.querySelector('#login-form');
loginForm.addEventListener('submit', event => {
event.preventDefault();
const username = loginForm.elements.username.value;
const password = loginForm.elements.password.value;
// 查询用户是否存在
pool.query('SELECT * FROM users WHERE username = ? AND password = ?', [username, password], (error, results) => {
if (error) {
console.error(error);
return;
}
if (results.length === 0) {
alert('Invalid username or password');
return;
}
alert('Welcome!');
});
});
// 处理注册表单提交事件
const registerForm = document.querySelector('#register-form');
registerForm.addEventListener('submit', event => {
event.preventDefault();
const username = registerForm.elements.username.value;
const password = registerForm.elements.password.value;
// 查询用户是否已存在
pool.query('SELECT * FROM users WHERE username = ?', [username], (error, results) => {
if (error) {
console.error(error);
return;
}
if (results.length > 0) {
alert('Username already exists');
return;
}
// 插入新用户
pool.query('INSERT INTO users (username, password) VALUES (?, ?)', [username, password], (error, results) => {
if (error) {
console.error(error);
return;
}
alert('Successfully registered');
});
});
});
```
4. 创建一个 `main.js` 文件,用于启动 Electron 应用
```js
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile('index.html');
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
```
5. 创建一个 `style.css` 文件,用于美化界面
```css
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
form {
width: 400px;
margin: auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
h1 {
text-align: center;
margin-top: 0;
}
label {
display: block;
margin-bottom: 10px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
margin-bottom: 20px;
}
button[type=submit] {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type=submit]:hover {
background-color: #3e8e41;
}
```
6. 在 MySQL 中创建一个 `users` 表,用于存储用户信息
```sql
CREATE TABLE users (
id INT NOT NULL AUTO_INCREMENT,
username VARCHAR(255) NOT NULL,
password VARCHAR(255) NOT NULL,
PRIMARY KEY (id)
);
```
7. 运行应用
```
electron .
```
以上就是一个使用 Electron 和 MySQL 实现用户登录与注册功能的示例代码。
阅读全文