Nodejs 页面模块化如何include

Nodejs 页面模块化如何include

场景：一个功能模块众多，多人合作的页面，譬如直播，空间这种。 模块化开发后最终将其合并起来时，html部分如何include比较好。

3 回复

Node.js 页面模块化如何 Include

在现代的Web开发中，模块化是一种非常重要的开发方式。它可以帮助我们更好地组织代码，提高可维护性和复用性。对于一个功能模块众多、多人协作的项目（如直播或个人空间页面），如何有效地进行页面模块化并实现 include 功能是一个关键问题。

解决方案

我们可以使用模板引擎来实现页面的模块化和 include 功能。常见的模板引擎有 EJS、Pug 和 Handlebars 等。这里以 EJS 为例，介绍如何在 Node.js 中实现页面的模块化和 include。

示例代码

  1. 安装 EJS

    首先，确保你已经安装了 EJS 模板引擎。如果没有安装，可以通过 npm 安装：

    npm install ejs --save

  2. 创建模板文件

    假设我们的项目结构如下：

    /project
  /views
    header.ejs
    footer.ejs
    index.ejs
  app.js
    • header.ejs 包含页面头部
    • footer.ejs 包含页面尾部
    • index.ejs 是主页面

  3. 编写模板文件

    • header.ejs:

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%- title %></title>
</head>
<body>
<header>
    <h1>Welcome to My Live Streaming Page</h1>
</header>

    • footer.ejs:

      <footer>
    <p>&copy; 2023 My Company</p>
</footer>
</body>
</html>

    • index.ejs:

      <% include header %>

<main>
    <h2>Live Streaming Dashboard</h2>
    <p>This is the main content of the page.</p>
</main>

<% include footer %>

  4. 设置 Express 服务器

    在 app.js 文件中配置 Express 并设置视图引擎为 EJS：

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

const app = express();

// 设置视图引擎为 EJS
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// 路由
app.get('/', (req, res) => {
    res.render('index', { title: 'Home' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

  5. 运行应用

    启动应用后，在浏览器中访问 http://localhost:3000，你将看到包含头部和尾部的完整页面。

通过这种方式，我们可以轻松地实现页面的模块化，并且可以方便地复用各个组件。这种方式非常适合多人协作的大型项目。


grunt-includes 满足我目前的需求。

在Node.js项目中实现页面模块化的include功能，可以通过使用模板引擎来实现。常用的模板引擎有EJS、Pug（以前称为Jade）、Handlebars等。这里以EJS为例，展示如何实现页面的模块化include。

示例代码

  1. 安装EJS

    首先确保已经安装了EJS模板引擎。如果还没有安装，可以使用npm进行安装：

    npm install ejs

  2. 创建项目结构

    创建一个基本的项目文件夹结构，包括以下文件：

    /views
  /header.ejs
  /footer.ejs
  /index.ejs
app.js

  3. 编写视图文件

    • header.ejs 文件：

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>

    • footer.ejs 文件：

      </body>
</html>

    • index.ejs 文件：

      <% include ./header.ejs %>
<h1>Welcome to the Live Streaming Page</h1>
<p>This is a live streaming example page.</p>
<% include ./footer.ejs %>

  4. 设置Express服务器

    在你的app.js文件中，配置Express服务器并设置视图引擎为EJS：

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

const app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', { title: 'Live Streaming' });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

  5. 运行项目

    确保所有文件都保存好之后，运行你的Node.js应用：

    node app.js

    打开浏览器访问http://localhost:3000，你应该能看到包含头部和尾部的完整页面。

通过这种方式，你可以将HTML页面分割成多个小模块，并使用EJS的<% include %>标签轻松地在需要的地方引入这些模块。这种方法有助于提高代码的可维护性和复用性。

回到顶部