【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连接数据库,彻彻底底的前后端分离开发。

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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