强型闯入DenoLand[30] - Web API 实作篇

在介绍完 Denon 的使用方法以及 Oak 的概念後，我们就可以进一步来实作 Web API 了！

由於大部分的 Web API 都仅提供 Get 和 POST 方法，所以本系列只会针对这两种方法各实作一条路由：

• user
• insert

user 路由供使用者查询资料，而 insert 路由则可以供我们新增使用者。

进入正题

如果今天只是要实作一个简易的 Web API ，单档就能够搞定了：

import { Application, Router, Status } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

const router = new Router();

router.get("/", (ctx) => {
    ctx.response.status = Status.OK;
    ctx.response.body = { message: "It's work !" };
});

app.use(router.routes());
app.use(router.allowedMethods());

await app.listen("0.0.0.0:3001");

不过，一开始也有提到笔者这次要实作的是能够查询和新增使用者的 Web API 。因此，我们还会需要串接资料库，本系列文采用的是 MongoDB ，关於该资料库的安装以及串接教学，笔者会在之後的文章介绍。

专案架构

本章预计实作的范例专案结构如下：

|-- WebAPI
    |-- controllers/
    |   |-- models/
    |				| -- Database.ts
    |   |-- UserController.ts
    |-- routers/
    |   |-- Route.ts
    |-- app.ts

主要分为 controllers 、 models 、 routers 三大资料夹，分别负责了控制逻辑、资料库的抽象层以及路由功能。

由於笔者还没介绍资料库的安装与架接，所以本篇会先实作其他部分。

app.ts

import { Application, Router } from "https://deno.land/x/oak/mod.ts";
import { UserRoutes } from "./routers/Route.ts";

const app = new Application();
const router = new Router();
const userRoutes = UserRoutes(router);

app.use(userRoutes.routes());
app.use(userRoutes.allowedMethods());

await app.listen("127.0.0.1:3001");

routers/Route.ts

import { Router, Status, RouterContext  } from "https://deno.land/x/oak/mod.ts";
import { userController } from "../controllers/UserController.ts";
const controller = new userController();
export function UserRoutes(router: Router) {
  return router
    .get("/user/:id", async (ctx: RouterContext) => {
      const users = await controller.findOne(ctx.params.id);
      if (users) {
        ctx.response.status = Status.OK;
        ctx.response.body = users;

      } else {
        ctx.response.status = Status.NotFound;
        ctx.response.body = [];
      }
    })
    .post("/insert", async(ctx: RouterContext)=>{
      const { name } = await ctx.request.body;
      if(name){
        await controller.insertData(name)
        ctx.response.status = Status.OK;
        ctx.response.body = 'Success!'
      }
    })
}

controllers/UserController.ts

export class userController {
  findOne(props:any){
    // ...
  }
  insertData(props:any){
    // ...
  }
}

UserController.ts 负责接收路由的请求并根据请求对资料库进行操作，由於笔者还没提到 MongoDB 的教学，所以我会把该档案的操作留到之後的文章一起总结。

补充： MVC 模式

MVC模式（Model–view–controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

MVC模式最早由Trygve Reenskaug在1978年提出[1]，是全录帕罗奥多研究中心（Xerox PARC）在20世纪80年代为程序语言Smalltalk发明的一种软件架构。MVC模式的目的是实现一种动态的程序设计，使後续对程序的修改和扩充简化，并且使程序某一部分的重复利用成为可能。除此之外，此模式透过对复杂度的简化，使程序结构更加直觉。软件系统透过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。专业人员可以依据自身的专长分组：

• 模型（Model） - 程序设计师编写程序应有的功能（实现演算法等等）、资料库专家进行资料管理和资料库设计(可以实现具体的功能)。
• 视图（View） - 介面设计人员进行图形介面设计。
• 控制器（Controller）- 负责转发请求，对请求进行处理。

-- wikipedia

如果读者仔细看，会发现本范例已经做到了 Model 与 Controller 的部分，至於为什麽没有 View 的部分呢？

那是因为我们今天是希望做到前後端分离，所以我们只要将前端所需要的资料回传即可，若读者希望练习 MVC 模式，也可以参考本日的延伸阅读将 View 的部分一同实作。

API 的设计考量

设计 Web API 时，可以考量以下几点进行设计：

• 简洁易读

  不易读的网址：

  https://ithelp.ithome.com.tw/u/20110850/im
  

  不要将 Web API 的 URL 内容过度精简，会让开发者与使用者不易理解。

  易读的网址：

  https://ithelp.ithome.com.tw/users/20110850/ironman
  

• 大小写一致、规则统一

  大小写不一致：

  https://ithelp.ithome.com.tw/Users/20110850/Ironman
  

  大小写字母容易混淆使用者，在设计 Web API 时应尽量统一为全部小写：

  https://ithelp.ithome.com.tw/users/20110850/ironman
  

• 不会将服务器架构暴露出来

  API 网址尽量不要将服务器中的目录暴露出来，以避免黑客恶意攻击。

延伸阅读

同样的事情在不同人眼中可能会有不同的见解、看法。

在读完本篇以後，笔者也强烈建议大家去看看以下文章，或许会对型别、变数宣告...等观念有更深层的看法唷！

• 基于 Koa.js 的 Node.js MVC 框架