Mangojs快速上手 —— (二)处理一个请求

🍎【处理一个请求】:1分钟教会你如何使用Mango处理一个请求🚀


🌳@Controller控制器如何使用

Mango 的底层是使用Elysia 构建的,每一个@Controller装饰器对应着一个Elysia实例。如果你没有了解过Elysia,没有关系,下面说的是人话了。

@Controller控制器可以理解为是一个组长管理着下面的请求,所有的请求都需要编写在被@Controller装饰的类中。

@Controller的配置项

ts 复制代码
// 使用方式
import { Controller } from 'mango-core'
import type { Context } from '..'

@Controller({
  prefix: '/test',
  detail: { tags: ['测试'] }
})
export default class DemoController {
}

🔥 了解请求装饰器

  • @Get: get请求
  • @Post:post请求
  • @Put:put请求
  • @Delete: delete请求
  • @Patch:patch请求
  • @All:匹配所有请求
ts 复制代码
// 以上一章的demo为例
import { Controller, Get } from 'mango-core'
import type { Context } from '..'

@Controller({
  prefix: '/test',  // 当前控制器的路径前缀为/test,即所有的路由前都加一个/test
  detail: { tags: ['测试'] }
})
export default class DemoController {
  @Get('', { detail: { description: '测试' } })
  async hello(context: Context) {
    return 'Hello Mango!'
  }
}

到这里我们就实现了一个get请求,请求http://127.0.0.1:8899/test可以看到Hello Mango

🍎 获取query中的参数

ts 复制代码
import { Controller, Get } from 'mango-core'
import type { Merge } from 'mango-types'
import { t } from 'elysia'
import type { Context } from '..'

// 定义请求结构
const HelloReq = t.Object({
  name: t.String({
    description: '名字'
  }),
  age: t.Number({
    description: '年龄'
  })
})

@Controller({
  prefix: '/test',
  detail: { tags: ['测试'] }
})
export default class DemoController {
  @Get('', {
    detail: { description: '测试' },
    query: HelloReq // 设置请求结构
  })
  async hello(context: Merge<Context, { query: typeof HelloReq.static }>) {
    return `Hello ${context.query.name} Your name is ${context.query.age}`
  }
}

那这样我们就获取到了参数,但我们访问http://127.0.0.1:8899/test?name=张三&age=18 时,会看到:Hello 张三 Your name is 18

🍎 获取param参数

ts 复制代码
import { Controller, Get } from 'mango-core'
import type { Merge } from 'mango-types'
import { t } from 'elysia'
import type { Context } from '..'

// 定义请求结构
const HelloReq = t.Object({
  name: t.String({
    description: '名字'
  }),
  age: t.Number({
    description: '年龄'
  })
})

@Controller({
  prefix: '/test',
  detail: { tags: ['测试'] }
})
export default class DemoController {
  @Get(':name/:age', {
    detail: { description: '测试' },
    params: HelloReq // 设置请求结构
  })
  async hello(context: Merge<Context, { params: typeof HelloReq.static }>) {
    return `Hello ${context.params.name} Your name is ${context.params.age}`
  }
}

那这样我们就获取到了参数,但我们访问http://127.0.0.1:8899/test/Tom/18 时,会看到:Hello Tom Your name is 18

🍎 获取请求体参数

ts 复制代码
import { Controller, Post } from 'mango-core'
import type { Merge } from 'mango-types'
import { t } from 'elysia'
import type { Context } from '..'

// 定义请求结构
const HelloReq = t.Object({
  name: t.String({
    description: '名字'
  }),
  age: t.Number({
    description: '年龄'
  })
})

@Controller({
  prefix: '/test',
  detail: { tags: ['测试'] }
})
export default class DemoController {
  @Post('', {
    detail: { description: '测试' },
    body: HelloReq // 设置请求结构
  })
  async hello(context: Merge<Context, { body: typeof HelloReq.static }>) {
    return {
      msg: `Hello ${context.body.name} Your name is ${context.body.age}`,
      name: context.body.name,
      age: context.body.age
    }
  }
}

当我们访问:

bash 复制代码
curl --location --request POST 'http://127.0.0.1:8899/test' \ --header 'User-Agent: Apifox/1.0.0 (https://apifox.com)' \ --header 'Content-Type: application/json' \ --header 'Accept: */*' \ --header 'Host: 127.0.0.1:8899' \ --header 'Connection: keep-alive' \ --data-raw '{ "name": "王五", "age": 18 }'

的时候会返回

json 复制代码
{
    "msg": "Hello 王五 Your name is 18",
    "name": "王五",
    "age": 18
}
相关推荐
MiyueFE19 小时前
🚀🚀五个前端开发者都应该了解的TS技巧
前端·typescript
ttod_qzstudio21 小时前
基于typescript严格模式以实现undo和redo功能为目标的命令模式代码参考
typescript·命令模式
张志鹏PHP全栈21 小时前
TypeScript 第十天,TypeScript面向对象之Class(二)
前端·typescript
慧一居士1 天前
ESLint 完整功能介绍和完整使用示例演示
前端·javascript·typescript
enzeberg2 天前
TypeScript 工具类型(Utility Types)
typescript
難釋懷2 天前
TypeScript类
前端·typescript
杰哥焯逊2 天前
基于TS封装的高德地图JS APi2.0实用工具(包含插件类型,基础类型)...持续更新
前端·javascript·typescript
JohnYan2 天前
Bun技术评估 - 18 Bun 1.2(下)
javascript·后端·bun
JohnYan3 天前
Bun技术评估 - 16 Bun 1.2(上)
javascript·后端·bun
工业甲酰苯胺3 天前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式