【js全棧】-koa2-靜態資源管理 koa-static

來自專欄 js全棧工程師2 人贊了文章

寧願做一朵籬下的野花，不願做一朵受恩惠的薔薇。與其逢迎獻媚，偷取別人的歡心，毋寧被眾人所鄙棄 ---《無事煩惱》

代碼地址：github

書接上回：

koa2路由管理，在之前，我們了解了安裝，路由，今天講靜態資源管理，下午講連接資料庫，然後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 = ./staticapp.use(static( path.join( __dirname, staticPath)))app.use(require(./router/index).routes())app.listen(3000) //服務啟動埠console.log(啟動成功) //日誌列印

測試服務

在文件中，添加一張圖片看看，圖片名img1，png格式

瀏覽器打開, 查看 圖片 ：

當然static可以給你存放很多的內容， 例如html，css，js，文件，app。

總結： 靜態資源管理，是很重要的一環。前端項目代碼都存放在這裡。

關注我，下一章koa2-資料庫連接，觸摸到數據，凜冬將至。

我愛你，就像星星愛著月亮。感謝你們的點贊與關注

推薦閱讀：