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
}
相关推荐
@@@@@@@@547 小时前
JavaScript 的缺点与 TypeScript 的弥补
开发语言·javascript·typescript
用户0934077735149 小时前
HarmonyOS WPS Open SDK 实践:最小打开闭环与 enableEdit 分支处理
typescript·harmonyos
柯克七七1 天前
我把 bug 修得太干净了,测试组以为这个模块本来就没问题
前端·javascript·typescript
退休倒计时1 天前
【每日一题】LeetCode 39. 组合总和 TypeScript
算法·leetcode·typescript
yyt3630458411 天前
KlineChartQuant Tooltip 高频交互 200FPS 性能优化完整复盘
前端·经验分享·性能优化·typescript·vue·交互·chrome devtools
用户0934077735141 天前
HarmonyOS WPS Open SDK 实践:办公审批附件「打开—编辑—回传」代码实现
typescript·harmonyos
Flynt1 天前
TypeScript 5.8 让我少踩了一个大坑,顺手再聊聊 --erasableSyntaxOnly
前端·javascript·typescript
退休倒计时2 天前
【每日一题】LeetCode 17. 电话号码的字母组合 TypeScript
算法·leetcode·typescript
无情的西瓜皮3 天前
MCP 协议实战:从零搭建一个 MCP 服务器(Node.js 版)
vue.js·人工智能·typescript·node.js
退休倒计时3 天前
【每日一题】LeetCode 78. 子集 TypeScript
算法·leetcode·typescript