如何在HTML中展示Node.js从MongoDB获取的单元数据？

你当前的问题是HTML中的Handlebars模板语法（{{#each data}}）无法被解析，导致数据无法渲染到页面上，同时后端的/unidades/dados路由存在变量名错误。以下提供两种可行的解决方案：

方案一：服务端渲染（使用Handlebars模板引擎） #

这种方案适配你已写的Handlebars语法，通过服务端把数据注入模板后再返回页面。

1. 安装并配置模板引擎 #

首先安装express-handlebars依赖：

npm install express-handlebars

修改index.js，添加模板引擎配置：

// config inicial
const express = require('express')
const mongoose = require('mongoose')
const app = express()
const path = require('path')
const bodyParser = require('body-parser')
// 新增：引入handlebars模板引擎
const exphbs = require('express-handlebars')

// 配置handlebars模板引擎
app.engine('handlebars', exphbs.engine())
app.set('view engine', 'handlebars')
// 设置模板文件存放目录（需在项目根目录新建views文件夹）
app.set('views', path.join(__dirname, 'views'))

// forma de ler JSON / middlewares
app.use(
  bodyParser.urlencoded({
    extended: true,
  }),
)

app.use(bodyParser.json())
app.use(express.static(path.join(__dirname, 'public')));

// rotas da API
const usersRoutes = require('./routes/usersRoutes')
app.use('/users', usersRoutes);

const unidadesRoutes = require('./routes/unidadesRoutes');
app.use('/unidades', unidadesRoutes)

2. 调整模板文件与路由 #

• 将你现有的HTML文件移动到新建的views文件夹中，重命名为unidades.handlebars（保持原内容不变）。
• 修改unidadesRoutes.js，添加渲染页面的路由，并修复/dados路由的变量错误：

const router = require('express').Router()
const Unidades = require('../models/Unidades')

// criação de unidades
router.post('/register',  async (req, res) => {
    const Unidade = await new Unidades({
        name : req.body.txtName,
        address : req.body.txtAddress,
        quadras : req.body.txtQuadras
    })
    Unidade.save(function(err){
        if(err){
            console.log(err)
        }else{
            res.redirect('/unidades') // 跳转至渲染后的页面
        }
    })
})

// 新增：渲染单元管理页面并传递数据
router.get('/', async (req, res) => {
    try{
        const data = await Unidades.find({}, 'name address quadras -_id');
        res.render('unidades', { data }) // 将数据注入模板
    }catch(e){
        res.status(500).send({ message: 'Falha ao carregar os dados! '})
    }
})

router.get('/dados', async(req, res) =>{
    try{
        const data1 = await Unidades.find({}, 'name address quadras -_id');
        res.status(200).send(data1); // 修复：变量名从data改为data1
    }catch(e){
        res.status(500).send({ message: 'Falha ao carregar os dados! '})
    }
})

module.exports = router

3. 访问页面 #

启动服务后，访问http://localhost:你的端口/unidades，即可看到渲染后的单元数据。

方案二：前端AJAX请求（纯前端渲染） #

如果不想使用服务端模板引擎，可以通过前端JS请求API接口，动态生成页面内容。

1. 修改HTML结构 #

将原有的Handlebars语法替换为空的容器，用来承载动态渲染的内容：

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./css/unidades.css" rel="stylesheet" type="text/css">
    <title>Gerenciamento de Unidades - ChuteSal</title>
</head>
<body>
    <div class="main-unidades">
        <div class="right-unidades">
            <div class="card-unidades">
                <h1>Unidades Cadastradas</h1>
                <!-- 新增：空容器用于渲染数据 -->
                <div id="unidades-container"></div>
            </div>
        </div>
        <form action="/unidades/register" method="POST">
            <div class="right-unidades">
                <div class="card-unidades">
                    <h1>Cadastre as Unidades</h1>
                    <div class="textfield">
                        <label for="name">Nome da Unidade</label>
                        <input type="text" name="txtName" id="unidade" placeholder="Nome da Unidade">
                    </div>
                    <div class="textfield">
                        <label for="endereco">Endereço</label>
                        <input type="text" name="txtAddress" id="endereco" placeholder="Endereço da Unidade">
                    </div>
                    <div class="textfield">
                        <label for="quadras">Quantidade de quadras</label>
                        <input type="number" name="txtQuadras" id="quadras" min="1" placeholder="Quantidade de Quadras">
                    </div>
                    <button class="btn-unidades" type="submit" id="unidades-button">CRIAR</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 新增：前端请求数据的JS代码 -->
    <script>
        async function loadUnidades() {
            const container = document.getElementById('unidades-container');
            try {
                const response = await fetch('/unidades/dados');
                if (!response.ok) throw new Error('Erro na requisição');
                const unidades = await response.json();
                
                // 清空容器并渲染数据
                container.innerHTML = '';
                unidades.forEach(unidade => {
                    const item = document.createElement('div');
                    item.innerHTML = `
                        Name: ${unidade.name}<br>
                        Address: ${unidade.address}<br>
                        Quadras: ${unidade.quadras}<br><hr>
                    `;
                    container.appendChild(item);
                });
            } catch (err) {
                container.innerHTML = '<p>Falha ao carregar unidades.</p>';
                console.error(err);
            }
        }

        // 页面加载时执行
        window.addEventListener('DOMContentLoaded', loadUnidades);
        // 表单提交后重新加载数据
        document.querySelector('form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            await fetch('/unidades/register', {
                method: 'POST',
                body: formData
            });
            loadUnidades(); // 重新加载数据
            e.target.reset(); // 重置表单
        });
    </script>
</body>
</html>

2. 修复后端路由错误 #

同样需要修改unidadesRoutes.js中的/dados路由，将res.status(200).send(data);改为res.status(200).send(data1);，否则会出现变量未定义的错误。

3. 访问页面 #

将修改后的HTML文件放到public文件夹中，启动服务后访问http://localhost:你的端口/文件名.html，即可看到动态渲染的单元数据，且提交表单后页面会自动刷新数据。

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