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. 一个牛逼的 Python 调试工具PySnooper

    原文转自:https://mp.weixin.qq.com/s/OtLr-cNethboMgmCcUx2pA PySnooper 使用起来十分简单,开发者可以在任何庞大的代码库中使用它,而无需进行任何 ...

  2. Python进阶(一)----函数

    Python进阶(一)----函数初识 一丶函数的初识 什么函数: ​ 函数是以功能为导向.一个函数封装一个功能 函数的优点: ​ 1.减少代码的重复性, ​ 2.增强了代码的可读性 二丶函数的结构 ...

  3. Redis安装、主从配置及两种高可用集群搭建

    Redis安装.主从配置及两种高可用集群搭建 一.            准备 Kali Linux虚拟机 三台:192.168.154.129.192.168.154.130.192.168.154 ...

  4. 使用Prometheus监控Linux系统各项指标

    首先在Linux系统上安装一个探测器node explorer, 下载地址https://prometheus.io/docs/guides/node-exporter/ 这个探测器会定期将linux ...

  5. 通过公网ip访问虚拟机web服务

    工作中有需要进行通过外网ip访问虚拟机上的web服务,通过查阅资料,将配置过程整理如下: 思路:通过路由器的端口映射访问虚拟机上的web服务 1. 前提是在虚拟机上的web服务已经部署好,并且可以通过 ...

  6. 【DATAGUARD】物理dg配置客户端无缝切换 (八.4)--ora-16652 和 ora-16603错误

    [DATAGUARD]物理dg配置客户端无缝切换 (八.4)--ora-16652 和 ora-16603错误 一.1  BLOG文档结构图       一.2  前言部分   一.2.1  导读 各 ...

  7. 【书评:Oracle查询优化改写】第五至十三章

    [书评:Oracle查询优化改写]第五至十三章 一.1  BLOG文档结构图 一.2  前言部分 一.2.1  导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知 ...

  8. 23.centos7基础学习与积累-009-linux目录

    从头开始积累centos7系统运用 大牛博客:https://blog.51cto.com/yangrong/p5 linux目录的特点: 1. /是所有目录的顶点. 2. 目录结构像一颗倒挂的树. ...

  9. struct并不报错

    struct { int item; struct list* next; }list; 如果结构体定义如上,使用下面的代码,将会报错 //添加元素,由于我们实现的是单向链表,所以使用从尾部添加 bo ...

  10. Mysql InnoDB行锁不使用索引锁表的时候会锁整张表

    原文:http://www.thinkphp.cn/topic/41577.html 如果使用针对InnoDB的表使用行锁,被锁定字段不是主键,也没有针对它建立索引的话.行锁锁定的也是整张表.锁整张表 ...