Node.js使用Koa搭建 基础项目


Posted in Javascript onJanuary 08, 2018

Koa 是由 Express 原班人马打造的超轻量服务端框架

与 Express 相比,除了自由度更高,可以自行引入中间件之外,更重要的是使用了 ES6 + async,从而避免了回调地狱

不过也是因为代码升级,所以 Koa2 需要 v7.60 以上的 node.js 环境

一、创建项目

手动创建一个项目目录,然后快速生成一个 package.json 文件

npm init -y
安装 koa    //当前版本 2.4.1
npm install koa -S
然后创建一个 app.js
// app.js

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
 ctx.body = 'Wise Wrong';
});

app.listen(3000);
最后在 package.json 中添加启动指令

Node.js使用Koa搭建 基础项目

一个最基础的 koa 应用就这样完成了

Node.js使用Koa搭建 基础项目

可以执行 npm start 并在浏览器访问 http://localhost:3000/ 查看效果

如果觉得手动创建项目太过繁琐,可以使用脚手架 koa-generato 来生成项目

npm install koa-generator -g
koa2 project_name
然后在项目下 npm install 安装依赖,npm start 启动项目

如果是刚接触 koa,建议先看完这篇博客,再使用脚手架工具,这样能更好的理解各个依赖包的作用

二、配置路由

上面 app.js 中有一个 ctx,这是一个 Koa 提供的 Context 对象,封装了 request 和 response

每一次 HTTP Request 都会创建一个 Context 对象

我们可以通过 Context.request.path 来获取用户请求的路径,然后通过 Context.response.body 给用户发送内容

Koa 默认的返回类型是 text/plain,如果要返回一个 html 文件(或者一个模块文件),就需要修改 Context.response.type

另外,Context.response 可以简写,比如 Context.response.type 简写为 Context.type,Context.response.body 简写为 Context.type

在项目下创建一个存放 html 文件的目录 views,并在该目录下创建一个 index.html,然后修改 app.js

// app.js// 原生路由

const Koa = require('koa');
const fs = require('fs');
const app = new Koa();

app.use(async (ctx, next) => {
 if (ctx.request.path === '/index') {
 ctx.type = 'text/html';
 ctx.body = fs.createReadStream('./views/index.html');
 } else {
 await next();
 }
});

app.listen(3000);
然后在浏览器中访问 http://localhost:3000/index 就能看到 index.html 页面,而访问别的地址则是 not found

这样处理 url 显得特别笨拙,所以我们需要引入路由中间件 koa-router

npm install koa-router -S
需要注意的是,在导入 koa-router 的时候,需要在末尾加一个括号:
const router = require('koa-router')();
相当于:
const koaRouter = require('koa-router');
const router = koaRouter();
创建一个 routes 目录,用来存放路由文件,并在目录下创建 index.js

Node.js使用Koa搭建 基础项目

// routes/index.js

const fs = require('fs');
const router = require('koa-router')()

router.get('/index', async (ctx, next) => {
 ctx.type = 'text/html';
 ctx.body = fs.createReadStream('./views/index.html');
});

module.exports = router
这里还可以使用 prefix 方法,为文件中的所有接口添加一个 baseUrl

// router.prefix('/about')

修改 app.js

// app.js

const Koa = require('koa');
const app = new Koa();

const index = require('./routes/index')
app.use(index.routes(), index.allowedMethods())

app.listen(3000);
上面的 allowedMethods 用于校验请求的方法,如果用 post 请求访问 get 接口,就会直接返回失败

另外,还可以在 url 中添加变量,然后通过 Context.params.name 访问

router.get('/about/:name', async (ctx, next) => {
 ctx.body = `I am ${ctx.params.name}!`;
});
 

三、静态资源

在上面的 index.html 中,如果需要引入 css 等静态资源,就需要用到 koa-static

npm install koa-static -S
创建一个目录 public 用来存放静态资源

Node.js使用Koa搭建 基础项目

 然后在 app.js 中添加以下代码

const static = require('koa-static');
// 将 public 目录设置为静态资源目录
const main = static(__dirname + '/public');
app.use(main);
事实上,这三行代码还可以优化
app.use(require('koa-static')(__dirname + '/public'));
然后就能在 index.html 中引入对应的文件了

Node.js使用Koa搭建 基础项目 

四、模板引擎

上面的路由是使用 fs 模块直接读取 html 文件

开发的时候更推荐使用 koa-views 中间件来渲染页面

npm install koa-views -S
在 app.js 中将 views 目录设定为模版目录
const views = require('koa-views')
app.use(views(__dirname + '/views'));
然后在路由文件中,就能使用 render 方法了
// routes/index.js

const router = require('koa-router')()

router.get('/index', async (ctx, next) => {
 await ctx.render('index');
});

module.exports = router
以上是直接渲染 html 文件的方法,如果要引入模板引擎,可以添加 extension 字段来设定模版类型
app.use(views(__dirname + '/views', {
 extension: 'pug' // 以 pug 模版为例
}))

五、结语

如果将 Express 看作 webstorm,那么 Koa 就是 sublime

当 Express 流行的时候,其冗杂的依赖项被很多开发者所诟病

所以 Express 团队将  Express 拆卸得只剩下最基本的骨架,让开发者自行组装,这就是 Koa

正如文中所说,从零开始太过繁琐,可以使用脚手架 koa-generato 来快速开发

不过我更推荐,在熟悉了 Koa 之后,搭一个适合自己项目的脚手架

不然为何不直接用 Express 呢

我想这也是 Koa 的官方文档中没有提到 generato 工具的原因吧

Javascript 相关文章推荐
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
Vue实现验证码功能
Dec 03 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
JavaScript体验异步更好的解决办法
Jan 08 #Javascript
探索Vue高阶组件的使用
Jan 08 #Javascript
Vue入门之数据绑定(小结)
Jan 08 #Javascript
浅谈Vue数据绑定的原理
Jan 08 #Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 #Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 #Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 #Javascript
You might like
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Python yield的用法实例分析
2020/03/06 Python
利用python生成照片墙的示例代码
2020/04/09 Python
使用K.function()调试keras操作
2020/06/17 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
中学老师的自我评价
2013/11/07 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
单位接收函格式
2015/01/30 职场文书
护士求职简历自我评价
2015/03/10 职场文书
考试没考好检讨书
2015/05/06 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
PHP 时间处理类Carbon
2022/05/20 PHP