Node.js接收表单输入实现动态路由跳转报name未定义错误

代码存在几个核心逻辑错误，直接导致变量未定义和功能不符合预期：

• 作用域和执行时机错误：路由定义是服务启动阶段就执行的代码，此时没有任何用户请求，你在app.get('/')回调函数内部定义的name是请求处理阶段的局部变量，外层路由注册代码根本访问不到，直接触发ReferenceError。
• 接口不匹配：你的HTML表单提交地址是/、请求方法是POST，你根本没写这个接口的处理逻辑，反而尝试提前拼接name定义路由，完全不符合Express动态路由的设计逻辑。
• 参数获取逻辑错误：req.body是POST、PUT这类带请求体的请求才会携带的属性，你在GET请求的处理函数里取req.body.name本身就拿不到有效值。
• 动态路由用法错误：Express的动态路径参数不需要提前拼接变量，只要在路径里写:参数名作为占位符，实际请求进来之后，框架会自动把路径对应位置的值解析到req.params对象里，不需要提前知道参数值。

1. 补全必要的中间件配置 #

Express 4.16及以上版本内置了表单解析中间件，直接在路由定义前加一行配置即可解析POST表单提交的数据：

// 解析application/x-www-form-urlencoded格式的表单数据
app.use(express.urlencoded({ extended: true }));

如果你用的是更老的Express版本，需要先安装body-parser包再引入配置。

2. 重写路由逻辑 #

一共需要三个路由，完全覆盖表单访问、提交跳转、个人页渲染的流程：

// 首页路由：返回带输入表单的页面
app.get('/',function(req,res){
  res.render('index'); // 渲染你存放表单的模板文件即可
});

// 表单提交处理接口：接收POST请求，拿到用户名后重定向
app.post('/', function(req, res) {
  const userName = req.body.name?.trim();
  // 空值校验，用户没输入名字直接跳回首页
  if (!userName) {
    return res.redirect('/');
  }
  // 拼接个人页地址做重定向，用encodeURIComponent转义特殊字符避免路径异常
  res.redirect(`/profile/${encodeURIComponent(userName)}`);
});

// 个人页动态路由：:name是路径占位符，匹配所有/profile/xxx格式的请求
app.get('/profile/:name', (req,res)=>{
  const data = {
    age: 19,
    job: 'Student',
    hobbies: ['Fishing','Video games','Anime','Basketball']
  };
  // 直接从req.params取路径上的name参数传给模板
  res.render('profile', {name: req.params.name, data: data});
});

3. 微调表单代码（可选优化） #

你原来的表单逻辑没问题，可以给输入框加required属性做前端非空校验，减少无效请求：

<h4>Search for your profile by entering your name below.</h4>
<form action="/" method="post">
  <input type="text" name="name" placeholder="Enter your name" required>
  <button type="submit">Search</button>
</form>

服务启动后，用户在首页输入John点击提交，浏览器会发送POST请求到根路径，后端拿到用户名后返回302重定向响应，浏览器自动跳转到/profile/John，最终匹配动态路由渲染个人资料页，完全符合需求。

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