Node.js使用Koa搭建 基礎(chǔ)項(xiàng)目
Koa 是由 Express 原班人馬打造的超輕量服務(wù)端框架
與 Express 相比,除了自由度更高,可以自行引入中間件之外,更重要的是使用了 ES6 + async,從而避免了回調(diào)地獄
不過也是因?yàn)榇a升級(jí),所以 Koa2 需要 v7.60 以上的 node.js 環(huán)境
一、創(chuàng)建項(xiàng)目
手動(dòng)創(chuàng)建一個(gè)項(xiàng)目目錄,然后快速生成一個(gè) 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);

一個(gè)最基礎(chǔ)的 koa 應(yīng)用就這樣完成了

可以執(zhí)行 npm start 并在瀏覽器訪問 http://localhost:3000/ 查看效果
如果覺得手動(dòng)創(chuàng)建項(xiàng)目太過繁瑣,可以使用腳手架 koa-generato 來生成項(xiàng)目
npm install koa-generator -g
koa2 project_name
如果是剛接觸 koa,建議先看完這篇博客,再使用腳手架工具,這樣能更好的理解各個(gè)依賴包的作用
二、配置路由
上面 app.js 中有一個(gè) ctx,這是一個(gè) Koa 提供的 Context 對象,封裝了 request 和 response
每一次 HTTP Request 都會(huì)創(chuàng)建一個(gè) Context 對象
我們可以通過 Context.request.path 來獲取用戶請求的路徑,然后通過 Context.response.body 給用戶發(fā)送內(nèi)容
Koa 默認(rèn)的返回類型是 text/plain,如果要返回一個(gè) html 文件(或者一個(gè)模塊文件),就需要修改 Context.response.type
另外,Context.response 可以簡寫,比如 Context.response.type 簡寫為 Context.type,Context.response.body 簡寫為 Context.type
在項(xiàng)目下創(chuàng)建一個(gè)存放 html 文件的目錄 views,并在該目錄下創(chuàng)建一個(gè) 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 顯得特別笨拙,所以我們需要引入路由中間件 koa-router
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}!`;
});
三、靜態(tài)資源
在上面的 index.html 中,如果需要引入 css 等靜態(tài)資源,就需要用到 koa-static
npm install koa-static -S

然后在 app.js 中添加以下代碼
const static = require('koa-static');
// 將 public 目錄設(shè)置為靜態(tài)資源目錄
const main = static(__dirname + '/public');
app.use(main);
app.use(require('koa-static')(__dirname + '/public'));
四、模板引擎
上面的路由是使用 fs 模塊直接讀取 html 文件
開發(fā)的時(shí)候更推薦使用 koa-views 中間件來渲染頁面
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 模版為例
}))
五、結(jié)語
如果將 Express 看作 webstorm,那么 Koa 就是 sublime
當(dāng) Express 流行的時(shí)候,其冗雜的依賴項(xiàng)被很多開發(fā)者所詬病
所以 Express 團(tuán)隊(duì)將 Express 拆卸得只剩下最基本的骨架,讓開發(fā)者自行組裝,這就是 Koa
正如文中所說,從零開始太過繁瑣,可以使用腳手架 koa-generato 來快速開發(fā)
不過我更推薦,在熟悉了 Koa 之后,搭一個(gè)適合自己項(xiàng)目的腳手架
不然為何不直接用 Express 呢
我想這也是 Koa 的官方文檔中沒有提到 generato 工具的原因吧
- Node.js中Express框架的使用教程詳解
- node.js+express留言板功能實(shí)現(xiàn)示例
- Node.js+express+socket實(shí)現(xiàn)在線實(shí)時(shí)多人聊天室
- Ajax 的初步實(shí)現(xiàn)(使用vscode+node.js+express框架)
- node.js利用express自動(dòng)搭建項(xiàng)目的全過程
- 如何從頭實(shí)現(xiàn)一個(gè)node.js的koa框架
- Node.js中Koa2在控制臺(tái)輸出請求日志的方法示例
- node.js學(xué)習(xí)筆記之koa框架和簡單爬蟲練習(xí)
- Node.js的Koa實(shí)現(xiàn)JWT用戶認(rèn)證方法
- node.js?express和koa中間件機(jī)制和錯(cuò)誤處理機(jī)制
相關(guān)文章
express項(xiàng)目文件目錄說明以及功能描述詳解
這篇文章主要給大家介紹了關(guān)于express項(xiàng)目文件目錄說明以及功能描述的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
node版本切換與版本升級(jí)降級(jí)教程(win)
nvm是一個(gè)node的版本管理工具,可以簡單操作node版本的切換、安裝、查看,下面這篇文章主要給大家介紹了關(guān)于node版本切換與版本升級(jí)降級(jí)教程的相關(guān)資料,需要的朋友可以參考下2022-11-11
node.js報(bào)錯(cuò):Cannot find module ''ejs''的解決辦法
最近發(fā)現(xiàn)了node.js居然報(bào)錯(cuò)了,錯(cuò)誤提示為:Cannot find module 'ejs',后來找了找資料發(fā)現(xiàn)解決的方法其實(shí)很簡單,下面通過這篇文章來一起看看吧,希望對同樣遇到這個(gè)問題的朋友們能有所幫助。2016-12-12
node npm yarn報(bào)錯(cuò)error:不是內(nèi)部或外部命令
文章介紹了如何安裝和配置Node.js、npm和yarn,并解決無法正常使用的問題,主要步驟包括:正確安裝環(huán)境變量、配置用戶變量和系統(tǒng)變量、設(shè)置全局安裝模塊和緩存目錄的環(huán)境變量,以及手動(dòng)配置yarn的環(huán)境變量2024-11-11

