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

豐寸發表於2019-05-31

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

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

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

app.js 程式碼如下：

 1 //引入 koa模組
 2 const Koa = require('koa');
 3 const Router = require('koa-router');
 4 const views = require('koa-views');
 5 
 6 //例項化
 7 const app = new Koa();
 8 const router = new Router();
 9 
10 //配置模板引擎中介軟體
11 app.use(views('views', {
12     extension: 'ejs'
13 }));
14 
15 router.get('/', async (ctx) => {
16     await ctx.render('index', {});
17 });
18 
19 //啟動路由
20 app.use(router.routes());
21 app.use(router.allowedMethods());
22 
23 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 模組

 1 //引入 koa模組
 2 const Koa = require('koa');
 3 const Router = require('koa-router');
 4 const views = require('koa-views');
 5 const static = require('koa-static');
 6 
 7 //例項化
 8 const app = new Koa();
 9 const router = new Router();
10 
11 //配置靜態資源中介軟體
12 app.use(static(__dirname + "static"));
13 //配置模板引擎中介軟體
14 app.use(views('views', {
15     extension: 'ejs'
16 }));
17 
18 router.get('/', async (ctx) => {
19     await ctx.render('index', {});
20 });
21 
22 //啟動路由
23 app.use(router.routes());
24 app.use(router.allowedMethods());
25 
26 app.listen(3000);

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

引入上面的中介軟體的意思是我們先去匹配 "static" 目錄下的內容，然後再執行接下來的程式，這時我們將 index.ejs 檔案改為如下：

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

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

 

相關文章