使用Node.js搭建静态资源服务详细教程

使用Node.js搭建静态资源服务是非常常见的需求，下面我将详细讲解搭建静态资源服务的完整攻略，并提供两条示例说明。

环境准备

在开始之前，确保你已经安装了Node.js和npm包管理工具，同时你需要创建一个空的目录做为工作目录。

安装依赖

在工作目录中执行以下命令，安装Express和serve-static两个依赖。

npm install express serve-static --save

创建服务器

在工作目录中创建一个名为server.js的文件，编写以下代码：

const express = require('express');
const serveStatic = require('serve-static');

const app = express();

app.use('/', serveStatic(__dirname));

const port = process.env.PORT || 8080;
app.listen(port);

console.log(`Static source server started on port ${port}...`);

代码解释：

第1行导入依赖的express和serve-static模块；
第3行创建一个express的应用实例；
第5行将静态资源目录指定为当前工作目录(__dirname)；
第7行定义服务监听的端口号，这里默认为8080；
第8行启动服务，并在控制台输出提示信息。

启动服务

在工作目录中执行以下命令，启动服务。

node server.js

在浏览器输入http://localhost:8080即可访问当前工作目录中的静态资源。

示例说明

示例一：使用Node.js搭建简单的博客系统

博客系统通常需要静态资源服务，我们可以使用Node.js来搭建一个简单的博客系统。

首先创建一个名为blog-server.js的文件，编写以下代码：

const express = require('express');
const serveStatic = require('serve-static');
const path = require('path');

const app = express();
const staticPath = path.join(__dirname, 'public');

app.use('/', serveStatic(staticPath));
app.get('/', (req, res) => {
  res.sendFile(path.join(staticPath, 'index.html'));
});
app.get('/post.html', (req, res) => {
  res.sendFile(path.join(staticPath, 'post.html'));
});

const port = process.env.PORT || 3000;
app.listen(port);

console.log(`Blog server started on port ${port}...`);

代码解释：

第1行导入依赖的express、serve-static和path模块；
第3-4行创建一个express的应用实例，同时将静态资源目录指定为当前目录下的public目录；
第6-7行配置请求静态资源时使用serve-static中间件；
第8-9行配置访问首页和文章页时的路由；
第11行定义服务监听的端口号，这里默认为3000；
第12行启动服务，并在控制台输出提示信息。

在当前目录下创建public目录，并在其中创建index.html和post.html两个文件，这里分别简单编写一下示例代码。

index.html文件内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>博客首页</title>
</head>
<body>
  <h1>欢迎来到我的博客首页！</h1>
  <p><a href="/post.html">阅读全文</a></p>
</body>
</html>

post.html文件内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>博客文章</title>
</head>
<body>
  <h1>我的第一篇博客文章</h1>
  <p>欢迎来访问我的新博客！</p>
</body>
</html>

最后在当前目录下执行以下命令，启动服务：

node blog-server.js

在浏览器输入http://localhost:3000即可访问博客首页，点击页面中的“阅读全文”链接即可访问文章页。

示例二：使用Node.js搭建简单的网盘系统

网盘系统通常需要静态资源服务，我们可以使用Node.js来搭建一个简单的网盘系统。

首先创建一个名为disk-server.js的文件，编写以下代码：

const express = require('express');
const serveStatic = require('serve-static');
const path = require('path');

const app = express();
const staticPath = path.join(__dirname, 'public');

app.use('/', serveStatic(staticPath));
app.get('/', (req, res) => {
  res.sendFile(path.join(staticPath, 'index.html'));
});

const port = process.env.PORT || 4000;
app.listen(port);

console.log(`Disk server started on port ${port}...`);

代码解释：

第1行导入依赖的express、serve-static和path模块；
第3-4行创建一个express的应用实例，同时将静态资源目录指定为当前目录下的public目录；
第6-7行配置请求静态资源时使用serve-static中间件；
第8-9行配置访问首页的路由；
第11行定义服务监听的端口号，这里默认为4000；
第12行启动服务，并在控制台输出提示信息。

在当前目录下创建public目录，并在其中创建以下子目录：

video：用于存放视频文件；
music：用于存放音乐文件；
doc：用于存放文档文件。

在public目录下创建index.html文件，内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网盘首页</title>
</head>
<body>
  <h1>欢迎来到我的网盘！</h1>
  <ul>
    <li><a href="/video">视频文件</a></li>
    <li><a href="/music">音乐文件</a></li>
    <li><a href="/doc">文档文件</a></li>
  </ul>
</body>
</html>

最后在当前目录下执行以下命令，启动服务：

node disk-server.js

在浏览器输入http://localhost:4000即可访问网盘首页，点击页面中的链接即可访问相应的文件夹。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用Node.js搭建静态资源服务详细教程 - Python技术站

使用Node.js搭建静态资源服务详细教程

环境准备

安装依赖

创建服务器

启动服务

示例说明

示例一：使用Node.js搭建简单的博客系统

示例二：使用Node.js搭建简单的网盘系统

相关文章