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

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