nodejs系列:26.koa之koa-static中间件

292 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第30天,点击查看活动详情

系列介绍

该系列主要是介绍一些nodejs相关的基础知识,没有什么特别难的知识点,都是一些比较基础知识点。大家学习起来,也会比较容易理解和接收。

这些知识点,也是以前自己学习nodejs的时候,学习过的知识点。有些知识点,可能是由于学习的时间比较久了,也有可能是平时工作中用到的机会比较少,也差不多快把它们都忘记掉了。现在把它们都写下来,写成文章,一方面是记录下自己以前学习的nodejs知识点,一方面也是复习巩固自己以前学习的nodejs知识点。不要学着学着,就把以前的知识点都忘光了。

环境安装

实现之前,你首先需要安装nodejs环境。因为我们写的代码需要在node环境上运行,如果你没有,那么文件会运行不了。

以下是nodejs的安装地址,如果你没有安装的话,可以先把它安装上。安装了可以忽略这一步,跳到下面一步。

nodejs安装

前言

在上一篇文章里nodejs系列:23.koa 中间件,介绍了koa里的中间件是什么。

在koa框架里,中间件的本质是一个回调函数,参数包含请求对象、响应对象和执行下一个中间件的函数

中间件是什么已经介绍了,在接下来的几篇文章里,介绍一下koa里常用到的一些中间件。

本篇文章,就介绍一下koa常用中间件:koa-static中间件

koa-static

平时我们发送网络请求的时候,会向服务器请求一些静态资源。静态资源是指html、js、css、jpg、png等。服务器从文件系统里读取这些静态资源文件,然后通过响应请求返回给到我们客户端。

而koa-static,就是对应这些静态资源的请求中间件。该中间件只是用来读取文件,所以单独做成一个中间件抽离出来。原生koa2也可以实现,但是相对来说会比较麻烦,而使用中间件就会十分方便。

使用

准备静态资源文件

你可以准备一些静态资源文件,html、js、css、jpg、png等资源文件都可以。后面请求静态资源文件时,会使用这些资源文件。

这里,我从网上找了3张图片。给它们命名为beijing1beijing2beijing3。你也可以命名为其它名字。

创建一个文件夹,命名为static,里面再创建一个文件夹image,上面3张图片就放在image文件夹里。

引入Koa
const koa = require("koa")
创建koa实例对象

const app = new koa()
安装koa-static

npm install koa-static
引入koa-static

const static = require("koa-static")
引入path模块

const path = require("path")

引入path模块,后面拼接路径使用

使用中间件

app.use(static(path.join(__dirname, "./static")))

path.join方法第二个参数为你的静态资源所在的文件夹

启动服务器

app.listen(3000, () => {
    console.log("服务器启动了")
})

在cmd里,用node运行index.js文件,启动服务器。

到浏览器里,访问静态资源,先访问beijing1

0001.png

beijing1这张图片我们可以访问到了,试下beijing2图片

0002.png

beijing2图片也可以访问到,试下beijing3图片

0003.png

beijing3图片也可以访问到

小结

本篇文章主要介绍了koa-static中间件,该中间件是静态资源中间件。

我们要想发送网络请求,从服务器请求静态资源,可以利用koa-static这一中间件来完成。使用该中间件,访问静态资源变得十分简单方便。

最后,放上自己比较喜欢的一句诗句:

千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》