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
}
相关推荐
Bl_a_ck11 小时前
开发环境(Development Environment)
开发语言·前端·javascript·typescript·ecmascript
菜鸟una18 小时前
【layout组件 与 路由镶嵌】vue3 后台管理系统
前端·vue.js·elementui·typescript
浪裡遊2 天前
Typescript中的对象类型
开发语言·前端·javascript·vue.js·typescript·ecmascript
从味书2 天前
安装typescript时,npm install -g typescript报错
javascript·typescript·npm
風吹过3 天前
A* (AStar) 寻路
typescript·cocos2d
geovindu4 天前
vue3: pdf.js 2.16.105 using typescript
javascript·vue.js·typescript·pdf
geovindu4 天前
vue3: pdf.js5.2.133 using typescript
javascript·vue.js·typescript·pdf
-Camellia007-5 天前
TypeScript学习案例(1)——贪吃蛇
javascript·学习·typescript
Jenna的海糖5 天前
ts axios中报 Property ‘code‘ does not exist on type ‘AxiosResponse<any, any>‘
前端·vue.js·react.js·typescript
代码哈士奇6 天前
认识中间件-以及两个简单的示例
后端·中间件·typescript·nodejs·nest