使用mock插件生成模拟数据

5 篇文章 0 订阅

Mock数据:模拟数据

mockjs官网:http://mockjs.com/
mockjs官方文档:https://github.com/nuysoft/Mock/wiki/Getting-Started

具体使用方法
1.第一步 安装mockjs
命令:

npm install mockjs

2.第二步 创建一个mock目录生成mock数据

例如:course.js
import Mock from "mockjs";

//mock课程数据
var result=Mock.mock({
  code: 200,
  msg: "操作成功",
  data: {
    current_page: 1,
    last_page: 18,
    total: 178,
    "list|10": [
      {
        id: "@id",  //模拟id
        "price|100-200.1-2": 100, //模拟小数,在计算机中也称浮点数
        "has_buy|1": [0, 1], //模拟状态值,0,1,2,
        title: "@ctitle",  //模拟中文标题
        address: "@county(true)",  //模拟省市县
        "teachers_list|1": [
          {
            course_basis_id: "@id",
            id: "@id",
            teacher_avatar: "@image('150x120', '#ff0000', 'gem')",  //模拟图片
            teacher_name: "@cname"  //模拟中文姓名
          }
        ]
      }
    ]
  }
});


export default result;

创建mock的入口文件index.js,并配置请求的接口地址,提交方式,返回的假数据

import Mock from 'mockjs'
//导入的模拟数据
import courseData from "./course";

/**
 * Mock.mock( rurl, rtype, template )
 * rurl:请求的接口地址
 * rtype:提交方式
 * template:返回数据
 */

Mock.mock("http://www.gem.com/coureslist", "get", courseData);

3.​ 第三步:将模拟的数据注入到main.js

//注入mock
import './mock'

4.第四步:在要请求的组件中请求数据

 axios.get('http://www.gem.com/coureslist').then(res=>{
        console.log(res)
 })

另外:easy-mock:基于mockjs生成在线假数据
尝试一下使用嗯

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 很高兴为您提供帮助。VUE3 setup使用mock的步骤如下:1. 安装VUE3;2. 安装Vue CLI;3. 安装mock插件;4. 在项目根目录中新建mock文件夹;5. 在mock文件夹下建立mock数据;6. 在main.js文件中设置mock数据;7. 运行VUE3项目。 ### 回答2: Vue 3 的 setup 使用 mock 可以通过创建一个数据的函数来模拟 API 请求。在 Vue 3 的组件中,可以使用 `setup` 函数来替代以前的 `created` 或 `mounted` 钩子函数。 首先,我们需要在项目中安装并引入 `axios` 或其他用于发送网络请求的库。在 `script` 标签中,使用 `import` 引入 `axios`: ```javascript import axios from 'axios'; ``` 接下来,在 `setup` 函数中创建一个模拟请求的函数来返回数据。可以使用 JavaScript 的 `Promise` 对象模拟异步请求,并在 `then` 方法中返回数据。例如,我们创建一个名为 `getMockData` 的函数: ```javascript import { reactive } from 'vue'; export default { setup() { const state = reactive({ // 存放数据的对象 data: {}, // 模拟请求的函数 getMockData() { // 发送异步请求 axios.get('http://example.com/api/data') .then(response => { // 模拟数据的获取 state.data = response.data; }) .catch(error => { console.log(error); }); }, }); return state; }, }; ``` 在上述示例中,我们首先使用 `reactive` 函数创建了一个响应式对象 `state`,用来存放数据。然后,在 `getMockData` 函数中调用 `axios.get` 方法发送异步请求,并将数据存入 `state.data` 中。 最后,我们可以在模板中通过插值表达式或其他方式使用数据。例如,在模板中输出数据的 `name` 字段: ```html <template> <div> <p>{{ data.name }}</p> <button @click="getMockData">获取数据</button> </div> </template> ``` 在上述示例中,我们使用了插值表达式 `{{ data.name }}` 来输出数据的 `name` 字段。此外,我们还定义了一个按钮,点击按钮时会调用 `getMockData` 函数,从而模拟请求并更新数据使用以上方法,我们可以在 Vue 3 的组件中使用 `setup` 函数来使用数据模拟 API 请求。希望这个回答对你有帮助! ### 回答3: Vue 3 中的 setup 选项可以用来初始化组件的响应式状态、注册事件监听器以及执行其他的一些准备工作。如果我们想要在开发过程中使用模拟数据mock),可以通过 setup 函数来实现。 首先,我们需要引入一个用于生成模拟数据的库,比如 mockjs。可以通过 npm 安装该库: ```shell npm install mockjs ``` 然后,在 Vue 组件中,我们可以使用 import 导入 mockjs: ```javascript import mockjs from 'mockjs'; ``` 接下来,我们可以在 setup 函数中使用 mockjs 来生成模拟数据。我们可以将模拟数据存储在一个响应式的变量中,然后在模板中使用这些数据。 ```javascript import { ref } from 'vue'; import mockjs from 'mockjs'; export default { setup() { const mockData = ref([]); const fetchData = () => { // 使用 mockjs 生成模拟数据 const data = mockjs.generate({ 'list|5': [ { 'id|+1': 1, 'name': '@cname', 'age|18-60': 18, 'address': '@county(true)' } ] }); // 将模拟数据赋值给响应式变量 mockData.value = data.list; }; return { mockData, fetchData }; } } ``` 在模板中,我们可以通过 {{ }} 插值语法来使用模拟数据: ```html <template> <div> <button @click="fetchData">获取模拟数据</button> <ul> <li v-for="item in mockData" :key="item.id"> {{ item.name }},{{ item.age }}岁,{{ item.address }} </li> </ul> </div> </template> ``` 以上代码中,我们定义了一个 mockData 的响应式变量和一个 fetchData 函数。当点击按钮时,会调用 fetchData 函数来生成模拟数据并将其赋值给 mockData。在模板中,我们通过 v-for 指令遍历 mockData 中的每一项,并使用插值语法来展示模拟数据的内容。 这样,在开发过程中,我们就可以使用 Vue 3 的 setup 选项以及 mockjs 来实现模拟数据使用

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值