Блог

Я создаю простое приложение, используя node, express и pug. Мы работаем над хранением данных о «велосипедах». У нас есть примеры создания/просмотра и удаления представлений, но нам было предложено реализовать функцию обновления с учетом приведенных примеров.

Я могу загрузить указанные данные bycicle в форму, но при нажатии кнопки отправить, чтобы обновить записанные данные для bycicle, вместо этого загружается ошибка 404, я новичок в программировании этой веб-страницы и понятия не имею, как это происходит, поэтому я прошу любой помощи в понимании проблемы.

Я использовал пример create.pug для создания своего представления update.pug. В форме я немного не уверен, должен ли я поставить (действие=’bicicletas/обновление’) или (‘bicicletas/’ bici.id ‘/обновление’) Я опубликую его здесь (обновление.мопс):

 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' )  

Я успешно выполнил функцию «get», но функция «post» — это та, которая выбрасывает 404.

В разделе мои маршруты gt; велосипеды я настроил свои маршруты, как показано в примере, следующим образом:

 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;  

In a controllers folder I added an example bycicle script in which I created an update_get and an update_post using the other ones as reference

 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"); };  

I created a bycicle model in which I added the update using a similar method to the preexisting removebyID function, using a splice to replace the bycicle.

 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) =gt; 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 lt; 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 lt; 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-2Topicos_Ingenieria_SoftwareLAB_01redBicicletasapp.js:29:8  at Layer.handle [as handle_request] (E:2021-2Topicos_Ingenieria_SoftwareLAB_01redBicicletasnode_modulesexpresslibrouterlayer.js:95:5)  at trim_prefix (E:2021-2Topicos_Ingenieria_SoftwareLAB_01redBicicletasnode_modulesexpresslibrouterindex.js:317:13)  at E:2021-2Topicos_Ingenieria_SoftwareLAB_01redBicicletasnode_modulesexpresslibrouterindex.js:284:7  at Function.process_params (E:2021-2Topicos_Ingenieria_SoftwareLAB_01redBicicletasnode_modulesexpresslibrouterindex.js:335:12)  at next (E:2021-2Topicos_Ingenieria_SoftwareLAB_01redBicicletasnode_modulesexpresslibrouterindex.js:275:10)  at E:2021-2Topicos_Ingenieria_SoftwareLAB_01redBicicletasnode_modulesexpresslibrouterindex.js:635:15  at next (E:2021-2Topicos_Ingenieria_SoftwareLAB_01redBicicletasnode_modulesexpresslibrouterindex.js:260:14)  at Function.handle (E:2021-2Topicos_Ingenieria_SoftwareLAB_01redBicicletasnode_modulesexpresslibrouterindex.js:174:3)  at router (E:2021-2Topicos_Ingenieria_SoftwareLAB_01redBicicletasnode_modulesexpresslibrouterindex.js:47:12)  

Вся помощь очень ценится.

Я обнаружил ошибку. Деталь в виде

 form(action='bicicletas/update', method='post')  

действительно должно быть

 form.inline(action=`/bicicletas/${bici.id}/update`, method='post')  

Это исправило ошибку 404.