antd pro中mock处理带有参数的请求

antd pro中mock处理带有参数的请求
const getTest = (req, res) =>{
  const {groupCategory} = req.query;
  // 此处打印的日志在浏览器看不到,并且也并不能在浏览器debuger,为什么呢?善于思考的留言讨论交流
  console.log(groupCategory);
  
  if(groupCategory === '1'){
    res.json(
      {"code":0,"msg":"success","data":[]}
    )
  }else if(groupCategory === '2'){
    res.json(
      {"code":0,"msg":"success","data":[]}
    )
  }else if(groupCategory === '3'){
    res.json(
      {"code":0,"msg":"success","data":[]}
    )
  }


};


export default {

  'GET /api/getTest': getTest,


Ant Design Pro v4 是一个基于 Ant Design 设计语言的企业级后台前端/设计解决案,其包含了一些用于数据模拟的 mock 功能。在 Pro v4 mock 数据是通过 umi-request 库来实现的。 要在 Ant Design Pro v4 使用 mock 功能,你可以按照以下步骤进行操作: 1. 在 `src` 目录下创建一个名为 `mock` 的文件夹。 2. 在 `mock` 文件夹创建一个名为 `api.ts` 的文件,用于编写接口的 mock 数据。 3. 在 `api.ts` 文件,你可以使用 umi-request 提供的 `extend` 法来创建一个请求实例,并通过 `mock` 法来定义接口的 mock 数据。例如: ```typescript import { extend } from 'umi-request'; const request = extend({ prefix: '/api', timeout: 1000, }); export default { 'GET /api/user': { id: 1, name: 'John Doe', }, 'POST /api/login': (req, res) => { const { username, password } = req.body; if (username === 'admin' && password === '123456') { res.send({ status: 'ok', message: 'Login successful!', }); } else { res.send({ status: 'error', message: 'Invalid username or password!', }); } }, 'PUT /api/user/:id': (req, res) => { const { id } = req.params; const { name } = req.body; res.send({ id, name, }); }, }; ``` 在上面的例子,我们定义了三个接口的 mock 数据:`GET /api/user`、`POST /api/login` 和 `PUT /api/user/:id`。 4. 在 `src` 目录下的 `models` 文件夹创建一个名为 `mock.ts` 的文件,并在该文件导入 `api.ts` 定义的 mock 数据。例如: ```typescript import api from '@/mock/api'; const enableMock = true; // 是否开启 mock 功能 if (enableMock) { Object.keys(api).forEach((key) => { const [method, path] = key.split(' '); const [mockMethod, mockPath] = method.split('_'); if (mockMethod && mockPath) { umiMocker(mockMethod.toUpperCase(), mockPath, api[key]); } }); } ``` 在上面的例子,我们通过遍历 `api.ts` 定义的 mock 数据,并使用 `umiMocker` 法来注册 mock 接口。 5. 在 `src/app.tsx` 文件,将 `import './mock';` 添加到文件开头,以确保 mock 数据在应用启动时被加载。例如: ```typescript import './mock'; ``` 完成以上步骤后,当你在开发环境下运行 Ant Design Pro v4 时,接口请求将会被拦截并返回 mock 数据。 请注意,以上只是一个简单的示例,你可以根据自己的需求来编写更复杂的 mock 数据。另外,需要注意的是,在生产环境下是不会启用 mock 功能的,mock 数据只会在开发环境生效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liuyunshengsir

微信:lys20191020

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值