很多人比較關注NodeJs以及express 框架或Koa 框架之類的新技術。 Koa 是由Express 原班人馬打造的超輕量服務端框架與Express 相比,除了自由度更高,可以自行引入中間件之外,更重要的是使用了ES6 + async,從而避免了回調地獄,不過也是因為程式碼升級,所以Koa2 需要v7.60 以上的node.js 環境。
手動建立專案目錄,然後快速產生一個 package.json 檔案
npm init -y
安裝koa //目前版本2.4.1
npm install koa -S
接著建立一個app.js
// app.js const Koa = require('koa'); const app = new Koa(); app.use(async ctx => { ctx.body = 'Wise Wrong'; }); app.listen(3000);
最後在package.json 中加入啟動指令
一個最基礎的koa 應用程式就這樣完成了
可以執行npm start 並在瀏覽器訪問http://localhost:3000/ 查看效果
如果覺得手動建立項目太過繁瑣,可以使用鷹架koa-generato 來產生專案
npm install koa-generator -g
koa2 project_name
然後在專案下npm install 安裝依賴,npm start 啟動專案
如果是剛接觸koa,建議先看完這篇博客,再使用腳手架工具,這樣能更好的理解各個依賴包的作用
上面app.js 中有一個ctx,這是一個Koa 提供的Context 對象,封裝了request 和response
每次 HTTP Request 都會建立一個Context 物件
我們可以透過Context.request.path 來取得使用者請求的路徑,然後透過Context.response.body 給使用者傳送內容
Koa 預設的回傳類型是text/plain,如果要回傳一個html 檔案(或一個模組檔案),就需要修改Context.response.type
// app.js// 原生路由 const Koa = require('koa'); const fs = require('fs'); const app = new Koa(); app.use(async (ctx, next) => { if (ctx.request.path === '/index') { ctx.type = 'text/html'; ctx.body = fs.createReadStream('./views/index.html'); } else { await next(); } }); app.listen(3000);然後在瀏覽器中訪問http://localhost:3000/index 就能看到index.html 頁面,而訪問別的位址則是not found這樣處理url 顯得特別笨拙,所以我們需要引入路由中間件koa-router
npm install koa-router -S需要注意的是,在導入koa-router 的時候,需要在末尾加一個括號:
const router = require('koa-router')();相當於:
const koaRouter = require('koa-router'); const router = koaRouter();建立一個routes 目錄,用來存放路由文件,並在目錄下建立index.js
// routes/index.js const fs = require('fs'); const router = require('koa-router')() router.get('/index', async (ctx, next) => { ctx.type = 'text/html'; ctx.body = fs.createReadStream('./views/index.html'); }); module.exports = router這裡也可以使用prefix 方法,為檔案中的所有介面新增一個baseUrl// router.prefix('/about')修改app.js
// app.js const Koa = require('koa'); const app = new Koa(); const index = require('./routes/index') app.use(index.routes(), index.allowedMethods()) app.listen(3000);上面的allowedMethods 用於校驗請求的方法,如果用post 請求訪問get 接口,就會直接返回失敗另外,還可以在url 中添加變量,然後通過Context.params .name 存取
router.get('/about/:name', async (ctx, next) => { ctx.body = `I am ${ctx.params.name}!`; });三、靜態資源#在上面的index.html 中,如果需要引入css 等靜態資源,就需要用到koa-static
npm install koa-static -S建立一個目錄public 用來存放靜態資源 # 然後在app.js 中加入以下程式碼
const static = require('koa-static'); // 将 public 目录设置为静态资源目录 const main = static(__dirname + '/public'); app.use(main);事實上,這三行程式碼還可以優化
app.use(require('koa-static')(__dirname + '/public'));然後就能在index.html 中引入對應的檔案了
##四、模板引擎
開發的時候更建議使用koa-views 中間件來渲染頁面
npm install koa-views -S
在app.js 中將views 目錄設定為模版目錄
const views = require('koa-views') app.use(views(__dirname + '/views'));
然後在路由檔案中,就能使用render 方法了
// routes/index.js const router = require('koa-router')() router.get('/index', async (ctx, next) => { await ctx.render('index'); }); module.exports = router
以上是直接渲染html 檔案的方法,如果要引入模板引擎,可以新增extension 欄位來設定模版類型
app.use(views(__dirname + '/views', { extension: 'pug' // 以 pug 模版为例 }))
五、結語
當Express 流行的時候,其冗餘的依賴項被很多開發者所詬病
所以Express 團隊將 Express 拆卸得只剩下最基本的骨架,讓開發者自行組裝,這就是Koa
如文中所說,從零開始太過繁瑣,可以使用鷹架koa-generato 來快速開發
不過我更推薦,在熟悉了Koa 之後,搭一個適合自己專案的腳手架
不然為何不直接用Express 呢
相關推薦:
Koa服務限流方法實例#解析node中koa中間件機制問題以上是Node.js使用Koa建構基礎專案實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!