Node+Express+Pug开发自行车管理应用更新接口返回404错误求解

1. 404错误直接原因：表单action地址不匹配路由规则 #

你配置的POST更新路由规则是/bicicletas/:id/update，需要携带自行车id参数，但你现在表单写的action是bicicletas/update，既没有携带id参数，也没有使用绝对路径，所以Express找不到对应路由，返回404。
修复方式：把update.pug里的form标签替换为如下代码：

form(action='/bicicletas/' + bici.id + '/update', method='post')

开头加/是为了使用绝对路径，避免当前页面路径导致提交地址拼接错误。 #

2. 其他待修复的逻辑问题 #

• 下拉框无默认选中值 #

现在颜色、型号下拉框打开编辑页面时不会默认选中当前自行车的对应属性，需要修改下拉框逻辑：

select(name='color', id='color', required)
    each val in ['--select--','Blanco' , 'Negro' , 'Rojo','Verde']
        option(value=val selected= val === bici.color)=val
br
select(name='modelo', id='modelo', required)
    each val in ['--select--','Ruta' , 'Cross' , 'Montian','Turismo']
        option(value=val selected= val === bici.modelo)=val

• 输入框id属性重复 #

纬度、经度的输入框id都写为id，和ID输入框冲突，不符合HTML规范，修改为：

label(for='lat') Latitud:
input#lat(type='text' name='lat' value= bici.ubicacion[0] )
br
label(for='lng') Longitud:
input#lng(type='text' name='lng' value= bici.ubicacion[1] )

• 可选安全优化 #

当前update_post方法用表单提交的req.body.id来定位要更新的自行车，容易被用户篡改表单id修改其他车辆数据，可以改成用路由参数里的id：

exports.update_post = function (req, res) {
  // 优先用路由参数的id，避免表单篡改
  var bici = new Bicicleta(req.params.id, req.body.color, req.body.modelo);
  bici.ubicacion = [req.body.lat, req.body.lng];
  Bicicleta.update(bici);
  res.redirect("/bicicletas");
};

内容的提问来源于stack exchange，提问作者Mar