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,毕竟当初没有深入地去学习和研究,这样下去是会拖队伍后腿的。不管怎样,第一步还是迈出去了,为自己加油吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,427评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,551评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,747评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,939评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,955评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,737评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,448评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,352评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,834评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,992评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,133评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,815评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,477评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,022评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,147评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,398评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,077评论 2 355

推荐阅读更多精彩内容