koa-static介绍

在网络请求中，请求往往分成两种类型，一种是静态资源，直接从服务器的文件存储中读取，一种是动态资源，一般需要先从数据库获取数据，然后经过一定的处理，最后返回给客户端。

koa-static是静态资源请求中间件，静态资源例如html、js、css、jpg、png等等，不涉及其他的处理过程，只是单纯的读取文件，所以单独抽离出来。原生koa2也可以实现，但是比较麻烦，使用中间件十分方便。

koa-static的使用

首先我们创建一个简单的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样式文件和图片这样的静态资源

当我们启动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去查找静态资源

<!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="data: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="data:images/a.png">

    <img src="data: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一样：

koa koa-static 静态资源中间件的更多相关文章

  1. koa 基础（十二）koa-static 静态资源中间件 静态web服务

    1.目录 2.app.js /** * koa-static 静态资源中间件 静态web服务 * 1.npm install --save koa-static * 2.const static = ...

  2. 3、KOA模板引擎+访问静态资料中间件

    一.Koa模板引擎初识1.安装中间件 : npm i --save koa-views2.安装ejs模板引擎 :npm i --save ejs3.编写模板:<%= title %> 是调 ...

  3. Django-开放静态资源-获取请求携带的数据-pychram连接数据库-修改Django默认数据库-DjangoORM操作--表管理-记录管理-01

    目录 关于静态资源访问 为什么要配置静态文件才能获取静态资源 常见的静态文件种类 如何配置来开启访问权限 禁用浏览器缓存 django的自动重启机制(热启动) 静态文件接口动态解析 向服务器发送数据 ...

  4. 关于linux下部署JavaWeb项目,nginx负责静态资源访问，tomcat负责处理动态请求的nginx配置

    1.项目的运行环境 linux版本 [root@localhost ~]# cat /proc/version Linux version -.el6.x86_64 (mockbuild@x86-.b ...

  5. 聊聊、SpringBoot 静态资源访问

    SpringBoot 1.X 版本和 SpringBoot 2.X 版本在静态资源访问上有一些区别,如果直接从 1.X 升级到 2.X 肯定是有问题的.这篇文章就来讲讲这方面问题,也是项目中的坑. 先 ...

  6. vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目

    使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容 vue.config.js module.exports = { publicPath: './',//打包后的位置(如果不设置这 ...

  7. nodejs监听服务端口并且代理请求与静态资源

    var express = require('express'); const proxy = require('http-proxy-middleware'); const app = expres ...

  8. SpringBoot整合WEB开发--（二）静态资源访问

    1.默认策略: 静态资源的位置一共5个,开发者可以将静态资源放到其中任意一个,分别是: "classpath:/META-INF/resources/", "classp ...

  9. koa中静态文件资源中间件实现

    项目实践过程中,会使用非常多的静态资源,怎样可以直接在浏览器中访问到这些静态资源 const fs = require('fs'); const path = require('path'); mod ...

随机推荐

  1. k8s--scope.yaml

  2. C++ Primer Plus(第6版)习题(第二章)

    1..编写一个C++程序,它显示您的姓名和地址. #include<iostream> using namespace std; int main() { string name,addr ...

  3. JavaScript变量存储浅析（一）

    Hello! 上一篇关于JS中函数传参(http://www.cnblogs.com/souvenir/p/4969092.html)的介绍中提到了JS的另外一个基本概念:JS变量存储, 今天我们就用 ...

  4. 【故障处理】分布式事务ORA-01591错误解决

    [故障处理]分布式事务ORA-01591错误解决 1  BLOG文档结构图       2  前言部分 2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你 ...

  5. sql server快捷键添加

    工具--选项--键盘 sp_table_column_info p_helpindex sp_sql

  6. php与mysql交互 面向过程

    1.建立.关闭与MySQL服务器的连接 1)连接指定的mysql服务器 $mysqli_connect=@mysqli_connect($host, $user, $password,$databas ...

  7. Linux操作系统-CentOS6启动流程和服务管理

    Linux操作系统-CentOS6启动流程和服务管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Linux组成 1>.Linux: kernel+rootfs ker ...

  8. 助教总结---继alpha版本1之后

    本周心得: 在项目的开发当中,学生难免会有懈怠的时候,作为助教更应该去督促和激励同学们,但本质上该对自己负责任的是同学们自己.同学们项目的第一版本已经出来了,这个过程他们自己知道付出了多少,相信他们体 ...

  9. PHP-FPM的知识点

    https://blog.csdn.net/resilient/article/details/82420863 这个URL,将php的各种模式与知识点说清楚了. 因为php-fpm默认编译进了php ...

  10. Kotlin反射重要组件与流程详解

    继续学习Kotlin反射,我们知道对于Java的反射类是Class,而在Kotlin中的反射类是KClass,而在Java当中对于反射中的方法是用Method,而在Kotlin中是用KFunction ...