本文深入探讨了在express.js应用中ejs文件渲染失败，出现“cannot get /store.html”错误的原因。核心问题在于对express路由与ejs视图引擎工作机制的误解，特别是url与服务器端路由的匹配，以及视图文件渲染时的正确调用方式。教程将详细指导如何正确配置和访问ejs模板，确保动态内容能够顺利呈现。
引言
在开发基于Node.js和Express框架的Web应用时，EJS（Embedded JavaScript）作为一种流行的模板引擎，常用于生成动态HTML内容。然而，开发者在初次使用或配置不当的情况下，可能会遇到EJS文件无法正确渲染，浏览器显示“Cannot GET /your-file.html”或类似错误。这通常不是EJS模板文件本身的问题，而是对Express路由、视图引擎配置以及客户端请求方式的理解偏差所致。
问题分析：'Cannot GET /store.html'
当您尝试通过浏览器访问 http://localhost:3000/store.html 时，如果服务器返回“Cannot GET /store.html”错误，这表明Express服务器未能找到与该URL路径匹配的路由处理器，或者未能将该请求视为对静态文件的请求。
在提供的代码示例中，开发者期望渲染一个名为 store.ejs 的模板文件。然而，通过 store.html 路径访问时，服务器的响应表明它正在尝试寻找一个名为 store.html 的静态文件，或者一个处理 /store.html 路径的特定路由，但两者均未找到。这揭示了以下几个关键误解：
- 路由与文件扩展名： Express路由 (app.get('/store', ...)) 定义的是一个URL路径，而不是一个文件路径。客户端请求的URL应该与定义的路由路径匹配，而不是直接指向服务器上的模板文件（例如 store.ejs）或带有.html扩展名的文件。
- EJS视图引擎的工作方式： 当Express配置了EJS作为视图引擎后，res.render() 方法会根据视图名称（不带扩展名）自动查找对应的EJS文件，并使用EJS引擎进行渲染。客户端不需要知道或指定模板文件的扩展名。
- 静态文件服务： app.use(express.static('public')) 配置用于提供静态资源（如CSS、JS、图片等），这些文件通常直接存储在 public 目录下，并通过其原始路径访问。EJS模板文件不属于静态资源，它们需要通过视图引擎进行处理。
Express.js与EJS视图引擎工作原理
为了正确渲染EJS模板，我们需要理解Express如何协同EJS工作。
1. 视图引擎配置
在Express应用中，您需要明确告知Express使用哪个模板引擎以及模板文件存放在何处。
app.set('views', path.join(__dirname, 'views')); // 指定模板文件存放的目录
app.set('view engine', 'ejs'); // 设置EJS为默认的视图引擎- app.set('views', ...)：告诉Express所有模板文件都位于 views 目录下。
- app.set('view engine', 'ejs')：告诉Express当调用 res.render() 方法时，默认使用EJS引擎来处理模板，并且在查找模板文件时，会自动添加 .ejs 扩展名。
2. 路由定义与视图渲染
路由定义了服务器如何响应特定的HTTP请求（例如GET、POST）以及对应的URL路径。
app.get('/store', (req, res) => {
// ... 业务逻辑 ...
res.render('store', { items: JSON.parse(data) }); // 渲染名为 'store' 的EJS模板
});- app.get('/store', ...)：这个路由处理器会在客户端请求 http://localhost:3000/store 时被触发。
- res.render('store', ...)：此方法会指示Express查找 views 目录下的 store.ejs 文件，使用EJS引擎处理它，并将处理结果作为HTML响应发送给客户端。注意，这里传递给 render 方法的视图名称是 store，不包含 .ejs 扩展名。
3. 静态资源与动态视图
- 静态资源： 通过 app.use(express.static('public'))，Express会将 public 目录下的文件作为静态资源提供。例如，如果 public 目录下有一个 style.css 文件，客户端可以通过 http://localhost:3000/style.css 访问。
- 动态视图： EJS模板文件（例如 views/store.ejs）是动态视图，它们需要通过 res.render() 方法和视图引擎进行处理，而不是直接通过URL访问。
解决方案：正确配置与访问EJS模板
结合上述原理，解决“Cannot GET /store.html”问题的关键在于确保客户端请求的URL与服务器端定义的路由相匹配，并且服务器端使用正确的 res.render() 方法来处理EJS模板。
代码示例与解析
以下是您提供的Express应用代码，我们将对其关键部分进行解析：
if (process.env.NODE_ENV !== 'production') {
require('dotenv').config()
}
const stripeSecretKey = process.env.STRIPE_SECRET_KEY
const stripePublicKey = process.env.STRIPE_PUBLIC_KEY
const express = require('express')
const path = require('path')
const app = express()
const fs = require('fs')
const stripe = require('stripe')(stripeSecretKey)
// 1. EJS视图引擎配置
app.set('views', path.join(__dirname, 'views')) // 指定模板文件目录为当前目录下的'views'文件夹
app.set('view engine', 'ejs') // 设置EJS为视图引擎
// 2. 中间件配置
app.use(express.json()) // 解析JSON格式的请求体
app.use(express.static('public')) // 提供'public'目录下的静态文件
// 3. 路由定义
app.get('/store', (req, res) => { // 定义一个GET请求的路由，路径为 '/store'
fs.readFile('items.json', (error, data) => {
if (error) {
res.status(500).end()
} else {
// 4. 渲染EJS模板
res.render('store', { // 渲染名为 'store' 的EJS模板，Express会自动查找 'views/store.ejs'
items: JSON.parse(data)
})
}
})
})
app.listen(3000, () => {
console.log('Server is running on port 3000');
})关键修正点：
根据上述代码，您的Express应用已经正确配置了EJS视图引擎和路由。因此，问题出在客户端的访问方式上。
-
错误访问方式：
- http://localhost:3000/store.html (错误，服务器没有处理此路径的路由，也不是静态文件)
- http://localhost:3000/store.ejs (错误，EJS模板不应直接通过URL访问)
-
正确访问方式：
- 您应该通过浏览器访问 http://localhost:3000/store。
当您访问 http://localhost:3000/store 时：
- Express会匹配到 app.get('/store', ...) 这个路由。
- 路由处理器中的 res.render('store', ...) 会被调用。
- 由于 view engine 被设置为 ejs，Express会在 views 目录下查找 store.ejs 文件。
- EJS引擎会处理 store.ejs 模板，将 items 数据注入其中，生成最终的HTML。
- 生成的HTML内容将作为响应发送给客户端。
注意事项与常见问题
- EJS包安装： 确保您的项目中已经安装了EJS包。如果没有，请运行 npm install ejs。
- 文件路径： 确认 store.ejs 文件确实位于项目根目录下的 views 文件夹中。例如，如果您的 app.js 在项目根目录，那么 views/store.ejs 路径是正确的。
- 路由冲突： 检查是否有其他路由或静态文件服务与 /store 路径冲突。
- 服务器重启： 每次修改服务器端代码后，请确保重启Node.js应用以使更改生效。
总结
在Express.js中使用EJS模板时，理解路由、视图引擎配置和客户端请求之间的关系至关重要。避免直接在URL中包含 .html 或 .ejs 扩展名来访问动态模板。正确的做法是：
- 通过 app.set('view engine', 'ejs') 和 app.set('views', 'your_views_directory') 配置视图引擎。
- 通过 app.get('/your_route', ...) 定义路由。
- 在路由处理器中使用 res.render('your_template_name', data) 来渲染模板（模板名称不带扩展名）。
- 客户端通过与路由匹配的URL（例如 http://localhost:3000/your_route）来访问。
遵循这些原则，您将能够有效地利用EJS和Express构建功能强大的动态Web应用。
