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

以前的文章咱們介紹了一下 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 下的文件，運行結果以下：

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