从Express开始学习node.js（二）

从Express开始学习node.js（二）静态资源

引言

在本专栏的上一篇文章从Express开始学习node.js（一）基础使用中，我们学习了如何用express启动一个node服务、如何使用postman来发送请求、如何处理传递JSON格式参数的post请求。

通过上一篇文章的学习，我们已经可以完成一些简单的需求了。但如果想要在实际工作中使用，我们还需要了解更多的内容。

本篇文章作为node.js系列的第二章节，主要内容有：

• 如何提供静态资源

• 如何使用多个静态资源

• 如何添加虚拟路径前缀

注：本章节所有的内容，都需要node.js环境，请确保自己已安装node环境

一、处理静态资源

静态资源是指图片、css文件、js文件、pdf文件等静态文件。

我们需要把这些静态资源存放在服务器中，从而在客户端发送请求时将对应的静态资源返回给客户端。

在express中，我们使用express.static来提供静态资源的处理方案。

1、存放静态资源

1. 我们在根目录下用命令行创建一个名为public的文件夹，然后进入到这个文件夹：

# 创建一个名为public的文件夹
mkdir public

# 进入到这个文件夹
cd public

1. 我们在public目录下创建images、pdfs文件夹，然后在对应文件夹下存放一些资源：

# 创建一个名为public的文件夹

mkdir images

mkdir pdfs

2、提供静态资源

express.static是一个express内置的中间件函数，用于提供静态文件。我们在index.js中使用这个中间件函数，即可提供public目录下的静态资源：

// index.js
app.use(express.static('public'));

3、访问静态资源

我们用postman请求public目录下的静态资源/images/001.jpg：

我们用postman请求public目录下的静态资源/pdfs/eight_grade.pdf：

可以发现，服务器端返回了我们所需要的资源。

4、使用多个静态资源

如果有多个静态资源的目录，则需要多次调用express.static中间件函数，Express会以您使用 express.static 中间件函数设置静态目录的顺序来查找文件。

// index.js
app.use(express.static('public'));
app.use(express.static('files'));

我们先后使用了public和files两个目录来提供静态资源，然后在/public/images目录下存放了一张名为001.jpg的图片，在/files/images目录下存放了一张名为001.jpg的图片、一张名为101.jpg的图片：

/public/images/001.jpg

/files/images/001.jpg

/files/images/101.jpg

我们用postman分别请求/images/001.jpg和/images/101.jpg：

可以发现：

• 对于/images/001.jpg请求，由于在public和files两个目录下都有该资源，但是我们在设置静态目录时，先设置了public目录，所以服务器返回的是/public/images/001.jpg。

• 对于/images/101.jpg请求，由于在public目录下没有该资源，所以继续寻找，在files目录中找到了该资源，所以服务器返回的是/files/images/101.jpg。

5、虚拟路径前缀

我们可以通过传入一个路径参数，来为静态资源添加虚拟路径前缀。

app.use('/static', express.static('public'));

这样，当我们访问这个虚拟路径前缀时，服务器就会在对应的静态资源目录中搜索该资源，最后返回给客户端。

我们用postman请求/static/images/001.jpg：

可以发现：对于/static/images/001.jpg请求，由于我们为静态资源添加了虚拟路径前缀/static，而该前缀对应的是public目录，所以服务器返回的是/public/images/001.jpg。

注：虚拟路径前缀也可以设置多个静态资源，其用法与普通路径设置静态资源完全一致。

// 设置多个静态资源的虚拟路径前缀
app.use('/static', express.static('public'));
app.use('/static', express.static('files'));

总结

在这一节，我们学习了如何提供静态资源、提供多个静态资源、设置虚拟路径前缀。接下来我们会继续介绍中间件、模板引擎、接入数据库等知识，让我们一起来领略编程的乐趣吧！

我是何以庆余年，如果文章对你起到了帮助，希望可以点个赞，谢谢！

如有问题，欢迎在留言区一起讨论。