静态文件和动态文件是什么意思？

静态是指不按时更改的预渲染网页。 动态意味着它是在服务器请求时实时生成的。

在本文中，您将了解到：

• 渲染一个静态文件，只使用节点模块
• 使用 hbs 包渲染动态文件
• 渲染具有不同扩展名的文件

为此，您需要对 JavaScript 和 HTML 有一些了解，并且应该知道如何使用 Node.js 和 Express 构建应用程序。 不熟悉的可以参考我之前的文章。

但是，让我们在这里快速回顾一下。

1. 为您的项目启动 NPM：

npm init

2. 安装所需的包（Express、nodemon）：

npm install express nodemon

3. 在端口 5000 上启动服务器：

app.listen(5000, ()=> {     console.log(`server is running in port 5000`);})

使用 Node.js 渲染静态文件并表达

首先，在根目录中创建一个名为 views 的文件夹，用于放置要渲染的文件。 然后，创建要呈现的 HTML 文件。

index.html

    
    
    
    


    
This is a static file
    
File is rendered using Node and Express

我不关心前端，因为我们专注于后端。

创建此文件后，您需要导入路径节点模块。

const path = require("path");

然后，您可以使用以下命令呈现该 HTML 文件。

app.use(express.static(path.join(__dirname, “/views”)));

输出将如下所示：

index.js

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


app.use(express.static(path.join(__dirname, "/views")));

app.listen(5000, ()=> {
    console.log(`server is running in port 5000`);
})

渲染动态文件

有几个模板，如 pug、handlebars、ejs 等来呈现动态网页。 但是我们将为我们的项目使用车把。

所以，我们需要安装 hbs 包：

npm install hbs

然后，导入包：

const hbs = require('hbs');

视图引擎支持使用特定模板呈现动态网页。

我们需要将视图引擎设置为 hbs：

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

为了避免混淆，我们需要告诉视图引擎视图的路径：

app.set("views", path.join(__dirname,"/public"));

在这里，public 是我们用来存储文件的文件夹名称。 因此，创建一个名为 index 的新文件，扩展名为 .hbs

.hbs 是车把的扩展名。

现在，文件夹结构如下所示：

将以下代码段添加到 index.hbs 文件中。

    
    
    
    


    
Dynamic Rendering
    
name : {{name}}
    
age : {{age}}

然后，使用 get 方法创建一个路由来渲染 index.hbs 文件。

您可以使用 res.render() 函数来渲染文件，然后您需要传递动态数据。

根据这个名字和年龄：

app.get("/", (req, res) => {
  res.render("index", {
    name: "Kushan", age: 24
  });
});

输出:

index.js

const express = require('express');
const hbs = require('hbs');
const path = require("path");
const app = express();

app.set("view engine", "hbs");
app.set("views", path.join(__dirname,"/public"));

app.get("/", (req, res) => { 
    res.render("index", {    
        name: "Kushan", 
        age: 24
    });
});

app.listen(5000, ()=> {
    console.log(`server is running in port 5000`);
})

渲染具有不同扩展名的文件

到目前为止，我们只演示了渲染扩展名为 .hbs 的文件。

因此，让我们看看如何渲染具有不同扩展名的文件。

您只需对 index.js 的上述代码进行一些更改即可。 然后在名为 index.html（扩展名为 .html）的公共文件夹中创建一个文件。 键入要在该文件中显示的任何内容。

app.set("view engine", "html");
app.engine('html', hbs.__express);

概括

我们通过提到静态文件和动态文件之间的区别来开始本文。 然后，我们谈到了渲染一个没有任何包的静态文件。 在我们学习了如何使用把手渲染动态文件，然后渲染带有 .html 扩展名的文件之后。

关注七爪网，获取更多APP/小程序/网站源码资源！