Node.js使用Koa搭建 基础项目
koa 是由 express 原班人马打造的超轻量服务端框架
与 express 相比,除了*度更高,可以自行引入中间件之外,更重要的是使用了 es6 + async,从而避免了回调地狱
不过也是因为代码升级,所以 koa2 需要 v7.60 以上的 node.js 环境
一、创建项目
手动创建一个项目目录,然后快速生成一个 package.json 文件
npm init -y
npm install koa -s
// app.js const koa = require('koa'); const app = new koa(); app.use(async ctx => { ctx.body = 'wise wrong'; }); app.listen(3000);
一个最基础的 koa 应用就这样完成了
可以执行 npm start 并在浏览器访问 http://localhost:3000/ 查看效果
如果觉得手动创建项目太过繁琐,可以使用脚手架 koa-generato 来生成项目
npm install koa-generator -g
koa2 project_name
如果是刚接触 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);
这样处理 url 显得特别笨拙,所以我们需要引入路由中间件
npm install koa-router -s
const router = require('koa-router')();
const koarouter = require('koa-router'); const router = koarouter();
// 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
// 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);
另外,还可以在 url 中添加变量,然后通过 context.params.name 访问
router.get('/about/:name', async (ctx, next) => { ctx.body = `i am ${ctx.params.name}!`; });
三、静态资源
在上面的 index.html 中,如果需要引入 css 等静态资源,就需要用到
npm install koa-static -s
然后在 app.js 中添加以下代码
const static = require('koa-static'); // 将 public 目录设置为静态资源目录 const main = static(__dirname + '/public'); app.use(main);
app.use(require('koa-static')(__dirname + '/public'));
四、模板引擎
上面的路由是使用 fs 模块直接读取 html 文件
开发的时候更推荐使用 中间件来渲染页面
npm install koa-views -s
const views = require('koa-views') app.use(views(__dirname + '/views'));
// routes/index.js const router = require('koa-router')() router.get('/index', async (ctx, next) => { await ctx.render('index'); }); module.exports = router
app.use(views(__dirname + '/views', { extension: 'pug' // 以 pug 模版为例 }))
五、结语
如果将 express 看作 webstorm,那么 koa 就是 sublime
当 express 流行的时候,其冗杂的依赖项被很多开发者所诟病
所以 express 团队将 express 拆卸得只剩下最基本的骨架,让开发者自行组装,这就是 koa
正如文中所说,从零开始太过繁琐,可以使用脚手架 koa-generato 来快速开发
不过我更推荐,在熟悉了 koa 之后,搭一个适合自己项目的脚手架
不然为何不直接用 express 呢
我想这也是 koa 的官方文档中没有提到 generato 工具的原因吧
上一篇: 老师凌乱了...
推荐阅读
-
使用vue脚手架(vue-cli)搭建一个项目详解
-
Vue使用NPM方式搭建项目
-
使用vue-cli脚手架工具搭建vue-webpack项目
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之七使用JWT生成Token(个人见解)
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之十一Swagger使用一
-
Node.js使用Express创建Web项目详细教程
-
荐 使用IDEA搭建一个简单的JavaWeb图书管理项目(详细步骤指导、提供源码)
-
vue项目搭建以及全家桶的使用详细教程(小结)
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之十数据库基础方法的封装
-
django项目搭建与Session使用详解