【无标题】mock从入门-会使用的使用

关于mock模拟数据
1.下载mockjs第三方包
2.一般在utils文件夹下面创建mock文件夹下再创建mock.js ,填写假数据
3.在mock.js内引用库


4.在main.js内导入



5.定义好假数据,如下



Mock.mock('URL路径','请求方式',()=>{ return 定义返回的数据 }) ---无参数情况
Mock.mock('URL路径','请求方式',(options)=>{ return 定义返回的数据 }) ---有参数,options内可以拿到路径和body query等参数,在实际页面定义假的参数传参即可 。
6.在页面发送请求,需要导入axios第三方包
axios.请求方式('请求路径','参数').then().catch()
 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 storybook-addon-mock,你需要按照以下步骤进行设置: 1. 安装 storybook-addon-mock ``` npm install storybook-addon-mock --save-dev ``` 2. 在你的 Storybook 配置文件中导入和添加 addon 在你的 Storybook 配置文件中,导入 storybook-addon-mock 并将其添加到 addons 列表中,例如: ``` import { withMockProvider } from 'storybook-addon-mock'; export const decorators = [withMockProvider]; export const parameters = { mockConfig: { 'default': { 'user': { 'id': 1, 'name': 'John Doe', 'email': 'john.doe@example.com' } } } }; ``` 在上面的例子中,我们将 withMockProvider 添加到了 decorators 列表中,并定义了一个名为 'default' 的模拟数据场景和一个名为 'user' 的模拟数据对象。 3. 在故事中使用模拟数据 在你的故事中,你可以使用 @mock 注解来获取模拟数据,例如: ``` import React from 'react'; import { mock } from 'storybook-addon-mock'; import MyComponent from './MyComponent'; export default { title: 'MyComponent', component: MyComponent, }; export const Default = () => { const user = mock('default', 'user'); return <MyComponent user={user} />; }; ``` 在上面的例子中,我们使用 @mock 注解来获取我们之前定义的 'user' 模拟数据,并将其传递给 MyComponent 组件进行渲染。 4. 使用 Mocks 面板管理模拟数据 在 Storybook UI 中,你可以使用 Mocks 面板来管理你的模拟数据。在 Mocks 面板中,你可以查看和编辑你已定义的模拟数据场景和对象。 总的来说,storybook-addon-mock 是一个非常有用的插件,可以帮助你在开发过程中快速创建和管理模拟数据,并将其集成到 Storybook 中以进行测试和演示。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值