Nodejs：html 代码如何嵌入node.JS代码

Nodejs：html 代码如何嵌入node.JS代码

html 代码如何嵌入node.JS代码 就像jsp或者php那样

6 回复

Node.js: 如何在 HTML 中嵌入 Node.js 代码

在 Node.js 中，我们通常不会直接将 HTML 代码嵌入到 Node.js 代码中。相反，我们会使用模板引擎来动态生成 HTML 内容。这种方式类似于 JSP 或 PHP，但在 Node.js 中，有许多流行的模板引擎可供选择，如 EJS、Pug（原名 Jade）和 Handlebars。

示例 1: 使用 EJS 模板引擎

EJS 是一个简单易用的模板引擎，它允许你在 HTML 文件中嵌入 JavaScript 代码。首先，你需要安装 EJS：

npm install ejs

接下来，创建一个简单的 Express 应用来演示如何使用 EJS。

  1. 安装 Express:

    npm install express

  2. 创建 app.js 文件:

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

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

// 创建一个简单的路由
app.get('/', (req, res) => {
    res.render('index', { message: 'Hello from EJS!' });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

  3. 创建一个 views/index.ejs 文件:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS Example</title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

运行 app.js，然后访问 http://localhost:3000，你会看到页面上显示 “Hello from EJS!”。

示例 2: 使用 Pug 模板引擎

Pug 是另一种流行的模板引擎，它的语法更简洁。首先，安装 Pug：

npm install pug

  1. 修改 app.js 文件:

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

// 设置 Pug 作为视图引擎
app.set('view engine', 'pug');

// 创建一个简单的路由
app.get('/', (req, res) => {
    res.render('index', { message: 'Hello from Pug!' });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

  2. 创建一个 views/index.pug 文件:

    doctype html
html(lang='en')
    head
        meta(charset='UTF-8')
        meta(name='viewport' content='width=device-width, initial-scale=1.0')
        title Pug Example
    body
        h1 #{message}

运行 app.js，然后访问 http://localhost:3000，你会看到页面上显示 “Hello from Pug!”。

通过这些示例，你可以看到如何在 Node.js 中使用模板引擎来动态生成 HTML 内容。这不仅使代码更清晰，而且更容易维护。


比如php有echo 函数直接输出字符串或者变量到html网页中。还有 jsp中的代码<%=变量名%>

ejs 是三种： <% code %>：JavaScript 代码。 <%= code %>：显示替换过HTML 特殊字符的内容。 <%- code %>：显示原始HTML 内容。

看你用哪种模板了 如果是ejs, 那么<%= 变量名 %>同样功能， 另外还有<% %>执行其中语句， <%- %>直接嵌入其中语句

有个webkit的lib，导入之后html上是可以写nodejs代码的

要在 Node.js 中将 HTML 代码与 JavaScript 代码结合使用，可以借助模板引擎来实现。常见的模板引擎包括 EJS、Pug（原名 Jade）、Handlebars 等。这些模板引擎允许你在 HTML 文件中嵌入 JavaScript 代码，并且能够动态生成 HTML。

示例使用 EJS 模板引擎

1. 安装 EJS

首先，你需要安装 EJS 模板引擎。可以通过 npm 来安装：

npm install ejs

2. 创建 EJS 模板文件

创建一个 .ejs 文件，例如 index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to <%= title %></h1>
    <% if (isLoggedIn) { %>
        <p>Hello, <%= username %>!</p>
    <% } else { %>
        <p>Please log in.</p>
    <% } %>
</body>
</html>

3. 使用 EJS 渲染页面

在你的 Node.js 应用中，使用 Express 框架来渲染这个 EJS 文件：

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', function(req, res) {
    const data = {
        title: 'My Website',
        isLoggedIn: true,
        username: 'John Doe'
    };
    res.render('index', data);
});

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

解释

  • EJS 文件：在 HTML 中，你可以使用 <% %> 标签来插入 JavaScript 代码。<%= %> 用于输出变量值。
  • Express 路由：在路由中，你可以传递数据给 EJS 模板，并通过 res.render() 方法来渲染页面。

总结

通过使用模板引擎如 EJS，你可以轻松地将 HTML 和 JavaScript 代码结合起来。这种方式不仅更灵活，而且更容易维护。

回到顶部