從零開始實現一個簡單的rest風格服務器 (2) —— 集成 koa

從零開始實現一個簡單的rest風格服務器 (1) —— typescript 開發環境配置

上一篇搭建了 typescript 開發環境，但是還不能在瀏覽器中查看。這次我們來集成 web 開發框架 koa，用來處理瀏覽器的 http 請求。

首先安裝 koa

yarn add koa koa-router koa-static

接着安裝 koa 相關的 types，以便獲得 IDE 更好提示

yarn add @types/koa @types/koa-router @types/koa-static --dev

修改 server.ts 文件，輸入如下內容：

/*
 * @Description: 後臺服務入口
 * @version: 0.1.0
 */

import * as Koa from 'koa';
import * as koaStatic from 'koa-static'
import { router } from './router';

const app = new Koa();

/**
 * @name: 設置靜態資源目錄
 * @param : undefined
 * @return : undefined
 */
app.use(koaStatic('./www'));

/**
 * @name: 使用路由
 * @param : undefined
 * @return : undefined
 */
app.use(router.routes());

/**
 * @name: 服務端口
 * @param : undefined
 * @return : undefined
 */
const httpPort = 8080

app.listen(httpPort);

console.log(`Http Server running on port ${httpPort}`);

新建路由文件夾 router 及文件 index.ts

/*
 * @Description: 後臺路由組件
 * @version: 0.1.0
 */
import * as Router from 'koa-router';

const router = new Router();

router.get('/*', async (ctx) => {
  ctx.body = 'Hell koa';
})

export { router }

運行

yarn run build / npm run build
node ./dist/server.js

打開瀏覽器，輸入 http://localhost:8080

如果能看到 Hello Koa，恭喜你，koa 的集成成功。

目錄結構如下：