**學習目標** * [ ] 安裝Koa * [ ] 創建一個Koa應用 * [ ] 組合多個中間件 # 安裝 * [ ] 創建項目目錄， * [ ] 然后初始化Npm包管理配置文件 * [ ] 安裝koa并保存到本地 ``` $mkdir quickstart $cd quickstart $npm init $npm install koa --save ``` 安裝完之后在根目錄下會創建`package.json` ``` { "name": "quickstart", "version": "1.0.0", "description": "", "main": "app.js", "dependencies": { "koa": "^2.7.0" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } ``` # 建立一個簡單Web服務器 在根目錄下創建app.js文件，輸入以下內容 * [ ] 首先引用Koa，并創建Koa的實例app ``` const Koa = require('koa'); const app = new Koa(); ``` * [ ] 定義中間件helloMiddleware ``` const helloMiddleware = async (ctx, next) => { await next(); ctx.response.type = "text/html" ctx.response.body = '<h1>Hello World</h1>'; }; ``` * [ ] 然后加載中間件， ``` app.use(helloMiddleware); ``` * [ ] 最后啟動服務器，監聽3000端口， ``` app.listen(3000, () => { console.log('server is running at http://localhost:3000') }); ``` --- 完整的代碼 ~~~javascript const Koa = require('koa'); const app = new Koa(); //定義中間件 const helloMiddleware = async (ctx, next) => { await next(); ctx.response.type = "text/html" ctx.response.body = '<h1>Hello World</h1>'; }; //加載中間件 app.use(helloMiddleware); //監聽3000端口 app.listen(3000, () => { console.log('server is running at http://localhost:3000') }); ~~~ # 使用多個中間件 ```javascript const Koa = require('koa') const app = new Koa(); //定義中間件 const loggerMiddleware = async (ctx, next) => { const start = Date.now(); await next(); const ms = Date.now() - start; console.log(ctx.method, ctx.host + ctx.url + ctx.querystring + `[${ms}ms]`) }; const helloMiddleware = async (ctx, next) => { await next(); ctx.response.type = "text/html" ctx.response.body = '<h1>Hello Koa!</h1>'; } app.use(loggerMiddleware); app.use(helloMiddleware); //監聽3000端口 app.listen(3000, () => { console.log('server is running at http://localhost:3000') }); ``` > Koa的中間件是按照出現的順序執行的。 # 組合多個中間件 使用koa-compose件多個中間件組合成一個中間件 ```javascript const compose = require('koa-compose'); ``` 組合多個中間件，中間件執行區分順序 ```javascript const all = compose([loggerMiddleware, helloMiddleware]); ``` 完整的代碼 ```javascript const compose = require('koa-compose'); const Koa = require('koa'); const app = new Koa(); //定義中間件 const loggerMiddleware = async (ctx, next) => { const start = Date.now(); await next(); const ms = Date.now() - start; console.log(ctx.method, ctx.host + ctx.url + ctx.querystring + `[${ms}ms]`) }; const helloMiddleware = async (ctx, next) => { await next(); ctx.response.type = "text/html" ctx.response.body = '<h1>Hello World<h1>'; }; //組合多個中間件，中間件執行區分順序 const all = compose([loggerMiddleware, helloMiddleware]); app.use(all); app.listen(3000, () => { console.log('server is running at http://localhost:3000') }); ``` # 引入第三方的中間件`koa-logger` koa-logger提供了輸出請求日志的功能，包括請求的url、狀態碼、響應時間、響應體大小等信息，對于調試和跟蹤應用程序特別有幫助。 ```javascript const Koa = require('koa') const logger = require('koa-logger') const compose = require('koa-compose') const app = new Koa(); //定義中間件 const loggerMiddleware = async (ctx, next) => { const start = Date.now(); await next(); const ms = Date.now() - start; console.log(ctx.method, ctx.host + ctx.url + ctx.querystring + `[${ms}ms]`) }; const helloMiddleware = async (ctx, next) => { await next(); ctx.response.type = "text/html" ctx.response.body = '<h1>Hello Koa!</h1>'; } let allMiddleware = compose([loggerMiddleware, helloMiddleware]); app.use(logger()).use(allMiddleware); //監聽3000端口 app.listen(3000, () => { console.log('server is running at http://localhost:3000') }); ```