64

Koa快速入门教程（一）

 6 years ago
source link: https://mp.weixin.qq.com/s?__biz=MzU0OTE3MjE1Mw%3D%3D&mid=2247483688&idx=1&sn=99fff681317c91fa5c6fbad5b29ffc2e&chksm=fbb2a7feccc52ee8d0ac28fb91e6a597003ee8a8aa814e7ef062009e428a2ba4a186e9d7cc19&mpshare=1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Image

Image

Koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架，采用了 async和 await的方式执行异步操作。

Koa有v1.0与v2.0两个版本，随着node对 async和 await的支持，Koa2的正式发布，本文Koa均指Koa2

如果你还不熟悉 async函数可查阅阮大的ECMAScript 6 入门

这是一篇从零开始的简易教程，话不多说，先来快速开始：hello world！

GitHub 地址：https://github.com/ogilhinn/node-abc

一、快速开始

1.1 开发环境

Koa 依赖 node v7.6.0 或 ES2015及更高版本和 async 方法支持，你可以使用自己喜欢的版本管理器快速安装支持的 node 版本




  1. $ node -v
  2. v8.9.1



如果你的版本号小于v7.6.0,请自行升级。如使用nvm



在确认好环境后，我们就可以新建一个项目，在里面自由操练了






  1. $ mkdir KoaTutorial && cd KoaTutorial
  2. $ npm i koa --save



1.2 必修的 hello world 应用:






  1. const Koa = require('koa');
  2. const app = new Koa();
  3. app.use(async ctx => {
  4.   ctx.body = 'Hello World';
  5. });
  6. app.listen(3000);



打开浏览器，访问 http://localhost:3000/，你会看到那可爱的 HelloWorld。就是这么简单的几行代码，我们就起了一个HTTP服务，



来来看看这个hello world程序，其中前两行和后一行是架设一个 HTTP 服务。中间的则是对用户访问的处理。 ctx则是Koa所提供的 Context对象(上下文)， ctx.body=则是 ctx.response.body=的alias(别名)，这是响应体设置的API。



1.3 Context 对象



Koa Context 将 node 的 request 和 response 对象封装到单个对象中，为编写 Web 应用程序和 API 提供了许多有用的方法。上例的 ctx.body=''即是发送给用户内容，它是 ctx.response.body的简写(更多请查阅官网)。 ctx.response代表 HTTP Response。 ctx.request代表 HTTP Request。



二、路由(URL处理)



2.1 手动实现简易路由



koa是个极简的web框架，简单到连路由模块都没有配备，我们先来可以根据 ctx.request.url或者 ctx.request.path获取用户请求的路径，来实现简单的路由。






  1. const Koa = require('koa');
  2. const app = new Koa();
  3. app.use(async ctx => {
  4.   let _html = '404 NotFound'
  5.   switch (ctx.url) {
  6.     case '/':
  7.       _html = '<h1>Index</h1>';
  8.       break;
  9.     case '/adout':
  10.       _html = '<h1>About</h1>';
  11.       break;
  12.     case '/hello':
  13.       _html = '<h1>world</h1>';
  14.       break;
  15.     default:
  16.       break;
  17.   }
  18.   ctx.body = _html;
  19. });
  20. app.listen(3000);



运行这段代码，访问http://localhost:3000/hello将看见world，访问http://localhost:3000/about将看见返回about，访问http://localhost:3000将看见Index。是不是很有成就感…但是这也太麻烦了吧。如果依靠 ctx.request.url去手动处理路由，将会写很多代码，这时候就需要对应的路由中间件来对路由进行控制: koa-router



2.2 使用koa-router中间件



下载并引入koa-router






  1. npm i koa-router --save






  1. const Koa = require('koa');
  2. const Router = require('koa-router');
  3. const app = new Koa();
  4. const router = new Router();
  5. router.get('/', async (ctx) => {
  6.   let html = `
  7.       <ul>
  8.         <li><a href="/hello">helloworld</a></li>
  9.         <li><a href="/about">about</a></li>
  10.       </ul>
  11.     `
  12.   ctx.body = html
  13. }).get('/hello', async (ctx) => {
  14.   ctx.body = 'helloworld'
  15. }).get('/about', async (ctx) => {
  16.   ctx.body = 'about'
  17. })
  18. app.use(router.routes(), router.allowedMethods())
  19. app.listen(3000);



运行这个 demo，我们将看到与上栗一样的效果。在这儿我们使用到了第三方中间件。



三、中间件



Koa 的最大特色，也是最重要的一个设计，就是中间件（middleware）Koa 应用程序是一个包含一组中间件函数的对象，它是按照类似堆栈的方式组织和执行的。Koa中使用 app.use()用来加载中间件，基本上Koa 所有的功能都是通过中间件实现的。每个中间件默认接受两个参数，第一个参数是 Context 对象，第二个参数是 next函数。只要调用 next函数，就可以把执行权转交给下一个中间件。



下图为经典的Koa洋葱模型



Image



我们来运行Koa官网这个小例子：






  1. const Koa = require('koa');
  2. const app = new Koa();
  3. // x-response-time
  4. app.use(async (ctx, next) => {
  5.   const start = Date.now();
  6.   await next();
  7.   const ms = Date.now() - start;
  8.   ctx.set('X-Response-Time', `${ms}ms`);
  9. });
  10. // logger
  11. app.use(async (ctx, next) => {
  12.   const start = Date.now();
  13.   await next();
  14.   const ms = Date.now() - start;
  15.   console.log(`${ctx.method} ${ctx.url} - ${ms}`);
  16. });
  17. // response
  18. app.use(async ctx => {
  19.   ctx.body = 'Hello World';
  20. });
  21. app.listen(3000);



上面的执行顺序就是：请求 ==> x-response-time中间件 ==> logger中间件 ==> 响应中间件 ==> logger中间件 ==> response-time中间件 ==> 响应。 通过这个顺序我们可以发现这是个栈结构以"先进后出"（first-in-last-out）的顺序执行。Koa已经有了很多好用的中间件(https://github.com/koajs/koa/wiki#middleware)你需要的常用功能基本上都有人实现了



四、模板引擎



在实际开发中，返回给用户的网页往往都写成模板文件。 Koa 先读取模板文件，然后将这个模板返回给用户，这事我们就需要使用模板引擎了，关于Koa的模版引擎，我们只需要安装koa模板使用中间件koa-views 然后在下载你喜欢的模板引擎(支持列表)便可以愉快的使用了。如安装使用ejs






  1. # 安装koa模板使用中间件
  2. $ npm i --save koa-views
  3. # 安装ejs模板引擎
  4. $ npm i --save ejs






  1. const Koa = require('koa')
  2. const views = require('koa-views')
  3. const path = require('path')
  4. const app = new Koa()
  5. // 加载模板引擎
  6. app.use(views(path.join(__dirname, './view'), {
  7.     extension: 'ejs'
  8. }))
  9. app.use(async (ctx) => {
  10.     let title = 'Koa2'
  11.     await ctx.render('index', {
  12.         title,
  13.     })
  14. })
  15. app.listen(3000)



./view/index.ejs 模板






  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title><%= title %></title>
  5. </head>
  6. <body>
  7.     <h1><%= title %></h1>
  8.     <p>EJS Welcome to <%= title %></p>
  9. </body>
  10. </html>



打开http://localhost:3000/，你将看到返回了页面：



Image



关于ejs语法请访问ejs官网学习：https://github.com/mde/ejs



五、静态资源服务器



网站一般都提供静态资源（图片、字体、样式表、脚本……），我们可以自己实现一个静态资源服务器，但这没必要，koa-static模块封装了这部分功能。






  1. $ npm i --save koa-static






  1. const Koa = require('koa')
  2. const path = require('path')
  3. const static = require('koa-static')
  4. const app = new Koa()
  5. // 静态资源目录对于相对入口文件index.js的路径
  6. const staticPath = './static'
  7. app.use(static(
  8.   path.join(__dirname, staticPath)
  9. ))
  10. app.use(async (ctx) => {
  11.   ctx.body = 'hello world'
  12. })
  13. app.listen(3000)



我们访问http://localhost:3000/css/app.css 将返回 app.css 的内容，访问http://localhost:3000/koa2.png我们将看见返回下图



Image



六、请求数据的获取



前文我们主要都在处理数据的响应，这儿我们来了解下Koa获取请求数据，主要为 GET和 POST方式。



6.1 GET请求参数的获取



在koa中，获取GET请求数据源头是koa中request对象中的query方法或querystring方法，query返回是格式化好的参数对象，querystring返回的是请求字符串。



  • 请求对象ctx.query(或ctx.request.query)，返回如 { a:1, b:2 }
  • 请求字符串 ctx.querystring(或ctx.request.querystring)，返回如 a=1&b=2






  1. const Koa = require('koa')
  2. const app = new Koa()
  3. app.use( async ( ctx ) => {
  4.   const url = ctx.url
  5.   const query = ctx.query
  6.   const querystring = ctx.querystring
  7.   ctx.body = {
  8.     url,
  9.     query,
  10.     querystring
  11.   }
  12. })
  13. app.listen(3000)



运行程序并访问http://localhost:3000/?page=2&limit=10，我们将得到如下结果






  1. {"url":"/?page=2&limit=10","query":{"page":"2","limit":"10"},"querystring":"page=2&limit=10"}



对了，在这儿推荐个插件：JSONView，用了它你将得到格式化json数据，如下：






  1. {
  2.   url: "/?page=2&limit=10",
  3.   query: {
  4.     page: "2",
  5.     limit: "10"
  6.   },
  7.   querystring: "page=2&limit=10"
  8. }



更多Koa Request API 请查看http://koajs.com/#request



6.2 POST请求数据获取



对于POST请求的处理，koa2没有封装获取参数的方法，需要通过自己解析上下文context中的原生node.js请求对象req，将POST表单数据解析成querystring（例如： a=1&b=2&c=3），再将querystring 解析成JSON格式（例如： {"a":"1","b":"2","c":"3"}），我们来直接使用koa-bodyparser 模块从 POST 请求的数据体里面提取键值对。






  1. const Koa = require('koa')
  2. const app = new Koa()
  3. const bodyParser = require('koa-bodyparser')
  4. // 使用koa-bodyparser中间件
  5. app.use(bodyParser())
  6. app.use(async (ctx) => {
  7.   if (ctx.url === '/' && ctx.method === 'GET') {
  8.     // 当GET请求时候返回表单页面
  9.     let html = `
  10.       <h1>koa-bodyparser</h1>
  11.       <form method="POST" action="/">
  12.         Name:<input name="name" /><br/>
  13.         Age:<input name="age" /><br/>
  14.         Email: <input name="email" /><br/>
  15.         <button type="submit">submit</button>
  16.       </form>
  17.     `
  18.     ctx.body = html
  19.   } else if (ctx.url === '/' && ctx.method === 'POST') {
  20.     // 当POST请求的时候，中间件koa-bodyparser解析POST表单里的数据，并显示出来
  21.     ctx.body = ctx.request.body
  22.   } else {
  23.     // 404
  24.     ctx.body = '<h1>404 Not Found</h1>'
  25.   }
  26. })
  27. app.listen(3000)



运行程序，填写并提交表单，请求结果为：






  1. {
  2.   name: "ogilhinn",
  3.   age: "120",
  4.   email: "[email protected]"
  5. }



关于更多的Koa知识快打开搜索引擎搜索(常用的搜索引擎技巧)继续学习吧，后续将继续数据库的操作以及实现一个简单的小案例。



  • Koa官网
  • Koa进阶学习笔记
  • Koa 框架教程
  • Koa wiki

        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK