如何在Express+Mongoose的Node项目中将MongoDB数据集渲染显示到EJS页面

问题修复方案 #

一、后端代码（server.js）修改点 #

你当前的核心问题是路由配置少了前缀斜杠，且没有加错误处理逻辑，修改如下：

1. 修正路由路径，补充错误判断：

// 原代码：app.get('viewrecipes', function(req, res){
// 修改为：
app.get('/viewrecipes', function(req, res){
    Recipe.find({}, function(err, recipes) {
        if(err) {
            console.error('数据查询错误：', err);
            return res.status(500).send('服务异常，请稍后重试');
        }
        res.render('viewrecipes', {
            recipesList: recipes
        })
    })
});

二、前端模板（viewrecipes.ejs）修改点 #

1. 填充图片链接，优化配料数组展示，删除无效的后端文件引入：

• 图片标签修改为：

<img src="<%= recipe.picture_link %>" class="card-img-top" alt="<%= recipe.title %>">

• 配料列表部分替换为循环输出（避免默认逗号拼接的不美观格式）：

<ul class="list-group list-group-flush">
    <% recipe.ingredients.forEach(item => { %>
        <li class="list-group-item"><%= item %></li>
    <% }) %>
</ul>

• 删除这行无效代码：

<script src="server.js"></script>

三、验证方法 #

修改完成后重启Node服务，访问 http://localhost:4000/viewrecipes 即可看到数据库中存储的所有食谱数据。如果页面空白，先确认你的MongoDB数据库中已经插入了符合recipeSchema结构的测试数据。

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