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); }); }); const express = require('express'); const bodyParser = require('body-parser'); const mssql = require('mssql'); const app = express(); app.use(bodyParser.urlencoded({ extended: false })); // 创建与数据库的连接 const connection = mssql.createConnection({ server: '192.168.10.223', 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}')`; const request = new mssql.Request(); connection.query(query, function (err, res) { 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'); });我要连接到sqlsever数据库然后将注册信息导进username表中
时间: 2024-02-01 10:03:11 浏览: 411
您的代码中存在一些问题:
1. 在Express的app.post()路由中,您使用了两次`res`作为变量名,一次作为回调函数的参数名,一次作为连接池查询的回调函数的参数名。这会导致变量覆盖和混淆。建议将其中一个变量名更改为其他名称。
2. 在连接池查询的回调函数中,您使用了`connection.query()`方法,但是该方法是用于MySQL数据库的,对于SQL Server数据库,您应该使用`request.query()`方法进行查询操作。
3. 在插入数据到数据库的查询语句中,您使用了`${name},${password},${email}`作为值,应该使用单引号将字符串值括起来,例如`'${name}','${password}','${email}'`。
请尝试修改您的代码如下:
```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);
});
});
const express = require('express');
const bodyParser = require('body-parser');
const mssql = require('mssql');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
// 创建与数据库的连接
const config = {
server: '192.168.10.223',
user: 'sa',
password: 'Servo01',
database: 'demo'
};
// 连接数据库
mssql.connect(config, 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}')`;
const request = new mssql.Request();
request.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');
});
```
请确保数据库连接配置正确并可正常访问,并且数据库中已经创建了名为 "demo" 的数据库和 "username" 表。如果还有其他问题,请提供更多详细信息。
阅读全文
相关推荐













<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>入库模块</title> <style> body { background-color: #f8f9fa; font-family: Arial, sans-serif; } .container { max-width: 1000px; min-height: 600px; /* 可根据需求调整这个值来改变整体框的最小高度 */ } .header { margin: 20px 0; color: #343a40; font-weight: bold; } .form-group { margin-bottom: 1.5rem; /* 增加表单组之间的间距 */ } .list-group-item { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: space-between; align-items: center; width: 100%; padding: 5px 10px; border: 1px solid #dee2e6; border-radius: 5px; box-sizing: border-box; } .list-group-item span { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card { border: none; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); padding: 20px; background-color: #ffffff; } .btn-primary { background-color: #007bff; border: none; width: 200px; /* 设置按钮宽度为 50 像素 */ } .btn-primary:hover { background-color: #0056b3; } footer { margin-top: 20px; padding: 10px 0; background-color: #343a40; color: white; border-radius: 0 0 15px 15px; } /* 为查询按钮添加左外边距 */ .btn-query { margin-left: 100px; } /* 新增的按钮容器样式 */ .button-container { text-align: center; } /* 新增的样式,设置入库编号文本框的尺寸 */ .small-input { width: 150px; /* 你可以根据需要调整宽度 */ } /* 新增样式,使入库编号输入框在同一行显示 */ .id-inputs { display: flex; flex-wrap: wrap; align-items: center; } .id-inputs label { margin-right: 5px; } .id-row { display: flex; flex-wrap: wrap; align-items: center; width: 100%; } </style> </head> <body> 金铜线入库模块 <form method="POST"> <label for="item">整半卷类型</label> <select class="form-control" id="category" name="category" required> <option value="" disabled selected>请选择入库类型</option> <option value="整卷">整卷</option> <option value="半卷">半卷</option> {% if category %} <option value="{{ category }}" selected>{{ category }}</option> {% endif %} </select> <label for="item">入库型号</label> <select class="form-control" id="type" name="item" required> <option value="" disabled selected>请选择物品编号</option> <option value="70694">70694 - AU</option> <option value="70704">70704 - AU</option> <option value="70774">70774 - AU</option> <option value="70794">70794 - CU</option> <option value="70804">70708 - CU</option> <option value="70784">7058779 - CU</option> </select> <label for="batchNumber">入库批号</label> <input type="text" class="form-control" id="batchNumber" name="batchNumber" required> <label for="ID1">编号#1</label> <input type="text" class="form-control small-input" id="ID1" name="ID1"> <label for="ID2">编号#2</label> <input type="text" class="form-control small-input" id="ID2" name="ID2"> <label for="ID3">编号#3</label> <input type="text" class="form-control small-input" id="ID3" name="ID3"> <label for="ID4">编号#4</label> <input type="text" class="form-control small-input" id="ID4" name="ID4"> <label for="ID5">编号#5</label> <input type="text" class="form-control small-input" id="ID5" name="ID5"> <label for="ID6">编号#6</label> <input type="text" class="form-control small-input" id="ID6" name="ID6"> <label for="ID7">编号#7</label> <input type="text" class="form-control small-input" id="ID7" name="ID7"> <label for="ID8">编号#8</label> <input type="text" class="form-control small-input" id="ID8" name="ID8"> <label for="ID9">编号#9</label> <input type="text" class="form-control small-input" id="ID9" name="ID9"> <label for="ID10">编号#10</label> <input type="text" class="form-control small-input" id="ID10" name="ID10"> <label for="ID11">编号#11</label> <input type="text" class="form-control small-input" id="ID11" name="ID11"> <label for="ID12">编号#12</label> <input type="text" class="form-control small-input" id="ID12" name="ID12"> <label for="quantity">入库数量</label> <input type="number" class="form-control" id="quantity" name="quantity" value="1" required> <label for="date">入库日期</label> <input type="datetime-local" class="form-control" id="date" name="date" required value="{{ date }}"> <label for="shift">入库班次</label> <select class="form-control" id="shift" name="shift" required> <option value="" disabled selected>请选择班次</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> {% if shift %} <option value="{{ shift }}" selected>{{ shift }}</option> {% endif %} </select> <label for="barge">员工工号</label> <input type="text" class="form-control small-input" id="barge" name="barge" required value="{{ username }}"> <button type="submit" class="btn btn-primary">入库</button> <button type="button" class="btn btn-primary btn-query" id="queryButton">查询</button> </form> 当前库存 入库类型 在库型号 在库数量 {% for data in inventory_data %} {{ data.category }} {{ data.item }} {{ data.quantity }} {% endfor %} 返回首页 <script> function submitForm(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 const data = { category: document.getElementById('category').value, type: document.getElementById('type').value, batchNumber: document.getElementById('batchNumber').value, ID1: document.getElementById('ID1').value, ID2: document.getElementById('ID2').value, ID3: document.getElementById('ID3').value, ID4: document.getElementById('ID4').value, ID5: document.getElementById('ID5').value, ID6: document.getElementById('ID6').value, ID7: document.getElementById('ID7').value, ID8: document.getElementById('ID8').value, ID9: document.getElementById('ID9').value, ID10: document.getElementById('ID10').value, ID11: document.getElementById('ID11').value, ID12: document.getElementById('ID12').value, quantity: document.getElementById('quantity').value, date: document.getElementById('date').value, shift: document.getElementById('shift').value, barge: document.getElementById('barge').value }; console.log(data) fetch('/into_storage', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(response => response.json()) .then(result => { alert(result.message); // 简单提示结果 if (result.status === 'success') { // 重置表单(可选) document.getElementById('batchNumber').value = ''; for(let i=1; i<=12; i++) { document.getElementById(ID${i}).value = ''; } } }) .catch(error => alert('网络错误: ' + error)); } // 绑定表单提交事件 document.querySelector('form').addEventListener('submit', submitForm); </script> </body> </html> 帮忙优化一下修改,要求绑定入库按钮id来触发传输数据到后端flask框架,使用fetch交互,其它按钮先不用管
