我急需你的帮助。我的数据库中有一个名为products的表，我试图使用Node.js express server作为web服务，使用React.js作为前端语言插入到其中。
下面是用于执行插入的react.js表单。
function App() {
return (
<div className="container">
<form onSubmit = {(e) => Add(e)}>
<div className="form-group">
<label htmlFor="examplePname">Name</label>
<input type="text" className="form-control" id="examplePname" aria-describedby=""/>
</div>
<div className="form-group">
<label htmlFor="examplePprice">Price</label>
<input type="number" className="form-control" id="examplePprice"/>
</div>
<div className="form-group form-check">
<input type="checkbox" className="form-check-input" id="exampleCheck1"/>
<label className="form-check-label" htmlFor="exampleCheck1">Check me out</label>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
);
}
function Add(e){
e.preventDefault();
let request = {
name: document.getElementById('examplePname').value,
price: document.getElementById('examplePprice').value,
}
alert("returns this:"+ request)
axios.post('http://localhost:3000/add', request)
.then(resp => {
alert(resp.data.message);
})
.catch(err => {
console.log(err);
})
}
下面是我的Node.js express Webservice
router.post('/add', (req, res) => {
const {name, price} = req.query;
console.log(name, price); ///Do this before you write the insert query
//res.send('adding product');Do this before you write the insert query (add temp products to view in cmd)
const INSERT_QUERY = `INSERT INTO products (name, price) VALUES('${name}', ${price})`; //after do an insert query to add to db proper
connection.query(INSERT_QUERY, (err, results) => {
if (err) {
return res.send({
message: "failed"
})
} else {
return res.send({
message: "successful"
});
}
});
});
但是当我插入时，我在console.log中得到name和price的未定义值。会很感激你帮我跳过这道障碍。谢谢
在节点端的app.js中使用下面的代码解析参数
const bodyparser = require('body-parser');
const multer = require('multer');
//Multer
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './Images');
},
filename: function (req, file, cb) {
let fileType = file.originalname.split('.');
cb(null, `${fileType[0]}_${Date.now()}.${fileType[1]}`);
}
})
var upload = multer({ storage: storage });
app.use(upload.any());
// Parse
app.use(bodyparser.json({ limit: '50mb', extended: true }));
app.use(bodyparser.urlencoded({ limit: '50mb', extended: true, parameterLimit: 1000000 }));
请在重新启动服务器之前安装以上依赖项
反应方发送表单数据如下
createFormData(props) {
var formData = new FormData();
for (var key in props) {
if (typeof props[key] === "string" || props[key] instanceof Date) {
formData.append(key, props[key]);
}
else if (typeof props[key] === "object") {
if (Array.isArray(props[key]) && key === "file") {
//Multiple File Upload
props[key].length > 0 && props[key].forEach((element) => {
if (element.lastModifiedDate) {
formData.append(key, element);
}
})
}
else if (props[key] && props[key].lastModifiedDate) {
//Single File Upload
formData.append(key, props[key]);
} else {
formData.append(key, JSON.stringify(props[key]));
}
} else {
formData.append(key, JSON.stringify(props[key]));
}
}
return formData;
}
//Axios请求
axios({
url: url here,
method: 'POST',
data: this.createFormData(your form data object),
timeout: 30000
}).then(response => {
if (response.status === 200) {
}
})
在节点端，您将获得如下数据
let data = { ...req.body, ...req.params, ...req.query }
