koa2 從入門到進階之路 （六）

之前的文章我們介紹了一下 koa post提交數據及 koa-bodyparser中間件，本篇文章我們來看一下 koa-static靜態資源中間件。

 我們在之前的目錄想引入外部的 js，css，img 等靜態資源該如何獲取呢？我們首先先按照之前的思維按照相對路徑去查找，如下圖：

我們在 index.ejs 文件中按照相對路徑分別引入了一個 style.css 文件和一個 img 圖片，

app.js 代碼如下：

//引入 koa模塊
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');

//實例化
const app = new Koa();
const router = new Router();

//配置模板引擎中間件
app.use(views('views', {
    extension: 'ejs'
}));

router.get('/', async (ctx) => {
    await ctx.render('index', {});
});

//啟動路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

頁面顯示效果如下：

在控制台可以看出我們並沒有成功引入兩個文件。

我們通過看報錯的 url 地址 http://localhost:3000/static/css/style.css 和 http://localhost:3000/static/img/1.jpg 可以看出，我們並沒有在 app.js 中定義 /static 的路由地址，所以查不到，那我們就可以利用之前說過的中間件先引入這個路由就可以引入這些靜態資源了。

我們需要用到一個 koa-static 模塊，跟之前一樣，先安裝該模塊

npm install koa-static --save

然后我們在 app.js 中看如何使用 koa-static 模塊

//引入 koa模塊
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const static = require('koa-static');

//實例化
const app = new Koa();
const router = new Router();

//配置靜態資源中間件
app.use(static(__dirname + "static"));
//配置模板引擎中間件
app.use(views('views', {
    extension: 'ejs'
}));

router.get('/', async (ctx) => {
    await ctx.render('index', {});
});

//啟動路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

在 app.js 中，我們先引入了 koa-static 模塊，然后通過 app.use(static(__dirname + "/static"))；來引入我們的靜態資源，其中 __dirname 是我們當前目錄絕對路徑的意思，當然我們也可以寫成 app.use(static("./static"))。

引入上面的中間件的意思是我們先去匹配 "static" 目錄下的內容，然后再執行接下來的程序，這時我們將 index.ejs 文件改為如下：

如上圖所示，我們將我們的引用路徑直接改為 static 下的文件，運行結果如下：

樣式和圖片都引入了，說明成功。