用electron和MySQL实现用户登录与注册功能的代码

以下是一个使用 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 实现用户登录与注册功能的示例代码。

用electron和MySQL实现用户登录与注册功能的代码

相关推荐

Electron中实现大文件上传和断点续传功能

electron实现qq快捷登录的方法示例

electron + vue项目实现打印小票功能及实现代码

使用Electron实现用户认证和权限管理

利用Electron实现数据持久化：使用IndexedDB和SQLite

利用Electron的IPC实现渲染进程与主进程之间的通信

创建自定义Electron插件和扩展功能

利用Electron实现音视频播放与多媒体处理

electron使用mysql模块查询登录用户语句

electron使用mysql模块连接服务器代码

electron连接MySQL数据库的代码

react + electron实现登录的时候记住记住密码 思路 代码

react + electron 实现登录的时候记住密码，思路和代码，要求密码加密

electron与mysql通信的方法

electron怎么和mysql通信

用electron-vite开发一个登录功能

vue3 electron 实现登录跳转

electron 实现浏览器ctrl+F的功能

vue3+vite+electron打印功能实现

最新推荐

使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)

基于Electron实现桌面应用开发代码实例

Vue实现带进度条的文件拖动上传功能

ChatGPT原理1-3

新皇冠假日酒店互动系统的的软件测试论文.docx

管理建模和仿真的文件

Python Shell命令执行：管道与重定向，实现数据流控制，提升脚本灵活性

jlink解锁S32K

上海空中营业厅系统的软件测试论文.doc

"互动学习：行动中的多样性与论文攻读经历"

react + electron实现登录的时候记住记住密码思路代码