没有使用视图/模板引擎（Handlebars）在网页上获取任何动态内容

Question

我正在使用 Handlebars 模板引擎。在控制台没有收到任何错误，但我无法在从 app.js 渲染的 index.hbs 文件中显示动态内容

app.js

const express = require('express');
const app = express();

app.set('view engine','hbs');   

app.use(express.urlencoded({extended:true}));   //to get the html form data

app.use(express.static('./public'));

app.use(express.json());

app.get('/',(req,res)=>{
    
    res.render('index.hbs'); 

});

app.post('/', async (req,res)=>{

   const currentCity = req.body.city; 
   
   let WRAP_DATA = await getCityWeather(currentCity);  //getCityWeather function return weather by city
   
   console.log('Weather Info = ',WRAP_DATA); // successfully got the WRAP_DATA 
   
   res.render('index.hbs',{WRAP_DATA});
});

在控制台我成功获得了 WRAP_DATA

description: 'overcast clouds',
humidity: 53,
visibility: 10,
windSpeed: 2.592,
winddeg: 32

index.hbs

“它位于视图文件夹内并正确显示 HTML 和 CSS，唯一的问题是替换动态数据”。我提到的代码仅使用 hbs {{ }} 标签。

<table>
                <tr class="detail">
                    <td> <img src="../img/humidity.png" class="desc_icon"> </td>
                    <td class="label">Humidity</td>
                    <td class="value"> {{ WRAP_DATA.humidity }} %</td>
                </tr>
                <tr class="detail">
                    <td> <img src="../img/visibility.png" class="desc_icon"> </td>
                    <td class="label">Visibility</td>
                    <td class="value"> {{ WRAP_DATA.visibility }} km</td>
                </tr>
                <tr class="detail">
                    <td> <img src="../img/windspeed.png" class="desc_icon"> </td>
                    <td class="label">Wind Speed</td>
                    <td class="value"> {{ WRAP_DATA.windSpeed }} km/h</td>
                </tr>
                <tr class="detail">
                    <td> <img src="../img/direction.png" class="desc_icon"> </td>
                    <td class="label">Wind Direction</td>
                    <td class="value"> {{ WRAP_DATA.winddeg }} °</td>
                </tr>
</table>

当我运行我的项目时，我的后端工作正常，但上面提到的 WRAP_DATA 值没有显示在 index.hbs 中的位置

Answer 1

您需要安装该软件包，请前往
```
express-handlebars
```
：

npm install express-handlebars

导入包：

const handlebars = require('express-handlebars');

设置
```
app.engine
```
并调用
```
handlebars.engine
```
配置函数设置
```
views
```
目录。

const path = require("path");
app.set('view engine','hbs');
app.set('views', path.join(__dirname, '/views'));
app.engine('hbs', handlebars.engine({
    extname: 'hbs',
    layoutsDir: __dirname + '/views/layouts',
}));

在您的
```
/views/layouts
```
目录中，您将需要一个
```
main.hbs
```
，并在
```
{{{body}}}
```
标签内添加
```
<body>
```
：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" /> 
    <title>Main Title Here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  </head>
  <body>
    {{{body}}}
  </body>
</html>

确保您的
```
index.hbs
```
位于
```
/views/index.hbs
```
，您应该没问题。

没有使用视图/模板引擎（Handlebars）在网页上获取任何动态内容

问题描述投票：0回答：1

1个回答

最新问题

没有使用视图/模板引擎（Handlebars）在网页上获取任何动态内容

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1