node.js - 关于使用 node、express 和 pug 进行 404“更新”调用的问题

问题描述

我正在使用 node、express 和 pug 构建一个简单的应用程序。我们正在努力存储“自行车”数据。我们有一个创建/查看和删除视图示例，但被要求在给定示例的情况下实现更新功能。

我可以在表单中加载指定的自行车数据，但是，当按发送为更新自行车的书面数据时，会加载 404 错误，我对这个网页编程非常陌生，不知道这是怎么发生的，所以我我寻求任何帮助来理解这个问题。

我使用 create.pug 示例来构建我的 update.pug 视图。在表格中我有点不确定我应该放 (action='bicicletas/update') 还是 ('bicicletas/'+bici.id+'/update') 我会在这里发布它（update.pug）：

extends ../layout
block content
    a(href='/bicicletas') Volver

    br
    br
    br
    h1 Editar bicicleta
    br
    br


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

    form(action='bicicletas/update', method='post')
        label(for='id') ID:
        input#id(type='text' name='id' value=bici.id )
        br
        select(name='color', id='', required)
            each val in ['--select--','Blanco' , 'Negro' , 'Rojo','Verde']
                option=val
        br
        select(name='modelo', id='', required)
            each val in ['--select--','Ruta' , 'Cross' , 'Montian','Turismo']
                option=val
        br
        label(for='lat') Latitud:
        input#id(type='text' name='lat' value= bici.ubicacion[0] )
        br
        label(for='lng') Longitud:
        input#id(type='text' name='lng' value= bici.ubicacion[1]  )
        br
        br
        input.btn(type='submit' name='OK' )

我已成功完成“获取”功能，但“发布”功能是抛出 404 的功能。

在我的路线> bycicles 我已经设置了我的路线，如示例所示，以这种方式：

const express = require("express");
const router = express.Router();
const bicicletaController = require("../controllers/bicicleta");

router.get("/", bicicletaController.list);
router.get("/:id/show", bicicletaController.show);
router.get("/create", bicicletaController.create_get);
router.post("/create", bicicletaController.create_post);
router.get("/:id/update", bicicletaController.update_get);
router.post("/:id/update", bicicletaController.update_post);
router.post("/:id/delete", bicicletaController.delete);

module.exports = router;

在控制器文件夹中，我添加了一个示例 bycicle 脚本，其中我创建了一个 update_get 和一个 update_post 使用其他的作为参考

const Bicicleta = require("../models/bicicleta");
exports.list = function (re, res) {
  res.render("bicicletas/index", { bicis: Bicicleta.allBicis });
};
exports.show = function (req, res) {
  var bici = Bicicleta.findById(req.params.id);
  res.render("bicicletas/show", { bici });
};
exports.create_get = function (req, res) {
  res.render("bicicletas/create");
};
exports.create_post = function (req, res) {
  var bici = new Bicicleta(req.body.id, req.body.color, req.body.modelo);
  bici.ubicacion = [req.body.lat, req.body.lng];
  Bicicleta.add(bici);
  res.redirect("/bicicletas");
};
exports.delete = function (req, res) {
  Bicicleta.removeById(req.body.id);
  res.redirect("/bicicletas");
};

exports.update_get = function (req, res) {
  var bici = Bicicleta.findById(req.params.id);
  res.render("bicicletas/update", { bici });
};

exports.update_post = function (req, res) {
  var bici = new Bicicleta(req.body.id, req.body.color, req.body.modelo);
  bici.ubicacion = [req.body.lat, req.body.lng];
  Bicicleta.update(req.body);
  res.redirect("/bicicletas");
};

我创建了一个自行车模型，其中我使用与先前存在的 removebyID 函数类似的方法添加了更新，使用拼接替换自行车。

let Bicicleta = function (id, color, modelo, ubicacion) {
    this.id = id;
    this.color = color;
    this.modelo = modelo;
    this.ubicacion = ubicacion;
  };
  Bicicleta.prototype.toString = function () {
    return `id: ${this.id} | color: ${this.color}`;
  };
  
  Bicicleta.allBicis = [];

  Bicicleta.add = function (aBici) {
    Bicicleta.allBicis.push(aBici);
  };
  Bicicleta.findById = function (aBiciId) {
    var aBici = Bicicleta.allBicis.find((x) => x.id == aBiciId);
    if (aBici) return aBici;
    else throw new Error(`No existe una Bicicleta con el id: ${aBiciId}`);
  };
  
  Bicicleta.removeById = function (aBiciId) {
    var aBici = Bicicleta.findById(aBiciId);
    for (let i = 0; i < Bicicleta.allBicis.length; i++) {
      if (Bicicleta.allBicis[i].id == aBiciId) {
        Bicicleta.allBicis.splice(i, 1);
        break;
      }
    }
  };

  Bicicleta.update = function (aBici) {
    var aBiciOld = Bicicleta.findById(aBici.id);
    for (let i = 0; i < Bicicleta.allBicis.length; i++) {
      if (Bicicleta.allBicis[i].id == aBiciOld.id) {
        Bicicleta.allBicis.splice(i, 1, aBici);
        break;
      }
    }
  };

正如我刚才提到的，我很困惑为什么会出现 404 错误。控制台没有给出任何提示，只是错误处理程序。

 NotFoundError: Not Found
    at E:\2021-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\app.js:29:8
    at Layer.handle [as handle_request] (E:\2021-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (E:\2021-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:317:13)
    at E:\2021-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (E:\2021-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:335:12)
    at next (E:\2021-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:275:10)
    at E:\2021-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:635:15
    at next (E:\2021-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:260:14)
    at Function.handle (E:\2021-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:174:3)
    at router (E:\2021-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:47:12)

非常感谢所有帮助。

标签： node.jsexpresshttp-status-code-404pug

node.js - 关于使用 node、express 和 pug 进行 404“更新”调用的问题

问题描述

解决方案

推荐阅读