umi 配置mock

在根目录下直接新建mock文件夹

在mock文件夹下新增ts文件,导出对应的mock数据,例如

import Mock from 'mockjs'

export default {
  'GET /api/tags': Mock.mock({
    'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
  }),
}

调用mock数据

service({
  url: '/api/tags',
  data: params,
})
umi配置mock 代理proxy配置beseUrl
开启mock 关闭关闭 配置 /
关闭mock

本地

开启代理

将localhost代理到devUrl

关闭 配置 /
关闭开启 配置 devUrl
使用umi配置,{mock:false},然后使用代理或者baseUrl
dev环境开启或关闭,build的时候忽略开启 配置devUrl
优先级:baseUrl > 代理Proxy > mock

如果想使用mock,一定要关闭代理和baseUrl配置!!!

如果不想使用mock,直接开启代理或者baseUrl配置就好了。或者在umi的配置里面关闭mock

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
umi中使用mock传参的方法如下: 1. 首先,需要在src目录下创建一个api文件夹,用来管理整个项目的接口数据。在api文件夹下创建index.js文件作为入口请求文件。 2. 导入Mock模块:`const Mock = require('mockjs');` 3. 使用Mock.mock()方法来模拟请求数据。例如,如果想模拟一个GET请求传递参数,可以使用以下代码: ``` Mock.mock('/api/brand', 'get', function (options) { // 通过options.body获取传递的参数 const { brandId } = JSON.parse(options.body); // 进行相应的处理,返回模拟的数据 return Mock.mock({ status: 200, message: '请求成功', data: { brandId: brandId, brandName: '@cname', }, }); }); ``` 4. 通过以上步骤,就可以在umi中使用mock传递参数了。 需要注意的是,在使用POST请求传递参数时,需要将参数进行JSON格式化,然后将其作为body传递给mock的接口。 参考文献: 一般情况是在src文件夹下创建api文件夹,用来管理整个项目的接口数据,然后我们需要接着在api文件夹下创建index.js,作为入口请求文件 const Mock = require('mockjs'); //格式: Mock.mock( url, post/get , 返回的数据); 下面的userInfo是指mock目录下的json目录下的userInfo.json文件 Mock.mock('/user/userInfo', 'get', require('./json/userInfo.json')); Mock.mock('/api/addgoods', 'post', require('./json/userInfo.json')); // 下边这个模拟post请求也行 /*Mock.mock('/api/addgoods', 'post', function (option) { let $name=JSON.parse(option.body).name; if($name){ return Mock.mock({ status: 200, message: '提交成功!!!' }) }else{ return Mock.mock({ status: 400, message: '未提交参数' }) } })*/ 引用:post和put请求传参形式相同 import request from '../utils/request'; var qs = require('qs'); export const getBrand = params => { console.log('getBrand', { ...params }); // get请求传参,参数要拼接在url后面 // 此处的“ ? ”一定要加上 // qs.stringify()会将参数转成 a='1'&b='2' 的形式,如果不使用qs库可手动转换 return request('/api/brand?' qs.stringify(params), { method: 'GET', }); }; export const deleteBrand = params => { // 同get请求 return request('/api/brand?' qs.stringify(params), { method: 'DELETE' }) } export const updateBrand = params => { // post请求 return request(`/api/brand`, { // 此处一定要JSON格式化,不然mock里同样接收不到数据 body: JSON.stringify(params), method: 'POST', }) } mock/test.js 。 引用:使用方法如下: 1、安装mockjs npm install mockjs 2、在vue项目中mock创建文件夹 。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue中使用Mock模拟get和post请求](https://blog.csdn.net/efew212efe/article/details/124493618)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [umi request和mockmock文件夹下的js文件)请求传递和接收参数](https://blog.csdn.net/weixin_41786574/article/details/107759491)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值