**学习目标** * [ ] 安装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') }); ```