Javascript Express.js路由:如何防止重新加载上一页?
我对express(或一般的web开发)是新手,对路由有疑问。 我正在用纯JS在Firebase上创建一个web应用程序,并在Firebase云函数上使用路由。路由部分如下所示。其目的是,当URL的形式为/xxxxxx时,它发送配置文件html页面;当URL的形式为r/xxxxx时,它发送posts html页面。然后,客户端渲染将完成,以填充额外的数据以组成一个页面。以下是代码的一部分:Javascript Express.js路由:如何防止重新加载上一页?,javascript,node.js,firebase,express,routing,Javascript,Node.js,Firebase,Express,Routing,我对express(或一般的web开发)是新手,对路由有疑问。 我正在用纯JS在Firebase上创建一个web应用程序,并在Firebase云函数上使用路由。路由部分如下所示。其目的是,当URL的形式为/xxxxxx时,它发送配置文件html页面;当URL的形式为r/xxxxx时,它发送posts html页面。然后,客户端渲染将完成,以填充额外的数据以组成一个页面。以下是代码的一部分: exports.webAPI = functions.https.onRequest(app);
exports.webAPI = functions.https.onRequest(app);
app.get('/:id', (req, res) => {
res.set('Cache-Control', 'public, max-age=86400, s-maxage=86400');
res.status(200).sendFile(path.join(__dirname+'/app/profile.html'));
});
app.get('/r/:post', (req, res) => {
res.set('Cache-Control', 'public, max-age=86400, s-maxage=86400');
res.status(200).sendFile(path.join(__dirname+'/app/post.html'));
});
问题是:每当用户单击一篇文章,然后返回到配置文件页面时,整个页面都会重新呈现。这对现代网络应用的用户体验来说是非常糟糕的,这是可以理解的
问题:除非对上一页进行了有意义的更改(例如上传了新帖子),否则如何防止重新加载上一页?有没有办法在Express中实现这一点?
如果有更好的代码版本,请告诉我。如果我需要查看文档的某些部分,请告知。或者,如果Express无法做到这一点,我应该看看其他东西,请指导我在哪里看。
谢谢 安装axios软件包。在我的场景中,我试图注册一个表单。因此,这就是我需要为注册做的所有事情,而无需刷新页面
const register = async (name, email, password, passwordConfirm) => {
try {
const res = await axios({
method: "POST",
url: "your url",
data: {
name,
email,
password,
passwordConfirm
}
});
console.log(res);
if (res.data.status === "success") {
alert("You are registered succesfully");
window.setTimeout(() => {
location.assign("/");
}, 1500);
}
} catch (error) {
alert(error.response.data.message);
console.log(error);
}
};
document.querySelector("#registerform").addEventListener("submit", e => {
e.preventDefault();
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const passwordConfirm = document.getElementById("confirmPassword")
.value;
register(name, email, password, passwordConfirm);
});
注意:e.preventdefault起主要作用。如果您只是尝试向服务器发送数据或从服务器获取数据,而不在客户端中呈现任何内容或更改当前页面,请使用Ajax调用而不是单击链接,使用Javascript发送数据。