Node.js + Express + Handlebars.js + 部分视图-知答

Javascript

const express = require('express');

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

const app = express();

// 设置Handlebars模板引擎

app.engine('handlebars', exphbs());

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

// 设置静态文件目录

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

// 设置路由

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

res.render('home');

});

// 启动服务器

app.listen(3000, () => {

console.log('Server started on port 3000');

});

html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>欢迎来到我的博客</h1>

{{{body}}}

</footer>

</body>

</html>

元素，用于包装文章的内容。我们使用了Handlebars的双大括号语法（{{}}），用于插入文章的标题和内容。

现在，我们需要在app.JS文件中修改我们的路由，以便在主页上显示文章列表。在路由定义的回调函数中，我们将使用res.render方法来渲染home视图，并传递一个包含文章数据的对象。

Javascript
app.get('/', (req, res) => {
  const articles = [
    {
      title: 'Node.JS入门指南',
      content: 'Node.JS是一个基于Chrome V8引擎的JavaScript运行环境，用于构建高性能的网络应用程序。'
    },
    {
      title: 'Express框架介绍',
      content: 'Express是Node.JS的一个Web应用程序框架，它提供了许多有用的功能和工具，帮助开发人员快速构建可扩展的Web应用程序。'
    },
    {
      title: 'Handlebars模板引擎',
      content: 'Handlebars.JS是一个简单而灵活的模板引擎，它允许我们在应用程序中构建可重用的视图组件。'
    }
  ];
  res.render('home', { body: articles.map(article => {
    return <code><h3><strong>${article.title}</strong></h3>
<img src="https://img.izhida.com/topic/986c37480b1f1c2e443504b38b6361b4.jpg" alt="Chrome"><br>Chrome
${article.content}
</code>;
  }).join('') });
});

在上面的代码中，我们创建了一个包含三篇文章的数组。然后，我们使用map方法对每篇文章进行转换，并添加了一个标签来作为标题的样式。最后，我们使用join方法将所有文章的内容连接并将结果传递给home视图的body参数。
现在，我们可以启动我们的应用程序，并访问http://localhost:3000来查看结果。
通过以上案例，我们展示了如何使用Node.JS、Express和Handlebars.JS来构建一个简单的博客应用程序，并使用部分视图来创建文章列表和文章详情页面。这种分离视图的方式，使得我们的代码更加模块化和可维护，同时提高了开发效率。
：
- Node.JS是一个基于Chrome V8引擎的JavaScript运行环境，用于构建高性能的网络应用程序。
- Express是Node.JS的一个Web应用程序框架，它提供了许多有用的功能和工具，帮助开发人员快速构建可扩展的Web应用程序。
- Handlebars.JS是一个简单而灵活的模板引擎，它允许我们在应用程序中构建可重用的视图组件。
- 使用部分视图可以将页面的不同部分分别开发和维护，提高代码的模块化和可维护性。
- 在实际开发中，我们可以使用Node.JS、Express和Handlebars.JS来构建具有部分视图的应用程序，以提高开发效率和代码质量。
示例代码：
Javascript
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
// 设置Handlebars模板引擎
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
// 设置静态文件目录
app.use(express.static('public'));
// 设置路由
app.get('/', (req, res) => {
const articles = [
{
title: 'Node.JS入门指南',
content: 'Node.JS是一个基于Chrome V8引擎的JavaScript运行环境，用于构建高性能的网络应用程序。'
},
{
title: 'Express框架介绍',
content: 'Express是Node.JS的一个Web应用程序框架，它提供了许多有用的功能和工具，帮助开发人员快速构建可扩展的Web应用程序。'
},
{
title: 'Handlebars模板引擎',
content: 'Handlebars.JS是一个简单而灵活的模板引擎，它允许我们在应用程序中构建可重用的视图组件。'
}
];
res.render('home', { body: articles.map(article => {
return <code><h3><strong>${article.title}</strong></h3>
${article.content}
</code>;
}).join('') });
});
// 启动服务器
app.listen(3000, () => {
console.log('Server started on port 3000');
});
html
<!DOCTYPE html>
<html>
<head>
<title>博客</title>
<link rel="stylesheet" type="text/CSS" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=/styles.CSS">
</head>
<body>
<h1>欢迎来到我的博客</h1>
<h2>最新文章</h2>
{{{body}}}
<footer>
© 2021 博客
</footer>
</body>
</html>
html
<article>
<h2>{{title}}</h2>

{{content}}
</article>

Node.js + Express + Handlebars.js + 部分视图

1个回答

xxxzyt

热门话题

相关问题