Node.js后端开发 - 进阶篇 #6 express框架之通过express模拟Apache实现静态资源托管服务

目录

一、前言

二、express模拟Apache实现静态资源托管服务

步骤1：建立静态资源文件夹仓库

步骤2：写入express关键代码

---完整详细可测试代码

---最终效果

---查看源码

---

一、前言

上篇文章我们讲到express框架中，通过正则表达式注册路由、通过req.params获取路由中的参数的一些内容，详细可参考博文：Node.js后端开发 - 进阶篇 #5 express框架之正则表达式注册路由、req.params获取路由中的参数 这篇文章我们将讲到通过express模拟Apache实现静态资源托管服务

二、express模拟Apache实现静态资源托管服务

步骤1：建立静态资源文件夹仓库

在Visual Studio Code开发工具中新建如下文件夹和文件，然后把电脑中的图片ndk.png拷贝放在public目录下

步骤2：写入express关键代码

在app.js文件中写入代码，如下：

//处理静态资源的方法。通过路径获取不同的资源文件
var fileDir = express.static(path.join(__dirname, 'public'));
//注册路由
app.use('/', fileDir);

以往注册路由，第二个参数都是回调函数，如果这样的话，我们就要自己读写资源，比较费劲。

而这里express给我们提供了static方法，通过路径获取不同的资源文件

---完整详细可测试代码

//模拟静态资源服务器 (Apache服务器)

//1、加载express模块
var express = require('express');
var path = require('path');

//2、创建app对象
var app = express();

//3、处理静态资源的方法。通过路径获取不同的资源文件
var fileDir = express.static(path.join(__dirname, 'public'));
//注意：express调用static，而不是app
//var fileDir = app.static(__dirname, 'public');

//4、注册路由
// 以往注册路由，第二个参数都是回调函数，如果这样的话，
// 我们就要自己读写资源，比较费劲。而这里express给我们提
// 供了static方法
app.use('/', fileDir);

// 并成一行，把处理静态资源的方法 直接放到 注册路由里面
//app.use('/', express.static(path.join(__dirname, 'public')));

//5、启动服务
app.listen(3000,function (params) {
    console.log('http://localhost:3000');
});

我们运行程序，如下

MacBook-Pro:express-apache luminal$ node app
http://localhost:3000

---最终效果

在我的谷歌浏览器中，输入地址：http://localhost:3000/ndk.png

我们直接访问到了public目录下的ndk.png文件

---查看源码

我们说一般一个函数调用toString方法，就可以看到它的源代码，我们  console.log(fileDir.toString());  输出来查看一下

function serveStatic (req, res, next) {
    if (req.method !== 'GET' && req.method !== 'HEAD') {
      if (fallthrough) {
        return next()
      }

      // method not allowed
      res.statusCode = 405
      res.setHeader('Allow', 'GET, HEAD')
      res.setHeader('Content-Length', '0')
      res.end()
      return
    }

    var forwardError = !fallthrough
    var originalUrl = parseUrl.original(req)
    var path = parseUrl(req).pathname

    // make sure redirect occurs at mount
    if (path === '/' && originalUrl.pathname.substr(-1) !== '/') {
      path = ''
    }

    // create send stream
    var stream = send(req, path, opts)

    // add directory handler
    stream.on('directory', onDirectory)

    // add headers listener
    if (setHeaders) {
      stream.on('headers', setHeaders)
    }

    // add file listener for fallthrough
    if (fallthrough) {
      stream.on('file', function onFile () {
        // once file is determined, always forward error
        forwardError = true
      })
    }

    // forward errors
    stream.on('error', function error (err) {
      if (forwardError || !(err.statusCode < 500)) {
        next(err)
        return
      }

      next()
    })

    // pipe
    stream.pipe(res)
  }

这里的源码 function serveStatic (req, res, next) 函数有三个参数，因为中间件一般都是三个参数，我们刚才上面写的都是两个，我们上面暂时是省略掉的，后面介绍中间件的时候再具体介绍