Express.js - 如何在将数据插入数据库后重新加载页面
Express.js - how to reload page after inserting data to the database
我是 node/express 的新手,我一直被我的问题困扰 - 我有一个带有文件输入 (xlsx) 的表单 - 在读取文件并将其序列化后,我通过 axios 将其发送到后端。
这是我用来读取 excel 文件并将其发送到给定端点的部分:
const inputXLSX = document.querySelector('#inputXLSX');
const submitXLSX = document.querySelector('#submitXLSX');
let selectedFile;
const readXLSXtoJSON = (file) => {
return new Promise((resolve, reject) => {
if(!file) reject(Error('Wystąpił błąd podczas pobierania pliku'));
let fileReader = new FileReader();
fileReader.readAsBinaryString(file);
fileReader.onload = (event) => {
const data = event.target.result;
const workbook = XLSX.read(data, {type: 'binary'});
let rowObj;
workbook.SheetNames.forEach(sheet => {
rowObj = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);
});
resolve(JSON.stringify(rowObj));
}
})
}
if (inputXLSX) {
inputXLSX.addEventListener('change', (event)=>{
event.preventDefault();
selectedFile = event.target.files[0];
})
}
if (submitXLSX) {
submitXLSX.addEventListener('click', async (event)=>{
event.preventDefault();
try {
const XLSXdata = await readXLSXtoJSON(selectedFile);
if (XLSXdata) {
axios.post('http://localhost:3000/api/1.0/tokens', {
XLSXdata
})
}
} catch (err) {
console.log(Error);
}
})
}
中间件函数-仅用于向数据库插入数据或return状态'fail'
exports.importToken = async (req, res, next) => {
try {
Token.insertMany(JSON.parse(req.body.XLSXdata));
} catch (err) {
return res.status(400).json({
status: 'fail',
message: 'Wystąpił bład podczas zapisywania tokenów do bazy',
});
}
next();
};
中间件堆栈中的最终函数:
exports.showToken = async (req, res) => {
const newTokensList = JSON.parse(req.body.XLSXdata);
res
.json({
status: 'success',
data: newTokensList,
})
.redirect(301, '/admin/tokens');
};
在return中我得到 UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are send to the client
一种选择是redirect
响应:
res
.json({
status: 'success',
data: newTokensList,
})
.redirect(301, '/page_you_want'); // Here!
这个问题的解决方案不是创建任何中间件,而是简单地:
等待 axios
post 请求
添加 preventDefault()
以防止提交表单。
添加window.location.reload()
submitXLSX.addEventListener('click', async (event) => {
event.preventDefault();
try {
const XLSXdata = await readXLSXtoJSON(selectedFile);
await axios.post('http://localhost:3000/api/1.0/tokens', { XLSXdata });
window.location.reload(true);
} catch (err) {
console.log(Error);
}
})
}
我是 node/express 的新手,我一直被我的问题困扰 - 我有一个带有文件输入 (xlsx) 的表单 - 在读取文件并将其序列化后,我通过 axios 将其发送到后端。
这是我用来读取 excel 文件并将其发送到给定端点的部分:
const inputXLSX = document.querySelector('#inputXLSX');
const submitXLSX = document.querySelector('#submitXLSX');
let selectedFile;
const readXLSXtoJSON = (file) => {
return new Promise((resolve, reject) => {
if(!file) reject(Error('Wystąpił błąd podczas pobierania pliku'));
let fileReader = new FileReader();
fileReader.readAsBinaryString(file);
fileReader.onload = (event) => {
const data = event.target.result;
const workbook = XLSX.read(data, {type: 'binary'});
let rowObj;
workbook.SheetNames.forEach(sheet => {
rowObj = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);
});
resolve(JSON.stringify(rowObj));
}
})
}
if (inputXLSX) {
inputXLSX.addEventListener('change', (event)=>{
event.preventDefault();
selectedFile = event.target.files[0];
})
}
if (submitXLSX) {
submitXLSX.addEventListener('click', async (event)=>{
event.preventDefault();
try {
const XLSXdata = await readXLSXtoJSON(selectedFile);
if (XLSXdata) {
axios.post('http://localhost:3000/api/1.0/tokens', {
XLSXdata
})
}
} catch (err) {
console.log(Error);
}
})
}
中间件函数-仅用于向数据库插入数据或return状态'fail'
exports.importToken = async (req, res, next) => {
try {
Token.insertMany(JSON.parse(req.body.XLSXdata));
} catch (err) {
return res.status(400).json({
status: 'fail',
message: 'Wystąpił bład podczas zapisywania tokenów do bazy',
});
}
next();
};
中间件堆栈中的最终函数:
exports.showToken = async (req, res) => {
const newTokensList = JSON.parse(req.body.XLSXdata);
res
.json({
status: 'success',
data: newTokensList,
})
.redirect(301, '/admin/tokens');
};
在return中我得到 UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are send to the client
一种选择是redirect
响应:
res
.json({
status: 'success',
data: newTokensList,
})
.redirect(301, '/page_you_want'); // Here!
这个问题的解决方案不是创建任何中间件,而是简单地:
等待
axios
post 请求添加
preventDefault()
以防止提交表单。添加
window.location.reload()
submitXLSX.addEventListener('click', async (event) => { event.preventDefault(); try { const XLSXdata = await readXLSXtoJSON(selectedFile); await axios.post('http://localhost:3000/api/1.0/tokens', { XLSXdata }); window.location.reload(true); } catch (err) { console.log(Error); } }) }