用Nodejs搭建服务器访问html、css、JS等静态资源文件

下面是用Nodejs搭建服务器访问静态资源文件的完整攻略。

1. 安装Node.js

首先，你需要安装Node.js。可以从Node.js官网下载。安装完成后，可在命令行输入以下命令验证是否安装成功：

node -v

2. 创建项目文件夹及文件

在任意目录下创建一个文件夹作为项目文件夹，我们在此文件夹内创建以下文件：index.html和app.js。

- projectFolder
  - index.html
  - app.js

3. 编写HTML、CSS、JS文件

为了方便演示，我们在index.html中添加一个简单的Hello World信息。在app.js中添加console.log('Hello World!')。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Node.js Static File Server</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

app.js

console.log('Hello World!');

4. 创建Http Server

我们需要创建一个HTTP server来提供文件。在项目文件夹内创建一个名为server.js的文件，并添加以下代码：

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

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {

  console.log(`Request for ${req.url} received`);

  let filePath = '.' + req.url;

  if (filePath === './') {
    filePath = './index.html';
  }

  const extname = path.extname(filePath);
  let contentType = 'text/html';
  switch (extname) {
    case '.js':
      contentType = 'text/javascript';
      break;
    case '.css':
      contentType = 'text/css';
      break;
    case '.json':
      contentType = 'application/json';
      break;
    case '.png':
      contentType = 'image/png';
      break;      
    case '.jpg':
      contentType = 'image/jpg';
      break;
    case '.wav':
      contentType = 'audio/wav';
      break;
  }

  fs.readFile(filePath, (err, content) => {
    if (err) {
      if (err.code === 'ENOENT') {
        res.writeHead(404);
        res.end('File not found');
      } else {
        res.writeHead(500);
        res.end(`Sorry, check with the site admin for error: ${err.code}`);
      }
    } else {
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(content, 'utf-8');
    }
  });

});

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

在上面的代码中，我们使用Node.js内置的http模块创建了一个HTTP服务器，并设置监听127.0.0.1:3000这个地址和端口。当访问Localhost:3000时，服务器将根据请求的URL读取文件并返回它们，同时浏览器将解析并呈现HTML、CSS和JavaScript代码。

在此示例中，我们在HTTP服务器中使用文件系统模块读取文件并将其传递给响应。我们还使用了path模块解析文件名的扩展名并设置Content-Type，以便浏览器可以正确解析它们。

5. 运行服务器

接下来，我们使用Node.js运行server.js文件来启动服务器。打开终端或命令行，导航到项目文件夹内，并运行以下命令：

node server.js

如果一切正常，你应该会看到类似下面的日志信息：

Server running at http://127.0.0.1:3000/

6. 访问静态资源文件

如果一切正常，现在你可以通过浏览器访问Localhost:3000，并查看index.html文件中的Hello World信息。

如果你之前已经创建过CSS、JS等静态资源文件，你可以通过浏览器访问Localhost:3000/css/style.css、Localhost:3000/js/app.js等URL来访问它们。

示例说明

下面提供两个示例说明。

示例一

在第一个示例中，我们在项目文件夹内创建以下文件：

- projectFolder
  - index.html
  - css
    - style.css
  - js
    - app.js

在index.html中，我们添加了一个link标签引入style.css和一个script标签引入app.js。

在style.css中，我们添加了一个简单的样式。

在app.js中，我们添加了一个控制台日志输出。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Node.js Static File Server</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/app.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

app.js

console.log('Hello World!');

style.css

h1 {
    color: blue;
}

运行server.js之后，在浏览器中访问Localhost:3000，你应该可以看到Hello World的蓝色标题。

示例二

在第二个示例中，我们创建了以下文件：

- projectFolder
  - index.html

在index.html中，我们使用style标签来添加CSS样式。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Node.js Static File Server</title>
    <style>
        h1 {
            color: red;
        }
    </style>
    <script>
        console.log('Hello World!');
    </script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

运行server.js，然后在浏览器中访问Localhost:3000，你应该可以看到Hello World的红色标题和控制台中输出的Hello World日志信息。

以上是用Node.js搭建服务器访问静态资源文件的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：用Nodejs搭建服务器访问html、css、JS等静态资源文件 - Python技术站

用Nodejs搭建服务器访问html、css、JS等静态资源文件

1. 安装Node.js

2. 创建项目文件夹及文件

3. 编写HTML、CSS、JS文件

4. 创建Http Server

5. 运行服务器

6. 访问静态资源文件

示例说明

示例一

示例二

相关文章