之前的文章我们介绍了一下 koa post提交数据及 koa-bodyparser中间件,本篇文章我们来看一下 koa-static静态资源中间件。

我们在之前的目录想引入外部的 js,css,img 等静态资源该如何获取呢?我们首先先按照之前的思维按照相对路径去查找,如下图:

我们在 index.ejs 文件中按照相对路径分别引入了一个 style.css 文件和一个 img 图片,

app.js 代码如下:

 //引入 koa模块
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views'); //实例化
const app = new Koa();
const router = new Router(); //配置模板引擎中间件
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);

页面显示效果如下:

在控制台可以看出我们并没有成功引入两个文件。

我们通过看报错的 url 地址 http://localhost:3000/static/css/style.css 和 http://localhost:3000/static/img/1.jpg 可以看出,我们并没有在 app.js 中定义 /static 的路由地址,所以查不到,那我们就可以利用之前说过的中间件先引入这个路由就可以引入这些静态资源了。

我们需要用到一个 koa-static 模块,跟之前一样,先安装该模块

npm install koa-static --save

然后我们在 app.js 中看如何使用 koa-static 模块

 //引入 koa模块
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const static = require('koa-static'); //实例化
const app = new Koa();
const router = new Router(); //配置静态资源中间件
app.use(static(__dirname + "static"));
//配置模板引擎中间件
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);

在 app.js 中,我们先引入了 koa-static 模块,然后通过 app.use(static(__dirname + "/static"));来引入我们的静态资源,其中 __dirname 是我们当前目录绝对路径的意思,当然我们也可以写成 app.use(static("./static"))。

引入上面的中间件的意思是我们先去匹配 "static" 目录下的内容,然后再执行接下来的程序,这时我们将 index.ejs 文件改为如下:

如上图所示,我们将我们的引用路径直接改为 static 下的文件,运行结果如下:

样式和图片都引入了,说明成功。

koa2 从入门到进阶之路 (六)的更多相关文章

  1. koa2 从入门到进阶之路 (二)

    之前的文章我们已经能够在本地启动一个简单的项目,本章我们来看一下 koa 路由,get 传值,动态路由. 一.Koa 路由 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP ...

  2. koa2 从入门到进阶之路 (一)

    首先我们先来了解一下 Koa 是什么,https://koa.bootcss.com/,这是 Koa 的官方网站,映入眼帘的第一句就是 Koa -- 基于 Node.js 平台的下一代 web 开发框 ...

  3. koa2 从入门到进阶之路 (五)

    之前的文章我们介绍了一下 koa 中使用 ejs 模板及页面渲染,本篇文章我们来看一下 koa post提交数据及 koa-bodyparser中间件. 在前端页面中,不免会用到 form 表单和 p ...

  4. koa2 从入门到进阶之路 (四)

    之前的文章我们介绍了一下 koa 中间件 以及 koa 中间件的洋葱图执行流程,本篇文章我们来看一下 koa 中使用 ejs 模板及页面渲染. 在 Express 中,我们经常会用 ejs 模板来渲染 ...

  5. koa2 从入门到进阶之路 (三)

    之前的文章我们介绍了一下 koa 路由,get 传值,动态路由,本节我们看一下 koa 中间件 以及 koa 中间件的洋葱图执行流程. 一.什么是 Koa 的中间件 通俗的讲:中间件就是匹配路由之前或 ...

  6. koa2 从入门到进阶之路 (七)

    之前的文章我们介绍了一下 koa koa-static静态资源中间件,本篇文章我们来看一下 koa 中 cookie 和 session 的使用. cookie 是存储于访问者的计算机中的变量.可以让 ...

  7. React 从入门到进阶之路(六)

    之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 .双向数据绑定.接下来我们将介绍 React 表单详解 约束性和非约束性组件 inpu ...

  8. Python 爬虫从入门到进阶之路(六)

    在之前的文章中我们介绍了一下 opener 应用中的 ProxyHandler 处理器(代理设置),本篇文章我们再来看一下 opener 中的 Cookie 的使用. Cookie 是指某些网站服务器 ...

  9. Python 爬虫从入门到进阶之路(十六)

    之前的文章我们介绍了几种可以爬取网站信息的模块,并根据这些模块爬取了<糗事百科>的糗百内容,本章我们来看一下用于专门爬取网站信息的框架 Scrapy. Scrapy是用纯Python实现一 ...

随机推荐

  1. VMware中Bridged、NAT、host-only三种网络连接模式的原理及其区别

    VMnet0:这是VMware用于虚拟桥接网络下的虚拟交换机: VMnet1:这是VMware用于虚拟Host-Only网络下的虚拟交换机: VMnet8:这是VMware用于虚拟NAT网络下的虚拟交 ...

  2. jdk13-新特性预览

    一新特性 350: Dynamic CDS Archives(动态CDS档案) 351: ZGC: Uncommit Unused Memory(ZGC:取消提交未使用的内存) 353: Reimpl ...

  3. Android 上下文菜单 ActionMode

    public class MainActivity extends Activity { private Button button; private ActionMode actionMode; @ ...

  4. 初学Manjaro

    近期,看有朋友在使用Manjaro系统,感觉这个系统挺不错,于是我也安装了Manjaro,学习一下!!!! Manjaro下载地址:https://manjaro.org/download/ Manj ...

  5. 基于STM32的无损压缩算法miniLZO移植,压缩率很高,20KB随机数压缩到638字节,耗时275us

    说明: 1.miniLZO是采用C编写的无损压缩库. 2.提供了快速压缩和超快速解压缩能力. 3.比较耗内存,需要64KB内存用于压缩,对于H7这种大内存的,非常合适.或者有外置SRAM/SDRAM的 ...

  6. C语言笔记 04_运算符

    运算符 运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C 语言内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 算术运算符 ...

  7. Go 开发关键技术指南 | 为什么你要选择 GO?(内含超全知识大图)

    作者 | 杨成立(忘篱) 阿里巴巴高级技术专家 关注"阿里巴巴云原生"公众号,回复 Go 即可查看清晰知识大图! 导读:从问题本身出发,不局限于 Go 语言,探讨服务器中常常遇到的 ...

  8. C# -- 使用缓冲区进行文件下载操作

    C# -- 使用缓冲区进行文件下载操作 1. 为避免下载超大文件占用内存资源,文件下载使用缓冲区,一点一点读取文件资源. string str0 = @"ftp://localhost:21 ...

  9. JVM常用参数详解

     JVM整个堆大小=年轻代大小 + 年老代大小 + 持久代大小,在JDK1.8及之后的版本由于永久代被元空间替代,所以jdk1.8中的堆=年轻代大小 + 年老代大小.本文使用的是JDK1.8  1.堆 ...

  10. java 网站源码 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎

    前台: 支持四套模版, 可以在后台切换   系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以 ...