前情提要
最近参与公司的一个项目前端 React,后端用的 Express。目前我就做一些功能的新增或者修改。
对于 Express ,本人没有公司项目实战经验,个人经验也仅限于刚开始搭建个人第一版博客时使用过。
所以对于 Express ,属于使用过,但还没入门。
遇到问题
项目中有如下代码,我新增了 uploadGroupMemberCSV
和 exportToCSV
两个方法
const router = require('express').Router()
...
const uploadGroupMemberCSV = async (req,res) => {};
const exportToCSV = async (req, res) => {}
...
router.get(
"/group-member",
[requireRoles(), checkRoles("admin", "owner", "moderator")],
getAllGroupsMembers
);
router.get(
"/group-member/:id",
[requireRoles(), checkRoles("admin", "owner", "moderator")],
getSingleGroupMember
);
router.put(
"/group-member/:id",
[requireRoles(), checkRoles("admin", "owner", "moderator")],
updateGroupMember
);
router.delete(
"/group-member/delete/:id",
[requireRoles(), checkRoles("admin", "owner")],
deleteGroupMember
);
router.post(
"/group-member/upload-csv",
[requireRoles(), checkRoles("admin", "owner", "moderator"),upload.single('file'), ],
uploadGroupMemberCSV
);
router.get(
"/group-member/exportToCSV",
[requireRoles(), checkRoles("admin", "owner", "moderator")],
exportToCSV
);
module.exports = router;
当我在前端调用 /group-member/exportToCSV
接口时,会报 404
的错误。
看到 404 ,开始以为接口名字写错了,排查了半天都没发现问题。
结果查看接口返回,居然有错误信息返回? 拿着错误信息在后端代码中去查找,发现错误信息是 updateGroupMember
、deleteGroupMember
、getSingleGroupMember
这三个接口中某一个返回的错误信息(其他接口没做查询不到数据就抛出异常,所以可能直接跳过了)
奇怪,我没有调这几个接口,怎么就返回他们的错误信息了呢?难道和代码写的顺序有关?
尝试调整代码位置后就正常了。。。
// 调整后的代码
const router = require('express').Router()
...
const uploadGroupMemberCSV = async (req,res) => {};
const exportToCSV = async (req, res) => {}
...
router.get(
"/group-member",
[requireRoles(), checkRoles("admin", "owner", "moderator")],
getAllGroupsMembers
);
router.post(
"/group-member/upload-csv",
[requireRoles(), checkRoles("admin", "owner", "moderator"),upload.single('file'), ],
uploadGroupMemberCSV
);
// ===> 顺序调整到前面来了
router.get(
"/group-member/exportToCSV",
[requireRoles(), checkRoles("admin", "owner", "moderator")],
exportToCSV
);
router.get(
"/group-member/:id",
[requireRoles(), checkRoles("admin", "owner", "moderator")],
getSingleGroupMember
);
router.put(
"/group-member/:id",
[requireRoles(), checkRoles("admin", "owner", "moderator")],
updateGroupMember
);
router.delete(
"/group-member/delete/:id",
[requireRoles(), checkRoles("admin", "owner")],
deleteGroupMember
);
module.exports = router;
最后
问了下 ChatGPT,好像 JAVA 等传统语言也存在路由优先级的问题?
所以我开始遇到的问题就是写在前面的 get 方法的 /group-member/:id
吞掉了我写在后面同样是 get 方法的 /group-member/exportToCSV
接口。
建议:
- 静态路由写在前面,动态路由写在后面
作为初次写后端的前端,还有许多坑需要踩的。
感谢你的阅读