【js全栈】-koa2-静态资源管理 koa-static

总有一天,你所承受过的痛苦会有助于你。

宁愿做一朵篱下的野花,不愿做一朵受恩惠的蔷薇。与其逢迎献媚,偷取别人的欢心,毋宁被众人所鄙弃 ---《无事烦恼》

前言:js全栈目录
基于node.js平台的下一代web框架 koa官网

在之前,我们了解了安装,路由,今天讲静态资源管理,下午讲连接数据库,然后koa2的入门就学习完成了。后面的知识带入到实际的开发中学习。

再复述一遍后端的的工作。提供json给前端(网页和app),来渲染出页面供用户浏览。接收前端发来的操作行为,再返回相对的json。

后端工作的时候,我们考虑更多的就是数据,存储,读取,加工(查询,修改,合并)。当明白整个后端的体系时候,不管是java,还是python我们都能很好的掌握,这里从js开始,因为足够的简单容易上手。这便是我的学习之路。

场景,在后端的项目中,我们吧koa2部署在服务器上,用户访问,请求数据,还有网页。网页存储在服务器,就是静态资源的形式存在的。熟悉vue,react的同学,知道在webpack打包后的项目是什么样的,单页面应用。这些的好处就是请求次数会小很多。
koa2提供了静态资源插件:koa-static
这篇文章超级简单

  • 安装koa-static

编辑器命令行里键入

npm install koa-static -s
  • 新建静态资源文件夹,static。
静态资源文件

-app.js中启动插件
记得添加路径管理 path,第五行

const Koa = require('koa')   //koa2中间件依赖
const app = new Koa()       //js的继承
const Router = require('koa-router')  //路由依赖的中间间
const static = require('koa-static')   //静态资源服务插件
const path = require('path')           //路径管理
const bodyParser = require('koa-bodyparser')  //请求体,返回体解析类似json,text,图片等
// app.use( async ( ctx ) => {
//     ctx.body = 'hello world'
// })                           //koa2中间件,使用路由的(使用路由后,这里就不会在编辑代码了)

app.use(bodyParser())    //使用解析上下文插件

// 配置静态资源
const staticPath = './static'
app.use(static(
    path.join( __dirname, staticPath)
))

app.use(require('./router/index').routes())

app.listen(3000)            //服务启动端口
console.log('启动成功')      //日志打印
  • 测试服务

在文件中,添加一张图片看看,图片名img1,png格式


koas目录

浏览器打开图片

浏览器

当然static可以给你存放很多的内容, 例如html,css,js,文件,app。

总结: 静态资源管理,是很重要的一环。前端项目代码都存放在这里。

关注我,下一章 koa2连接数据库,彻彻底底的前后端分离开发。

我爱你,就像星星爱着月亮。感谢你们的点赞与关注

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25 707
  • 框架提出的背景 ES6/7带来的变革 自ES6确定和ES7中async/await开始普及,Node的发展变得更加...
    宫若石阅读 8,477评论 1 14
  • 德国 ——新天鹅堡 路德维希倾其举国之力修建的新天鹅堡在冰雪的笼罩下感觉像是被冰雪王后施了魔法,用来...
    凌云大侠阅读 245评论 0 2
  • 看过川端康成的《雪国》后,带给我的更多是震撼。在故事中,人设很简单。只三人,岛村,叶子,驹子。故事虽然少了些...
    ziffy阅读 1,114评论 3 6
  • 这周的目标任务: 1.结束高数上册 2.英语list8-10 3.看完解忧杂货店。
    追咪阅读 138评论 3 0