关于使用 node、express 和 pug 进行 404 "update" 调用的问题
Question regarding 404 "update" call using node, express and pug
我正在使用 node、express 和 pug 构建一个简单的应用程序。我们正在努力存储“自行车”数据。我们有一个 create/view 和删除视图示例,但被要求根据示例实施更新功能。
我可以在表单中加载指定的 bycicle 数据,但是,当按 send as 更新 bycicle 的写入数据时,反而加载了 404 错误,我是这个网页编程的新手,不知道这是怎么回事发生了,所以我请求任何帮助来理解这个问题。
我使用 create.pug 示例来构建我的 update.pug 视图。
在表格中我有点不确定我是否应该输入 (action='bicicletas/update') 或 ('bicicletas/'+bici.id+'/update')
我会post这里(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' )
我已成功完成“获取”功能,但“post”功能是抛出 404 的那个。
在我的路线 > 自行车中,我已经设置了我的路线,如示例所示,以这种方式:
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");
};
我创建了一个 bycicle 模型,我在其中使用与先前存在的 removebyID 函数类似的方法添加了更新,使用拼接来替换 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) => 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:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\app.js:29:8
at Layer.handle [as handle_request] (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:317:13)
at E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:284:7
at Function.process_params (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:335:12)
at next (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:275:10)
at E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:635:15
at next (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:260:14)
at Function.handle (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:174:3)
at router (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:47:12)
非常感谢所有帮助。
我发现了错误。
表格中的部分
form(action='bicicletas/update', method='post')
应该是
form.inline(action=`/bicicletas/${bici.id}/update`, method='post')
修复了 404 错误。
我正在使用 node、express 和 pug 构建一个简单的应用程序。我们正在努力存储“自行车”数据。我们有一个 create/view 和删除视图示例,但被要求根据示例实施更新功能。
我可以在表单中加载指定的 bycicle 数据,但是,当按 send as 更新 bycicle 的写入数据时,反而加载了 404 错误,我是这个网页编程的新手,不知道这是怎么回事发生了,所以我请求任何帮助来理解这个问题。
我使用 create.pug 示例来构建我的 update.pug 视图。 在表格中我有点不确定我是否应该输入 (action='bicicletas/update') 或 ('bicicletas/'+bici.id+'/update') 我会post这里(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' )
我已成功完成“获取”功能,但“post”功能是抛出 404 的那个。
在我的路线 > 自行车中,我已经设置了我的路线,如示例所示,以这种方式:
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");
};
我创建了一个 bycicle 模型,我在其中使用与先前存在的 removebyID 函数类似的方法添加了更新,使用拼接来替换 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) => 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:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\app.js:29:8
at Layer.handle [as handle_request] (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:317:13)
at E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:284:7
at Function.process_params (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:335:12)
at next (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:275:10)
at E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:635:15
at next (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:260:14)
at Function.handle (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:174:3)
at router (E:21-2\Topicos_Ingenieria_Software\LAB_01\redBicicletas\node_modules\express\lib\router\index.js:47:12)
非常感谢所有帮助。
我发现了错误。 表格中的部分
form(action='bicicletas/update', method='post')
应该是
form.inline(action=`/bicicletas/${bici.id}/update`, method='post')
修复了 404 错误。