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 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
原生JS实现汇率转换功能代码实例
May 13 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
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
庆祝教师节活动方案
2014/01/31 职场文书
超市采购员岗位职责
2014/02/01 职场文书
电焊工岗位职责
2014/03/06 职场文书
导师推荐信范文
2014/05/09 职场文书
杨善洲观后感
2015/06/04 职场文书
首次购房证明
2015/06/19 职场文书
关于童年的读书笔记
2015/06/26 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS