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

%E6%9C%AA%E5%91%BD%E5%90%8D_2018-09-27_13-53-08.png

輸出 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.htmlviews/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>

Notice: compact(): Undefined variable: limits in /var/www/html/wp-includes/class-wp-comment-query.php on line 853 Notice: compact(): Undefined variable: groupby in /var/www/html/wp-includes/class-wp-comment-query.php on line 853

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *