1. 很明显的是我们返回的数据格式是固定的（code, msg, data）,只有data的类型是不固定的，所以就可以用一个 interface来约束一下
  2. add的时候，接受得参数是什么貌似也没有约束，最起码看不到，过几天就会忘记了
  3. 如果路由得一个个写，10个以内得接口还可以接受，再多就要疯了

这3个问题，倒着解决。

改造路由的思路

  1. router.get('/list', async (ctx) => {
  2.   const postRepository = connection.getRepository(Post)
  3.   const posts = await postRepository.find()
  4.   ctx.body = {
  5.     code: 0,
  6.     msg: 'success',
  7.     data: posts
  8.   }
  9. })

观察一下路由结构，路由其实就是3个变量组成，一个是http请求的类型，一个是路由地址，一个是控制器。在网上看教程的时候翻到了Typescript装饰器，写出来的路由我觉得很不错，大概是这个样子的：

  1. export default class Post { // Post 代表操作的表
  2.     @get('/list') // 这个是列表接口
  3.   async ListController (ctx) {
  4.     ctx.body = '列表'
  5.   }
  6.   @post('/add') // 这个是新增接口
  7.   async AddController (ctx) {
  8.     ctx.body = '添加数据'
  9.   }
  10. }

查了一下实现的思路，用 reflect-metadata 和装饰器，在import这个类的时候，把所有的路由的参数都收集起来，然后再统一挂载上去。主要用到2个方法，赋值和取值。

  1. // 在类上定义元数据，key 为 `metadataKey`，value 为 `metadataValue`
  2. Reflect.defineMetadata(metadataKey, metadataValue, target);
  3. let result = Reflect.getMetadata(metadataKey, target);
  5. // 在类的原型属性 `propertyKey` 上定义元数据，key 为 `metadataKey`，value 为 `metadataValue`
  6. Reflect.defineMetadata(metadataKey, metadataValue, target, propertyKey);
  7. let result = Reflect.getMetadata(metadataKey, target, propertyKey);
  9. // 怎么赋的值就是怎么取

开始实际写代码。

重新设置项目目录结构

先清空项目 src 下的所有文件和文件夹。建立以下几个目录和文件：

  • config // 配置
  • controllers // 所有的controller
  • core // 核心文件
  • entity // 数据实体
  • router // 路由
  • app.ts // 项目入口
  1. // src/app.ts
  2. import path from 'path';
  3. import Koa from 'koa';
  4. import koaStatic from 'koa-static';
  5. import bodyParser from 'koa-bodyparser';
  7. import { createConnection } from 'typeorm';
  8. import { mongoOptions } from './config/mongodb';
  10. createConnection(mongoOptions).then(async () => { // 创建数据库连接
  12.   const app = new Koa();
  14.   // Middlewares
  15.   app.use(bodyParser());
  16.   app.use(koaStatic(path.join(__dirname, '../public')));
  18.   // app.use(router.routes()).use(router.allowedMethods());
  20.   app.listen(3000, () => {
  21.     console.log('application is running on port 3000');
  22.   })
  23. }).catch((error: any) => console.log('TypeORM connection error: ', error));
  1. // src/config/mongodb.ts
  2. import path from 'path';
  3. import { ConnectionOptions } from 'typeorm';
  5. // mongodb的连接配置
  6. export const mongoOptions: ConnectionOptions = {
  7.   type: 'mongodb',
  8.   host: 'localhost',
  9.   port: 27017,
  10.   username: '',
  11.   password: '',
  12.   database: 'comments',
  13.   synchronize: true,
  14.   entities: [
  15.     path.join(__dirname, '../entity/*.{ts, js}')
  16.   ],
  17.   useUnifiedTopology: true,
  18.   logging: true
  19. };
  21. export default {
  22.   mongoOptions
  23. }
  1. // src/entity/Post.ts
  2. import { Column, Entity, ObjectID, ObjectIdColumn } from 'typeorm'
  4. @Entity()
  5. export class Post {
  7.   @ObjectIdColumn()
  8.   id!: ObjectID;
  10.   @Column()
  11.   url!: string;
  13.   @Column()
  14.   content!: string;
  16.   @Column()
  17.   email!: string;
  19.   @Column()
  20.   create!: Date;
  22. }

实现Controller类

  1. // src/controllers/Post.ts
  2. import { Context, Next } from 'koa';
  3. import { getManager } from 'typeorm';
  4. import { prefix, get, post } from '../core/Decorators';
  6. import { Post } from '../entity/Post';
  8. @prefix('/post') // 期望有个前缀约束 /post/list /post/add
  9. export default class PostController {
  10.   @get('/list')
  11.   async List (ctx: Context) {
  12.     ctx.body = 'list'
  13.   }
  14.   @post('/add')
  15.   async Add (ctx: Context) {
  16.     ctx.body = 'add'
  17.   }
  18. }

创建文件后，就发现 prefix ， get ， post 都标红了。现在来实现这些方法。

  1. // src/core/Decorators.ts
  2. import 'reflect-metadata';
  3. import Router from 'koa-router';
  5. const router = new Router();
  7. // 定义一个http请求的枚举类型
  8. export enum HttpMethods {
  9.   GET = 'get',
  10.   POST = 'post',
  11.   PUT = 'put',
  12.   DEL = 'del',
  13.   All = 'all'
  14. }
  16. // 前缀装饰器，类型是类装饰器
  17. export function prefix (path: string): ClassDecorator {
  18.   return (target: Function) => {
  19.     // 把前缀存起来
  20.     Reflect.defineMetadata('prefix', path, target);
  21.   };
  22. }
  24. // 用工厂生成http请求装饰器 post get等
  25. export function httpRequestDecorator (method: HttpMethods) {
  26.   return function (path: string) {
  27.     return function (target: any, key: string) {
  28.       Reflect.defineMetadata('path', path, target, key);
  29.       Reflect.defineMetadata('method', method, target, key);
  30.     };
  31.   };
  32. }
  34. export const get = httpRequestDecorator(HttpMethods.GET);
  35. export const post = httpRequestDecorator(HttpMethods.POST);
  36. export const put = httpRequestDecorator(HttpMethods.PUT);
  37. export const del = httpRequestDecorator(HttpMethods.DEL);
  38. export const all = httpRequestDecorator(HttpMethods.All);
  40. // 挂载路由
  41. export function getRouter (): Router {
  42.   return router;
  43. }
  45. export class AppRouter {
  46.   router: Router;
  48.   constructor () {
  49.     this.router = getRouter();
  50.   };
  52.   mount (controller: Function) {
  53.     const prefix = Reflect.getMetadata('prefix', controller);
  54.     const keys = Object.keys(controller.prototype)
  55.     keys.forEach(key => {
  56.       const path: string = Reflect.getMetadata('path', controller.prototype, key);
  57.       const method: HttpMethods = Reflect.getMetadata('method', controller.prototype, key);
  58.       const hanlder = controller.prototype[key];
  59.       if (path && method && hanlder) {
  60.         router[method](prefix + path, hanlder);
  61.       }
  62.     })
  63.     return this;
  64.   };
  65. }
  1. // src/router/index.ts
  2. import { AppRouter } from '../core/Decorators';
  3. import Post from '../controllers/Post';
  5. const appRouter = new AppRouter();
  7. appRouter.mount(Post);
  9. export default appRouter.router;
  1. // src/app.ts
  2. import path from 'path';
  3. import Koa from 'koa';
  4. import koaStatic from 'koa-static';
  5. import bodyParser from 'koa-bodyparser';
  7. import { createConnection } from 'typeorm';
  8. import { mongoOptions } from './config/mongodb';
  10. import router from './router/index'; // 加入路由
  12. createConnection(mongoOptions).then(async () => { // 创建数据库连接
  14.   const app = new Koa();
  16.   // Middlewares
  17.   app.use(bodyParser());
  18.   app.use(koaStatic(path.join(__dirname, '../public')));
  20.   app.use(router.routes()).use(router.allowedMethods()); // 挂载到APP上
  22.   app.listen(3000, () => {
  23.     console.log('application is running on port 3000');
  24.   })
  25. }).catch((error: any) => console.log('TypeORM connection error: ', error));

OK，现在跑一下服务。[http://localhost:3000/post/list](http://localhost:3000/post/list) 看到返回了list字样。

连上数据库操作一下

修改 src/controllers/Post.ts 

  1. // src/controllers/Post.ts
  2. import { Context, Next } from 'koa';
  3. import { getManager } from 'typeorm';
  4. import { prefix, get, post } from '../core/Decorators';
  6. import { Post } from '../entity/Post';
  8. @prefix('/post') // 期望有个前缀约束 /post/list /post/add
  9. export default class PostController {
  10.   @get('/list')
  11.   async List (ctx: Context) {
  12.     const postRepository = getManager().getRepository(Post);
  13.     const posts = await postRepository.find();
  14.     ctx.body = posts;
  15.   }
  16.   @post('/add')
  17.   async Add (ctx: Context) {
  18.     const data = ctx.request.body || {};
  19.     const postRepository = getManager().getRepository(Post);
  20.     data.create = new Date()
  21.     try {
  22.       const res = await postRepository.save(data);
  23.       ctx.body = {
  24.         code: 0,
  25.         data: res
  26.       }
  27.     } catch (err) {
  28.       ctx.body =  {
  29.         code: 1,
  30.         data: err
  31.       }
  32.     }
  33.   }
  34. }

然后用postman 测试一下接口，完美！！！

现在添加用户的增删改查的功能，只需要分3步走：

  1. 创建一个表结构（entity）
  2. 创建一个controller
  3. 在src/router/index.ts 引入并挂载

可以尝试再添加一个controller。

解决问题2和1

仔细思考了下，这2个问题使用静态类型检查是做不到的，同时也不是问题，最多是个注释，这个是前端思维与后端思维的不一致导致的。

  1. 只有在代码运行时，才可能知道用户输入的参数是什么。静态检查是代码与代码之间的调用，角色是程序员和程序员之间，而不是用户与程序员之间。
  2. 输出的数据格式一致，是指的前端和后端进行数据交互时的约定，故而只能用接口文档来约束，代码本身没有办法约束。
  3. 问题1和2的最终解决方案是用接口文档来解决。

3.typescript实现KOA路由.mp4 (61.42MB)