撰寫
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 -ynpm i koanpm 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>