Express开发电商页面执行产品删除操作后URL未按预期变更问题

删除逻辑执行完成后，你在控制器中直接使用res.render()返回首页视图，该操作仅会在当前请求下直接渲染页面内容返回给浏览器，不会触发浏览器地址栏的URL更新，因此地址会停留在删除请求提交的/product/item/[产品ID]路径。

第一步：修改删除控制器逻辑 #

将原res.render调用替换为res.redirect('/')，让浏览器主动跳转至首页：

deleteProduct: (req, res) => {
    let id = req.params.id;
    let newDatabase = database.filter((item) => item.id != id);
    fs.writeFileSync(path.join(__dirname, '../database/productos.json'), JSON.stringify(newDatabase, null, 4), {encoding: 'utf-8'});
    // 重定向到首页
    res.redirect('/');
}

第二步：调整首页路由逻辑 #

将原本写在删除控制器中的商品筛选逻辑迁移到首页路由的处理函数中，确保首页加载时能获取最新的商品数据：

// 首页路由处理函数示例
router.get('/', (req, res) => {
    // 读取最新的商品库数据
    const database = JSON.parse(fs.readFileSync(path.join(__dirname, '../database/productos.json'), 'utf-8'));
    const productVisited = database.filter(item=>item.category=="visited");
    const productInSale = database.filter(item=>item.category=="in-sale");
    res.render("home", {newDatabase: database, productVisited, productInSale });
})

该修改除了能解决URL不更新的问题外，还能避免用户刷新页面时重复触发删除请求的问题。

内容的提问来源于stack exchange，提问作者Nicolas Martin Gomez