koa2.0初学篇

偶然加入了由同学组成的小团队，想多尝试一些自己不熟悉的东西，于是选择了后台的工作。啊，饶了我吧，其实我根本不擅长后台啊。虽然心里这样想着，还是打算硬着头皮上，能做多少做多少吧。写这篇博客的缘由是组长要求后台组学习koa2.0，并且以博客的方式进行检查。我觉得那就先练练手，从实现一个简单的web应用做起，记录下自己的所见所感吧。这也是我写的第一篇博客，有不足的地方，欢迎大家指正。

简介

koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。
这是koa中文文档原文中的一小段，我觉得总结得挺好的。不过对于koa2.0，还是推荐这篇，它在koa2.0方面比文档详细，能让初学者少走一些弯路。

尝试

我参考一篇github的博客，它使用express和multer实现了单图上传的功能，代码简洁明了，我觉得这可以成为我熟悉koa2.0的第一步，于是我用koa2.0框架和koa-multer模块实现了类似的功能。

关于koa2.0的安装和新建应用的部分，简介部分推荐的文章已经说明，我就不赘述了。值得一提是koa2.0使用了ES7的新特性(async/await)，所以对node版本的要求比较高(node v7.6+)，貌似node官网里的稳定版本都不能满足需求，所以我升到了最新的版本，使用管理nodejs版本的n模块可以方便地升至最新，命令如下（对应我当时node的最新版本7.10.0），重启终端查看node版本号就可以看到效果了。

 sudo npm install -g n
 sudo n 7.10.0
 

新建koa2.0应用之后，观察文件目录，可以发现它和Express框架是很相似的，毕竟是原班人马打造，这也说明如果你熟练掌握了Express框架，koa的上手也会变得容易。

image.png

接下来编写UI界面所需的upload.pug和css文件，因为我只是想简单地实现上传操作，设计就比较简陋了。

 
 
 // upload.pug 
 
 extends layout 
 
 block content 
 
  form(id="upload" action="/upload" method="post" enctype="multipart/form-data") 
 
  h1 Upload Picture 
 
  input(id="picture-location" type="file" name="picture") 
 
  input(id="submit-button" type="submit" value="Submit") 
 
 

 
 
 // style.css 
 
 body { 
 
  padding: 50px; 
 
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 
 
 } 
 
 a { 
 
  color: #00B7FF; 
 
 } 
 
 #upload { 
 
  / 
 position/ 
 
  margin: auto; 
 
  text-align: center; 
 
  / 
 shape/ 
 
  width: 200px; 
 
  height: 130px; 
 
  border: 4px solid #77ac98; 
 
  border-radius: 4px; 
 
  / 
 color/ 
 
  color: #78a355; 
 
  background-color: #afb4db; 
 
 } 
 
 #picture-location { 
 
  float: left; 
 
  color: green; 
 
 } 
 
 #submit-button { 
 
  / 
 position/ 
 
  margin-top: 4px; 
 
  float: left; 
 
  / 
 color/ 
 
  color: green; 
 
 } 
 
 

最后在routes/index.js中加入路由，需添加koa-multer模块(npm install koa-multer --save)。koa将Express中的router，view等功能移除了，因此显得轻量优雅，给予了开发者更高的自由度。

ctx是由koa传入的封装了request和response的变量，我们可以通过ctx.req，ctx.res，来访问Node的request和response对象，但koa不支持直接调用底层res进行响应处理，比如res.end()，res.statusCode，res.writeHead()，res.write()，都需避免使用。

 const router = require('koa-router')()
 const multer = require("koa-multer");
 const upload = multer({ dest: 'uploads/' });
 const fs = require('fs');
 router.get('/', async (ctx, next) => {
  await ctx.render('upload', {
  title: 'UploadPictures'
  })
 })
 router.post('/upload', upload.single('picture'), async (ctx, next) => {
  var file = ctx.req.file;
  if (file != null) {
  console.log('File type: %s', file.mimetype);
  console.log('Original file name: %s', file.originalname);
  console.log('Size of file: %s bytes', file.size);
  console.log('Storage location: %s', file.path);
  } else {
  console.log('No upload file!');
  }
  await ctx.render('upload', {
  title: 'UploadPictures'
  })
 });
 module.exports = router
 

npm start开启应用，浏览器访问，选择文件，点击Submit按钮即可提交，在uploads文件夹中可以看到图片已经上传。

image.png

image.png

总结

通过实现一个简单的koa2.0的应用，我们可以看出koa和Express还是很相像的，注意比较两者的区别可以促进对web框架的理解。koa优于Express框架的主要方面在于解决了异步组合和异步异常获取的问题，避免了重复繁琐的回调函数嵌套。不过由于本人还未能对这方面有比较深刻的理解，所以也没有对async/await组合进行详细的讲解。
想起去年学习nodejs和Express框架的时候磕磕绊绊，我觉得还是得回去好好复习promise，毕竟当初没有深入地去学习和研究，这样下去是会拖队伍后腿的。不管怎样，第一步还是迈出去了，为自己加油吧。