KOA Introduction
- KOA 簡介及基本範例
Youtube 影片
Koa
- 新的 web framework 由 Express 團隊設計
- 目標是建立較小,表達清楚且更健全的網路應用及 API 的基礎
- 使用 async 函數來隔開 callbacks
- 不預設 middleware
常用的模組(需要安裝)
- Koa Router: koa 並沒有預設的 router, koa-router 是最簡單的router
- Koa EJS template: 容易使用的 template 引擎
- Koa body parser: 解析進來的資料
Koa 的好處
- 非常小的套件,容易擴展
- 快速有效率
- 最新的 Javascript ㄈ語法
- 增強的 HTTP req, res
- 簡單學習(如果已經熟悉 Express)
建立專案
- 建立目錄
npm init -y
npm i koa
npm i -D nodemon
// 為了容易重啟- 修改
package.json
{ "scripts": { "start": "nodemon app.js" } }
建立 app.js
const Koa = require("koa"); const app = new Koa(); app.use(async ctx => (ctx.body = "Hello World")); app.listen(3000, () => console.log("Server started ..."));
- 執行
npm start
輸出 JSON
const Koa = require("koa"); const app = new Koa(); app.use(async ctx => (ctx.body = {msg: "Hello World"})); app.listen(3000, () => console.log("Server started ..."));
- 或者使用 koa-json
npm i koa-json
const Koa = require("koa"); const json = require("koa-json"); const app = new Koa(); app.use(json()); app.use(async ctx => (ctx.body = {msg: "Hello World"})); app.listen(3000, () => console.log("Server started ..."));
使用 router
npm i koa-router
const Koa = require("koa"); const KoaRouter = require("koa-router"); const Json = require("koa-json"); const app = new Koa(); const router = new KoaRouter(); // Json prettier middleware app.use(Json()); // Simple middleware example //app.use(async ctx => (ctx.body = { message: "Hello World" })); router.get("/test", ctx => (ctx.body = "Hello Test")); // Router middleware app.use(router.routes()).use(router.allowedMethods()); app.listen(3000, () => console.log("Server started ..."));
使用 template
npm install koa-ejs
修改app.js
const Koa = require("koa"); const KoaRouter = require("koa-router"); const Json = require("koa-json"); const path = require("path"); const render = require("koa-ejs"); const app = new Koa(); const router = new KoaRouter(); // Json prettier middleware app.use(Json()); // Simple middleware example //app.use(async ctx => (ctx.body = { message: "Hello World" })); render(app, { root: path.join(__dirname, "views"), layout: "layout", viewExt: "html", cache: false, debug: false, }); // Index router.get("/", async ctx => { await ctx.render("index"); }); router.get("/test", ctx => (ctx.body = "Hello Test")); // Router middleware app.use(router.routes()).use(router.allowedMethods()); app.listen(3000, () => console.log("Server started ..."));
增加 views/layout.html
跟 views/index.html
- layout.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Things App</title> </head> <body> <div class="container"> <%- body %> </div> </body> </html>
- index.html
<h1>My Home Page</h1>