Nodejs中ejs如何嵌入node.js的代码？

Nodejs中ejs如何嵌入node.js的代码？

在访问 我这个网页的时候 我需要使用node.js 对文件进行一下操作 。 就比如 点击修改文件的按钮 就得先fs.readFile一下 出来文件内容 可是现在不知道应该怎么做。。。。 求解答。。。。。 在线等

5 回复

当然可以。以下是一个详细的解答，展示如何在 Node.js 中使用 EJS 模板引擎来嵌入和执行 Node.js 代码。

Node.js 中 EJS 如何嵌入 Node.js 的代码

EJS（Embedded JavaScript）是一种简单的模板引擎，允许你在 HTML 文件中嵌入 JavaScript 代码。这在生成动态内容时非常有用。下面我们通过一个具体的例子来说明如何在 Node.js 中使用 EJS 来实现这一功能。

步骤 1: 安装必要的依赖

首先，你需要安装 express 和 ejs。你可以使用 npm 来安装它们：

npm install express ejs

步骤 2: 创建基本的 Express 应用

接下来，创建一个简单的 Express 应用来渲染 EJS 模板。假设你的项目结构如下：

myapp/
├── app.js
└── views/
    └── index.ejs

在 app.js 中编写如下代码：

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

const app = express();

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

// 设置视图文件夹
app.set('views', path.join(__dirname, 'views'));

// 主页路由
app.get('/', (req, res) => {
    // 读取文件内容
    fs.readFile(path.join(__dirname, 'data.txt'), 'utf8', (err, data) => {
        if (err) {
            console.error(err);
            return res.status(500).send('Error reading file.');
        }
        // 渲染 EJS 模板并传递文件内容
        res.render('index', { content: data });
    });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

步骤 3: 创建 EJS 模板

在 views/index.ejs 文件中，编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS with Node.js</title>
</head>
<body>
    <h1>File Content:</h1>
    <pre><%- content %></pre>
    
    <!-- 示例：点击按钮后读取文件 -->
    <button onclick="fetchFileContent()">Modify File</button>

    <script>
        function fetchFileContent() {
            fetch('/modify')
                .then(response => response.text())
                .then(data => {
                    document.querySelector('pre').innerText = data;
                })
                .catch(error => console.error('Error:', error));
        }
    </script>
</body>
</html>

步骤 4: 添加处理按钮点击事件的路由

为了响应按钮点击事件，我们需要添加一个新的路由 /modify：

// 修改文件内容的路由
app.get('/modify', (req, res) => {
    // 读取文件内容
    fs.readFile(path.join(__dirname, 'data.txt'), 'utf8', (err, data) => {
        if (err) {
            console.error(err);
            return res.status(500).send('Error reading file.');
        }
        // 返回文件内容
        res.send(data);
    });
});

这样，当你访问根路径（/），页面会显示文件内容。当你点击“Modify File”按钮时，会触发一个 AJAX 请求来获取文件内容，并更新页面上的显示。

希望这个示例能帮助你理解如何在 Node.js 中使用 EJS 嵌入和执行 Node.js 代码。如果你有任何问题或需要进一步的帮助，请随时提问！


求大神 在线等。。。。。

你的方向是错的，ejs生成后的内容是属于前端的，而前端无法直接操作文件系统。 只能是通过页面的按钮，发送请求到后端来执行你想要做的node.js的操作。

客户点击按钮 - （发送请求到后端 - 后端接收请求并处理请求 - 返回结果） - 客户的后续操作。

谢谢二楼大神， 这下我就知道应该怎么做了

在Node.js中使用EJS模板引擎时，你可以将Node.js代码嵌入到EJS模板中，以动态生成HTML内容。例如，你可以通过读取文件内容并将该内容传递给EJS模板来实现在点击按钮时修改文件内容的需求。

示例代码

首先，确保你已经安装了EJS和fs模块：

npm install ejs

接下来，创建一个简单的Node.js服务器，并使用EJS模板读取文件内容。

文件结构

/project
  /views
    index.ejs
  app.js

app.js

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

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

// 设置视图文件夹路径
app.set('views', path.join(__dirname, 'views'));

app.get('/', (req, res) => {
  // 读取文件内容
  fs.readFile(path.join(__dirname, 'views', 'example.txt'), 'utf-8', (err, data) => {
    if (err) throw err;
    
    // 渲染EJS模板，并将文件内容传递给模板
    res.render('index', { content: data });
  });
});

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

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EJS with Node.js Example</title>
</head>
<body>
  <h1>文件内容如下：</h1>
  <pre><%- content %></pre>

  <!-- 示例按钮，用于修改文件内容 -->
  <button id="modifyButton">修改文件内容</button>

  <script>
    document.getElementById('modifyButton').addEventListener('click', () => {
      fetch('/update', { method: 'POST' })
        .then(response => response.text())
        .then(data => {
          alert('文件已更新为：\n' + data);
          location.reload(); // 重新加载页面以显示更新后的内容
        });
    });
  </script>
</body>
</html>

处理文件修改请求

为了处理文件修改请求，你需要添加一个新的路由处理程序：

app.post('/update', (req, res) => {
  const newContent = "这是新文件内容！";
  
  fs.writeFile(path.join(__dirname, 'views', 'example.txt'), newContent, (err) => {
    if (err) throw err;
    res.send(newContent); // 返回新的文件内容，可以在客户端展示
  });
});

在这个示例中，当用户点击“修改文件内容”按钮时，会触发一个POST请求到/update，然后更新文件内容并返回新的内容。刷新页面即可看到更新后的文件内容。

这样你就能够在EJS模板中嵌入Node.js代码，并实现动态地读取和更新文件内容的功能。

回到顶部