Nodejs 拒绝使用模板，直接访问静态网页

Nodejs 拒绝使用模板，直接访问静态网页

教材上都是使用模板的，但如果有一个abc.html网页，不想通过模板，直接访问abc.html，该如何做。简介下过程和原理，非常感谢。

6 回复

Node.js 拒绝使用模板，直接访问静态网页

在许多教程中，我们通常会看到如何使用模板引擎（如 EJS、Pug 或 Handlebars）来生成动态网页内容。然而，在某些情况下，你可能希望直接提供静态 HTML 文件，而不是通过模板引擎来渲染。

假设你有一个名为 abc.html 的静态网页文件，你希望用户能够直接通过浏览器访问它。下面是如何配置你的 Node.js 应用程序以实现这一点。

过程和原理

  1. 创建项目结构： 首先，确保你的项目目录中包含一个 public 文件夹，并将 abc.html 放在这个文件夹中。

    myproject/
├── public/
│   └── abc.html
├── server.js
└── package.json

  2. 安装依赖： 创建一个新的 Node.js 项目并安装必要的依赖包。

    mkdir myproject
cd myproject
npm init -y

  3. 设置服务器： 编写一个简单的 Node.js 服务器脚本来处理 HTTP 请求，并提供静态文件。

    在 server.js 文件中，添加以下代码：

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

// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
    // 设置响应头
    res.writeHead(200, { 'Content-Type': 'text/html' });

    // 定义静态文件路径
    const filePath = path.join(__dirname, 'public', 'abc.html');

    // 读取文件并发送给客户端
    fs.readFile(filePath, (err, data) => {
        if (err) {
            res.writeHead(404);
            res.end('File not found.');
        } else {
            res.end(data);
        }
    });
});

// 监听端口
server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

  4. 运行服务器： 使用 node server.js 命令启动服务器。

    node server.js

  5. 访问静态网页： 打开浏览器并访问 http://localhost:3000/abc.html，你应该能够看到 abc.html 的内容。

解释

  • HTTP 服务器：我们使用 http.createServer() 方法创建了一个简单的 HTTP 服务器。
  • 文件路径：path.join() 方法用于构建文件路径，确保它可以正确地解析到 public 文件夹中的 abc.html。
  • 文件读取：fs.readFile() 方法用于从文件系统中读取文件内容。如果文件不存在，则返回 404 错误；否则，将文件内容发送回客户端。

通过这种方式，你可以直接提供静态 HTML 文件，而不需要使用模板引擎。这种方法简单且高效，适用于那些不需要动态生成内容的场景。


res.sendFile或者直接放到public下面

不是有静态插件吗

路由里面如何写

好吧，这个问题已经解决了 将静态页面放在public目录，直接通过完整路径在浏览器里面访问就ok了 多谢二位！！！

要实现直接访问静态HTML文件（例如abc.html），你可以使用Node.js内置的HTTP服务器模块来创建一个简单的Web服务器，并将请求重定向到对应的静态文件。

过程和原理

  1. 创建HTTP服务器：使用Node.js的内置模块http或https创建一个HTTP服务器。
  2. 处理请求：当接收到请求时，解析请求的URL路径，并根据路径返回对应的静态文件。
  3. 读取并发送文件：使用Node.js的内置模块fs（文件系统）读取请求的静态文件，并将其内容发送给客户端。

示例代码

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

// 创建HTTP服务器
const server = http.createServer((req, res) => {
    // 设置响应头，告诉浏览器这是一份html文件
    res.setHeader('Content-Type', 'text/html');
    
    // 解析请求的URL路径
    const filePath = path.join(__dirname, req.url);
    
    // 读取文件内容，并发送给客户端
    fs.readFile(filePath, (err, data) => {
        if (err) {
            console.error(err);
            res.writeHead(404);
            res.end('File not found');
        } else {
            res.end(data);
        }
    });
});

// 监听端口
server.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

说明

  • 这段代码创建了一个简单的HTTP服务器，监听3000端口。
  • 当接收到请求时，它会尝试读取与请求URL匹配的文件。
  • 如果文件存在，它将把文件内容发送回客户端；如果文件不存在，则返回404状态码。

注意事项

  • 此方法适用于开发环境或简单应用，不适合生产环境，因为对于每个请求都要进行文件读取操作。
  • 生产环境中，通常使用专门的Web服务器软件（如Nginx、Apache等）来处理静态文件。
  • 在实际部署时，还需要添加更多的错误处理逻辑，以及安全性考虑，比如检查文件路径以防止目录遍历攻击。
回到顶部