Register ">
首页 前端知识 html js mysql登录注册

html js mysql登录注册

2024-06-01 00:06:00 前端知识 前端哥 826 770 我要收藏
下面是一个简单的HTML页面和JavaScript代码,用于登录和注册用户。这个示例使用MySQL数据库来存储用户信息。 1. 创建一个HTML页面(index.html)```html Login/Register Page

Login



Registerh2>

< type="submit" onclick="register()">Register ``` 2. 创建一个JavaScript文件(script.js),用于处理登录和注册的操作: ```javascript function login() const username = document.getElementById('username').value; const password = document.getElementById('password').value; // 发送登录请求到端 fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json', }, : JSON.stringify({ username, password }), }) .then((response) => { if (!response.ok) { throw new Error('Login'); } alert('Login successful'); }) .catch((error) => { console.error(error); alert('Login'); }); } function register() { const newUsername = document.getElementById('newUsername').value; const newPassword = document.getElementById('new').value; // 发送注册请求到后端 fetch('/register', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ newUsername, newPassword }), }) .then((response) => { if (!response.ok) { throw new Error('Registration failed'); } alert('Registration successful'); }) .catch(() => { console.error(error); alert('Registration failed'); }); } ``` 3. 设置一个Node.js服务器来处理登录和请求,并与MySQL数据库交互: ```javascript const express = require('express'); const bodyParser = require('body-parser'); const mysql =('mysql'); const app = express(); const port = 3000; app.use(bodyParser.json()); const db = mysql.createConnection({ host:localhost', user: 'root', password: 'password', database: 'userdb', }); db.connect((err) => { if (err) { console.error('Error connecting to database'); return; } console.log('Connected to database'); }); app.postlogin', (req, res) => { const { username, password } = req.body; const sql = 'SELECT * FROM users WHERE = ? AND password = ?'; db.query(sql, [username, password], (err, result) => { if (err { res.status(500).send('Error logging in'); return; } if (result.length > 0) { .send('Login successful'); } else { res.status(401).send('Invalid username or password'); } }); }); app.post('/', (req, res) => { const { newUsername, newPassword } = req.body; const sql = 'INSERT INTO users (, password) VALUES (?, ?)'; db.query(sql, [newUsername, newPassword], (err, result) => { if (err { res.status(500).send('Error registering'); return; } res.send('Registration successful'); }); }); app.listen(port, () => { console.log(`Server running on port ${port}`); ``` 请注意,以上代码仅供参考,实际使用时需要根据具体情况进行适当的修改和优化。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10345.html
标签
评论
发布的文章

npmjs官网(查询依赖包)

2024-06-07 00:06:56

npx使用及原理

2024-06-07 00:06:36

npm 包管理工具

2024-06-07 00:06:33

vue 思极地图开发

2024-06-07 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!