koa koa-static 靜態資源中間件

時間 2019-11-10

原文原文鏈接

koa-static介紹css

在網絡請求中，請求每每分紅兩種類型，一種是靜態資源，直接從服務器的文件存儲中讀取，一種是動態資源，通常須要先從數據庫獲取數據，而後通過必定的處理，最後返回給客戶端。html

koa-static是靜態資源請求中間件，靜態資源例如html、js、css、jpg、png等等，不涉及其餘的處理過程，只是單純的讀取文件，因此單獨抽離出來。原生koa2也能夠實現，可是比較麻煩，使用中間件十分方便。node

koa-static的使用web

首先咱們建立一個簡單的node應用，初始化app.js和一個ejs模板index.ejs數據庫

var Koa=require('koa')
var router = require('koa-router')()
var views = require('koa-views')

var app=new Koa();
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);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet"  href="../static/css/index.css">
</head>
<body>
    <p class="text">這是一個段落</p>
    <img src="../static/images/a.png">
</body>
</html>

項目中有個文件夾static，裏面有images和css兩個文件夾，分別存放css樣式文件和圖片這樣的靜態資源npm

當咱們啓動node服務,瀏覽器運行後發現，index.ejs中引入的靜態資源文件找不到，圖片請求404，樣式文件也沒生效瀏覽器

這時候咱們要使用koa-static中間件來託管咱們的靜態資源，首先安裝koa-static服務器

npm install  koa-static --save

而後再app.js中引入，而且配置這個中間件網絡

var Koa=require('koa')
var router = require('koa-router')()
var views = require('koa-views')
const static = require('koa-static')

var app=new Koa();
app.use(views('views',{
  extension:'ejs'
}))

//配置靜態web服務的中間件
//app.use(static('./static'));
app.use(static(__dirname+'/static')); // __dirname是當前文件夾

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

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);

而後再ejs中不用再../static去查找靜態資源app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet"  href="css/index.css">
</head>
<body>
    <p class="text">這是一個段落</p>
    <img src="images/a.png">
</body>
</html>

重啓node服務後，能夠看到咱們的靜態資源請求回來了

koa-static還能夠配置多個靜態資源路勁，項目中再建立一個assert/images，裏面放一個b.png，而後再index.ejs中引入這個圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet"  href="css/index.css">
</head>
<body>
    <p class="text">這是一個段落</p>
    <img src="images/a.png">
    <img src="images/b.png">
</body>
</html>

而且使用koa-static配置這個路勁

var Koa=require('koa')
var router = require('koa-router')()
var views = require('koa-views')
const static = require('koa-static')

var app=new Koa();
app.use(views('views',{
  extension:'ejs'
}))

//配置靜態web服務的中間件
//app.use(static('./static'));
app.use(static(__dirname+'/static')); // __dirname是當前文件夾
app.use(static(__dirname+'/assert'));   //koa靜態資源中間件能夠配置多個

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

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);