之前的文章我们介绍了一下 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. 关于HPS和FPGA之间的桥接学习笔记一

    为了实现FPGA和HPS之间的存储器共享和数据传输,Altera SoC FPGA提供了两种方式用于FPGA和HPS通信.分别是FPGA to SDRAM和AXI bridge. FPGA to SD ...

  2. HA: ISRO Vulnhub Walkthrough

    下载地址: https://www.vulnhub.com/entry/ha-isro,376/ 主机扫描: ╰─ nmap -p- -sV -oA scan 10.10.202.131Startin ...

  3. Linux中防火墙命令

    #启动   systemctl start firewalld #开机启动   systemctl enable firewalld #停止   systemctl stop firewalld #禁 ...

  4. 阿里云esc 安装 mysql8.0

    打开 连接工具,我用的是 MobaXterm_Personal_12.1 (官网下载地址:https://moba.en.softonic.com/) 连接到 ecs,然后移除 默认的 mariadb ...

  5. VMware 虚拟机黑屏问题

    VMware Workstation 14打开虚拟机黑屏解决方法 听语音 浏览:0 | 更新:2017-11-21 16:56 | 标签:操作系统 虚拟机 VMWARE 1 2 3 4 分步阅读 最近 ...

  6. 面试连环炮系列(二):你们的项目Redis做了集群部署吗

    你们的项目Redis做了集群部署吗? 我们有大量数据需要缓存,而单实例的容量毕竟是有限的,于是做了Redis集群部署. 采取的方案是什么,Codis还是Redis Cluster,为什么要选择这个方案 ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 2D变换2

    3  scale() 方法 通过scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数.缩放scale()函数让元素根据中心原点对对象进行缩放.默认值是1,因此0.01 ...

  8. Ajax简单应用之个人简历页面搭建

    1.搭建HTTP静态Web服务器. 代码实现: # 1.导入socket模块 import socket import threading # 创建服务器类 class HttpServerSocke ...

  9. DataGridView使用自定义控件实现简单分页功能

    本例子使用自定义控件方法实现,数据库使用的是SQL Server,实现过程如下: 1.新建一个自定义控件,命名为:PageControl. 2.PageControl代码如下: public part ...

  10. python3读取图像并可视化的方法(PIL/Pillow、opencv/cv2)

    原图: 使用TensorFlow做图像处理的时候,会对图像进行一些可视化的操作.下面,就来列举一些我知道的图像读取并可视化的方法. 1. Pillow模块 1.1 Pillow模块的前生 Pillow ...