Express+Node.js页面跳转报错：无法GET /acc_id.js求助

一、跳转报错的原因及修复方法 #

你当前的问题核心是混淆了路由路径与文件路径：

• 按钮的a href指向acc_id.js，但Express的路由是通过后端代码配置的URL路径，并非直接指向后端JS文件；
• 你在index.js中配置的根路径渲染acc_id，但实际访问的/acc_id.js和路由规则不匹配，因此触发cannot GET /acc_id.js错误。

正确操作步骤： #

1. 修改前端跳转链接：将按钮的a href改为路由路径，比如/register（不要指向JS文件）：

   <a href="/register" class="btn">前往注册</a>
   

2. 配置对应路由规则：在index.js中添加注册页的路由，指向你的acc_id.ejs模板（假设使用EJS模板引擎）：

   // index.js
   const express = require('express');
   const app = express();
   
   // 设置模板引擎与模板文件存放目录
   app.set('view engine', 'ejs');
   app.set('views', './views');
   
   // 首页路由
   app.get('/', (req, res) => {
     res.render('index'); // 渲染views/index.ejs
   });
   
   // 注册页路由
   app.get('/register', (req, res) => {
     res.render('acc_id'); // 渲染views/acc_id.ejs
   });
   
   app.listen(3000, () => console.log('服务器运行在3000端口'));
   

3. 规范文件结构：将所有模板文件（.ejs/.pug等）统一放在views文件夹下，示例结构：

   项目根目录
   ├── index.js       // 项目主入口文件
   ├── views/
   │   ├── index.ejs  // 首页模板
   │   └── acc_id.ejs // 注册页模板
   └── node_modules/
   

二、带用户表单的页面存放位置 #

带表单的页面（如注册、登录页）属于前端视图模板，统一放在views文件夹下即可。若页面数量较多，可按功能划分子文件夹，示例：

views/
├── auth/
│   ├── register.ejs
│   └── login.ejs
└── index.ejs

对应路由可调整为：

app.get('/auth/register', (req, res) => {
  res.render('auth/register');
});

三、views文件夹中的layouts是什么 #

layouts（布局模板）用于实现页面结构复用：网站的头部导航、底部版权信息等全局通用部分，无需在每个页面模板中重复编写，只需统一写在布局模板里，其他页面仅需填充专属内容区域。

以EJS配合express-ejs-layouts中间件为例：

1. 安装中间件：npm install express-ejs-layouts
2. 在views下创建layouts/main.ejs作为全局布局：

   <!DOCTYPE html>
   <html>
   <head>
     <title><%= title %></title>
   </head>
   <body>
     <header>网站全局导航</header>
     <!-- 内容占位符，子页面内容会插入此处 -->
     <%- body %>
     <footer>版权所有 © 2025</footer>
   </body>
   </html>
   

3. 在index.js中启用布局功能：

   const expressLayouts = require('express-ejs-layouts');
   app.use(expressLayouts);
   app.set('layout', 'layouts/main'); // 指定默认布局文件
   

4. 子页面acc_id.ejs仅需编写注册页专属内容：

   <h1>用户注册</h1>
   <form action="/register" method="post">
     <input type="text" name="username" placeholder="请输入用户名">
     <input type="password" name="password" placeholder="请输入密码">
     <button type="submit">完成注册</button>
   </form>
   

渲染注册页时，系统会自动将acc_id.ejs的内容插入到main.ejs的<%- body %>位置，实现全局结构复用。

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