<!DOCTYPE html> <html> <head> <title>注册页面</title> <link rel="stylesheet" type="text/css" href="../zhuce/zhuce1.css"> </head> <body> <h2>用户注册</h2> <form method="post" action="http://localhost:3000" id="registration-form"> <label for="username">用户名:</label> <input type="text" id="name" name="name" placeholder="请输入用户名" pattern="^[a-zA-Z0-9_]{3,20}$" required> <label for="email">邮箱:</label> <input type="email" id="email" name="email" placeholder="请输入邮箱地址" required> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="请输入密码"pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$" required> <input type="submit" value="注册"> </form> <script src="../zhuce/zhuce1.js"></script> </body> </html> const form = document.getElementById('register-form'); form.addEventListener('submit', function (event) { event.preventDefault(); // 阻止表单提交 const name = document.getElementById('name').value; const password = document.getElementById('password').value; const email = document.getElementById('email').value; console.log('注册信息:'); console.log('用户名:', name); console.log('密码:', password); console.log('邮箱:', email); }); const express = require('express'); const bodyParser = require('body-parser'); const mssql = require('mssql'); // 假设使用 MySQL 数据库 const app = express(); app.use(bodyParser.urlencoded({ extended: false })); // 创建与数据库的连接 const connection = mssql.createConnection({ server: 'CRMTEST', user: 'sa', password: 'Servo01', database: 'demo' }); // 连接数据库 connection.connect(function (err) { if (err) { console.error('Error connecting to database:', err); return; } console.log('Connected to database!'); }); // 处理注册页面的 POST 请求 app.post('http://localhost:3000', function (req, res) { const name = req.body.name; const password = req.body.password; const email = req.body.email; console.log('注册信息:'); console.log('用户名:', name); console.log('密码:', password); console.log('邮箱:', email); // 将数据保存到数据库 const query = `INSERT INTO username (name, password, email) VALUES (${name},${name}, ${name})`; connection.query(query, [name, password, email], function (err, result) { if (err) { console.error('Error saving data to database:', err); return; } console.log('数据已保存到数据库!'); }); res.send('注册成功!'); }); app.listen(3000, function () { console.log('Server is running on port 3000'); });为什么控制台打印不出来
时间: 2024-04-13 14:29:25 浏览: 187
html+js+css开发源代码项目.rar
您的代码中存在一些问题:
1. 控制台打印不出来的原因是因为您的JavaScript代码放置在了HTML代码的后面,所以在JavaScript代码执行之前,页面已经加载完成并且注册事件已经被执行了。您可以将JavaScript代码放在HTML代码的前面,或者使用DOMContentLoaded事件来确保代码在页面加载完成后再执行。
2. 由于您在表单上绑定了一个id为"registration-form"的id,但是在JavaScript代码中使用了一个id为"register-form"的id来获取表单元素。请确保两者的id一致。
3. 在Express的app.post()路由中,您传递的URL应该是相对路径,而不是完整的URL。因此,将`http://localhost:3000`更改为`/`。
4. 在SQL查询语句中,您需要将字符串值用引号括起来。请将`${name},${name}, ${name}`更改为`'${name}','${password}','${email}'`。
请尝试修改您的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<link rel="stylesheet" type="text/css" href="../zhuce/zhuce1.css">
<script src="../zhuce/zhuce1.js"></script>
</head>
<body>
<h2>用户注册</h2>
<form method="post" action="/" id="registration-form">
<label for="username">用户名:</label>
<input type="text" id="name" name="name" placeholder="请输入用户名" pattern="^[a-zA-Z0-9_]{3,20}$" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱地址" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码"pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$" required>
<input type="submit" value="注册">
</form>
</body>
</html>
```
```javascript
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('registration-form');
form.addEventListener('submit', function (event) {
event.preventDefault(); // 阻止表单提交
const name = document.getElementById('name').value;
const password = document.getElementById('password').value;
const email = document.getElementById('email').value;
console.log('注册信息:');
console.log('用户名:', name);
console.log('密码:', password);
console.log('邮箱:', email);
});
});
```
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const mssql = require('mssql'); // 假设使用 MySQL 数据库
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
// 创建与数据库的连接
const connection = mssql.createConnection({
server: 'CRMTEST',
user: 'sa',
password: 'Servo01',
database: 'demo'
});
// 连接数据库
connection.connect(function (err) {
if (err) {
console.error('Error connecting to database:', err);
return;
}
console.log('Connected to database!');
});
// 处理注册页面的 POST 请求
app.post('/', function (req, res) {
const name = req.body.name;
const password = req.body.password;
const email = req.body.email;
console.log('注册信息:');
console.log('用户名:', name);
console.log('密码:', password);
console.log('邮箱:', email);
// 将数据保存到数据库
const query = `INSERT INTO username (name, password, email) VALUES ('${name}','${password}','${email}')`;
connection.query(query, function (err, result) {
if (err) {
console.error('Error saving data to database:', err);
return;
}
console.log('数据已保存到数据库!');
});
res.send('注册成功!');
});
app.listen(3000, function () {
console.log('Server is running on port 3000');
});
```
这样修改后,您应该能够在控制台中打印出注册信息。请确保数据库连接配置正确并可正常访问。如果还有其他问题,请提供更多详细信息。
阅读全文