koa2 从入门到进阶之路 (六)
之前的文章我们介绍了一下 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 从入门到进阶之路 (六)的更多相关文章
- koa2 从入门到进阶之路 (二)
之前的文章我们已经能够在本地启动一个简单的项目,本章我们来看一下 koa 路由,get 传值,动态路由. 一.Koa 路由 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP ...
- koa2 从入门到进阶之路 (一)
首先我们先来了解一下 Koa 是什么,https://koa.bootcss.com/,这是 Koa 的官方网站,映入眼帘的第一句就是 Koa -- 基于 Node.js 平台的下一代 web 开发框 ...
- koa2 从入门到进阶之路 (五)
之前的文章我们介绍了一下 koa 中使用 ejs 模板及页面渲染,本篇文章我们来看一下 koa post提交数据及 koa-bodyparser中间件. 在前端页面中,不免会用到 form 表单和 p ...
- koa2 从入门到进阶之路 (四)
之前的文章我们介绍了一下 koa 中间件 以及 koa 中间件的洋葱图执行流程,本篇文章我们来看一下 koa 中使用 ejs 模板及页面渲染. 在 Express 中,我们经常会用 ejs 模板来渲染 ...
- koa2 从入门到进阶之路 (三)
之前的文章我们介绍了一下 koa 路由,get 传值,动态路由,本节我们看一下 koa 中间件 以及 koa 中间件的洋葱图执行流程. 一.什么是 Koa 的中间件 通俗的讲:中间件就是匹配路由之前或 ...
- koa2 从入门到进阶之路 (七)
之前的文章我们介绍了一下 koa koa-static静态资源中间件,本篇文章我们来看一下 koa 中 cookie 和 session 的使用. cookie 是存储于访问者的计算机中的变量.可以让 ...
- React 从入门到进阶之路(六)
之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 .双向数据绑定.接下来我们将介绍 React 表单详解 约束性和非约束性组件 inpu ...
- Python 爬虫从入门到进阶之路(六)
在之前的文章中我们介绍了一下 opener 应用中的 ProxyHandler 处理器(代理设置),本篇文章我们再来看一下 opener 中的 Cookie 的使用. Cookie 是指某些网站服务器 ...
- Python 爬虫从入门到进阶之路(十六)
之前的文章我们介绍了几种可以爬取网站信息的模块,并根据这些模块爬取了<糗事百科>的糗百内容,本章我们来看一下用于专门爬取网站信息的框架 Scrapy. Scrapy是用纯Python实现一 ...
随机推荐
- eps-07s,编译及其烧写
项目导入 清理并编译 会出现两个bin文件,然后烧写 修改红框中的东西,然后返回操作界面,进行一键烧写 硬件接线图 设备调试
- HPS端的GPIO如何控制
该笔记主要记录HPS端的GPIO如何控制,包括控制LED和Key 1.GPIO地址映射 Peripheral Base Address 0xf000_0000 64M 2.HPS外设 (1)GPIO ...
- ASP.NET Core知多少(13):路由重写及重定向
背景 在做微信公众号的改版工作,之前的业务逻辑全塞在一个控制器中,现需要将其按厂家拆分,但要求入口不变. 拆分很简单,定义控制器基类,添加公用虚方法并实现,各个厂家按需重载. 但如何根据统一的入口参数 ...
- maven 利用 profile 进行多环境配置
我们在进行项目的多环境配置时,有很多种方式供我们选择,比如 SpringBoot 自带的 application-dev.yml.maven 的 profile 等.这里介绍的就是如何利用 profi ...
- 基于C# WPF框架的贪吃蛇
游戏开始界面 游戏开始 共有两条蛇,吃到红色食物加1分,吃到绿色毒食物减1分,知道0不减: 碰到墙壁游戏结束,碰到对方游戏结束,碰到自己游戏结束 此游戏通过Canvas画布布局,通过C#代码实现 游戏 ...
- Python面向对象-访问权限public和private
上一节我们介绍了,Class内部可以有属性和方法,外部代码通过直接调用实例的方法来操作数据,这样就可以隐藏内部的逻辑实现:同时,外部代码还是可以自由的修改实例的属性和增加方法. 但是有时候,我们不想这 ...
- centos基本信息和ssh
CentOs系统基本配置,包括修改主机名,创建用户并授权,ssh免密登录 1 永久修改主机名 sudo vim /etc/hostname 把原主机名xxx改为master(在从主机上则改为相应的sl ...
- 可编程实验板EPM1270T144C5蜂鸣器音调频率选择
always@(tone) begin case(tone) 'd1 : time_end=10'd1911 ;//L1 'd2 : time_end=10'd1702 ;//L2 'd3 : tim ...
- Leetcode题解 - 链表简单部分题目代码+思路(21、83、203、206、24、19、876)
- vue中Enter触发登录事件和javascript中Enter触发点击事件
created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } 在methods中当keyC ...