koa koa-static 静态资源中间件
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 静态资源中间件的更多相关文章
- koa 基础（十二）koa-static 静态资源中间件 静态web服务
1.目录 2.app.js /** * koa-static 静态资源中间件 静态web服务 * 1.npm install --save koa-static * 2.const static = ...
- 3、KOA模板引擎+访问静态资料中间件
一.Koa模板引擎初识1.安装中间件 : npm i --save koa-views2.安装ejs模板引擎 :npm i --save ejs3.编写模板:<%= title %> 是调 ...
- Django-开放静态资源-获取请求携带的数据-pychram连接数据库-修改Django默认数据库-DjangoORM操作--表管理-记录管理-01
目录 关于静态资源访问 为什么要配置静态文件才能获取静态资源 常见的静态文件种类 如何配置来开启访问权限 禁用浏览器缓存 django的自动重启机制(热启动) 静态文件接口动态解析 向服务器发送数据 ...
- 关于linux下部署JavaWeb项目,nginx负责静态资源访问，tomcat负责处理动态请求的nginx配置
1.项目的运行环境 linux版本 [root@localhost ~]# cat /proc/version Linux version -.el6.x86_64 (mockbuild@x86-.b ...
- 聊聊、SpringBoot 静态资源访问
SpringBoot 1.X 版本和 SpringBoot 2.X 版本在静态资源访问上有一些区别,如果直接从 1.X 升级到 2.X 肯定是有问题的.这篇文章就来讲讲这方面问题,也是项目中的坑. 先 ...
- vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目
使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容 vue.config.js module.exports = { publicPath: './',//打包后的位置(如果不设置这 ...
- nodejs监听服务端口并且代理请求与静态资源
var express = require('express'); const proxy = require('http-proxy-middleware'); const app = expres ...
- SpringBoot整合WEB开发--（二）静态资源访问
1.默认策略: 静态资源的位置一共5个,开发者可以将静态资源放到其中任意一个,分别是: "classpath:/META-INF/resources/", "classp ...
- koa中静态文件资源中间件实现
项目实践过程中,会使用非常多的静态资源,怎样可以直接在浏览器中访问到这些静态资源 const fs = require('fs'); const path = require('path'); mod ...
随机推荐
- Java之路---Day01
2019-10-17-19:36:43 标识符: 标识符:是指在程序中,自己定义的内容.如:类名.方法名.变量名等 命名规则(硬性要求): 1.有英文字母(区分大小写).数字.$(美元符)._(下划线 ...
- head 与 tail
head head [-n] 数字『文件』 显示前面n行 例如 head -n 3 test 显示 test 文件的前 3 行,也可以写作 head -3 test 比较有趣的是 -n 后面的数字,可 ...
- iOS学习——NSLog输出各种类型
在开发过程中,在调试过程中经常打印不出自己想要的数据格式,还时常报警告,所以整理了一下iOS中用NSLog打印各种数据类型的样式.整型占位符说明 : %d : 十进制整数, 正数无符号, 负数有 “- ...
- idea之将Maven的jar包安装到本地仓库
1.问题概要 很多时候,我们需要应用第三方的jar包,但是这个jar包,在maven远程仓库里面没有, 比如我们要使用京东的sdk,但这个sdk在maven的远程仓库中没有,于是我们需要将这个jar包 ...
- Maven nexus 安装nexus : wrapper | OpenSCManager failed - 拒绝访问。 (0x5)
在win7中安装nexus时提示:wrapper | OpenSCManager failed - 拒绝访问. (0x5) 主要是没有权限.需要以管理员的身份运行 如果你是直接点击 start-nex ...
- 10 分钟上手 Vue 组件 Vue-Draggable
Vue 综合了 Angualr 和 React 的优点,因其易上手,轻量级,受到了广泛应用.成为了是时下火热的前端框架,吸引着越来越多的前端开发者! 本文将通过一个最简单的拖拽例子带领大家快速上手 V ...
- docker管理监控方案
docker相关管理可分为四类:docker基础功能.docker监控.docker集群管理和docker系统认证管理.docker管理的基础或信息来源都是docker命令行或docker API. ...
- Mariadb/MySQL生产环境的my.cnf配置示例
Mariadb/MySQL生产环境的my.cnf配置示例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.针对MySQL主程序mysqld定义参数[mysqld] 1>. ...
- 压缩及解压命令gzip、bzip2、tar
1. gzip 描述:压缩与解压缩 用法:gzip[选项]...[文件名称]... 选项:-d 解压 gzip hello.txt # 文件压缩后名为hello.txt.gz gzip -d ...
- Linux下安装Fiddler
1.首先,你要有个Mono环境,在Ubuntu环境下安装很简单,输入: sudo apt-get install mono-complete 2.下载一个最新的Fiddler for Mono版本,下 ...