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
}
相关推荐
鲸鱼146665707541910 小时前
Screeps TypeScript 教程:使用 tsup 解决模块加载问题并实现自动化部署
typescript
张志鹏PHP全栈1 天前
TypeScript 第四天,TypeScript的编译选项(一)
前端·typescript
Toomey1 天前
别再用 Parameters 乱推断了!vue-i18n 封装 t 函数的正确姿势
typescript
郑板桥301 天前
ts学习1
学习·typescript
前端拿破轮1 天前
女朋友要和我分手?!!居然是因为交不出赎金信,不会用哈希表😭😭😭
算法·leetcode·typescript
知识分享小能手2 天前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
张志鹏PHP全栈2 天前
TypeScript 第三天,TypeScript中的类型(二)
typescript
成遇3 天前
Eslint基础使用
javascript·typescript·es6
张志鹏PHP全栈3 天前
TypeScript 第二天,TypeScript中的类型(一)
typescript
極光未晚3 天前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript