下面是一个简单的HTML页面和JavaScript代码,用于登录和注册用户。这个示例使用MySQL数据库来存储用户信息。
1. 创建一个HTML页面(index.html)```html
Login/Register Page
Login
```
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}`);
```
请注意,以上代码仅供参考,实际使用时需要根据具体情况进行适当的修改和优化。