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);

重启服务后，再运行能够看到b.png图片也请求回来了

koa-static中间件的实现

判断请求的文件是否存在，若是存在读取文件返回

若是请求的文件不存在，则默认查看当前文件夹下是否有指定的静态资源，若是存在返回当前文件夹下的指定的静态资源

根据上面的思想，因此实现简单版的static,能够将static单独存在一个js文件按中，而后require进来，这样使用和koa同样：