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版本号就可以看到效果了。
<pre>
<code>sudo npm install -g n</code>
<code>sudo n 7.10.0</code>
</pre>

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

image.png
接下来编写UI界面所需的upload.pug和css文件，因为我只是想简单地实现上传操作，设计就比较简陋了。
<pre>
<code>// upload.pug</code>
<code>extends layout</code>
<code>block content</code>
<code> form(id="upload" action="/upload" method="post" enctype="multipart/form-data")</code>
<code> h1 Upload Picture</code>
<code> input(id="picture-location" type="file" name="picture")</code>
<code> input(id="submit-button" type="submit" value="Submit")</code>
</pre>
<pre>
<code>// style.css</code>
<code>body {</code>
<code> padding: 50px;</code>
<code> font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;</code>
<code>}</code>
<code>a {</code>
<code> color: #00B7FF;</code>
<code>}</code>
<code>#upload {</code>
<code> /position/</code>
<code> margin: auto;</code>
<code> text-align: center;</code>
<code> /shape/</code>
<code> width: 200px;</code>
<code> height: 130px;</code>
<code> border: 4px solid #77ac98;</code>
<code> border-radius: 4px;</code>
<code> /color/</code>
<code> color: #78a355;</code>
<code> background-color: #afb4db;</code>
<code>}</code>
<code>#picture-location {</code>
<code> float: left;</code>
<code> color: green;</code>
<code>}</code>
<code>#submit-button {</code>
<code> /position/</code>
<code> margin-top: 4px;</code>
<code> float: left;</code>
<code> /color/</code>
<code> color: green;</code>
<code>}</code>
</pre>
最后在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()，都需避免使用。
<pre>
<code>const router = require('koa-router')()</code>
<code>const multer = require("koa-multer");</code>
<code>const upload = multer({ dest: 'uploads/' });</code>
<code>const fs = require('fs');</code>
<code>router.get('/', async (ctx, next) => {</code>
<code> await ctx.render('upload', {</code>
<code> title: 'UploadPictures'</code>
<code> })</code>
<code>})</code>
<code>router.post('/upload', upload.single('picture'), async (ctx, next) => {</code>
<code> var file = ctx.req.file;</code>
<code> if (file != null) {</code>
<code> console.log('File type: %s', file.mimetype);</code>
<code> console.log('Original file name: %s', file.originalname);</code>
<code> console.log('Size of file: %s bytes', file.size);</code>
<code> console.log('Storage location: %s', file.path);</code>
<code> } else {</code>
<code> console.log('No upload file!');</code>
<code> }</code>
<code> await ctx.render('upload', {</code>
<code> title: 'UploadPictures'</code>
<code> })</code>
<code>});</code>
<code>module.exports = router</code>
</pre>
npm start开启应用，浏览器访问，选择文件，点击Submit按钮即可提交，在uploads文件夹中可以看到图片已经上传。

image.png
image.png

总结

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