Express中req.query获取及路由未触发问题排查

你遇到的问题由几个基础认知错误共同导致，和框架本身无关：

1. Express路由匹配规则理解错误：Express对请求的路由匹配是自上而下顺序执行的，一旦匹配到第一个符合路径规则的路由就会终止后续匹配。你表单提交的GET请求路径为/trackName?name=aaa时，路径段是/trackName，会直接被你写在前面的router.get('/trackName')捕获，根本轮不到后面的router.get('/:id')，所以后者永远不会触发。
2. 逻辑设计冗余：你原本的计划就是在/trackName路由通过req.query获取name参数，完全不需要额外定义/:id动态路由多绕一层，属于画蛇添足。
3. Cookie键名不匹配：你读取Cookie时取的是req.cookies.username，但之前写的/:id路由里存Cookie用的键是name，就算路由触发了，后续也读不到存入的值。
4. 你后续把表单action改成/name依然无法触发/:id，大概率是修改代码后没有重启Node服务，或者浏览器缓存了旧的请求路径，本质上这个修改方向完全没必要。

直接删掉多余的/:id路由，把存Cookie、重定向的逻辑放到已有的/trackName路由中即可，不需要修改表单的提交地址。

修正后的路由代码 #

router.get('/myName', (req, res) => {
    // 读写Cookie的键名保持一致，统一用username
    const name = req.cookies.username;
    if (name) {
        console.log('已读取到Cookie中的用户名：', name);
        res.render('myName', {name: name});
    } else {
        res.render('myName');
    }
});

// 无实际作用的冗余路由可以直接删除
// router.post('/myName', (req, res) => {
//     res.redirect('/trackName');
// });

router.get('/trackName', (req, res) => {    
    const userName = req.query.name?.trim();
    // 空值校验，避免存入无效Cookie
    if (!userName) {
        return res.redirect('/myName');
    }
    // 存入Cookie，键名和读取时保持一致
    res.cookie('username', userName, { httpOnly: true });
    // 存完直接重定向到校验页面，不需要渲染trackName页面
    res.redirect('/myName');
});

router.post('/goodbye', (req, res) => {
    // 清除Cookie也要对应相同的键名
    res.clearCookie('username');
    res.redirect('/myName');
});

修正缩进问题的Pug表单代码 #

你原来的pug模板缩进有误，block content层级不对会导致渲染异常，修正后如下：

doctype html 
html(lang="en")
    head 
        title My Server
    body 
        block content 
            if name 
                h2 username: #{name}
                form(action='/goodbye', method='post')
                    button(type='submit') Goodbye
            else   
                form(action='/trackName', method='get')
                    label Please enter your name: 
                        input(type='text', name='name')
                    button(type='submit') Submit

• 路由定义顺序：固定路径的路由必须写在动态路由（如/:id、/*这类通配/动态匹配路由）的前面，否则动态路由会提前拦截所有请求，导致固定路径路由失效。
• 参数获取区分：req.params用来获取URL路径中的动态段（比如定义路由/user/:id，访问/user/123时req.params.id值为123）；req.query用来获取URL中?后面拼接的查询参数，二者不要混用。
• Cookie操作规则：写入、读取、清除Cookie时必须使用完全相同的键名，否则会出现存值失败、读值为空、清除无效的问题。

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