mockjs的简单介绍,安装使用

程序

  1. 对前端来说,日常工作中需要访问后端接口,并展示接口内的数据
  2. 对后端来说,需要负责处理业务逻辑,访问数据库中的数据,并返回给前端,除此之外,还需要对数据库进行存储数据

为什么要使用mockjs

市面上很多公司,后端还没有做好接口文档(前端就不需要等待后端实现接口后再写代码)
前端乐意通过mockjs参考接口文档自己先模拟数据
写业务代码,等待后端准备好,再用后端接口替换自己写的模拟数据

优点

可以实现前后端同时开发,方便程序员

mockjs的作用

生成随机数据,拦截Ajax请求

mockjs如何安装及使用

第一步:安装

npm i kockjs -D

第二步:使用

import Mock from 'mockjs'
Mock.mock(url,data)

第三步:在main.js中导入

import '@/utils/mock'

Mockjs的三种形式

  1. mock(url,data)
  2. mock(url,method,data)
  3. mock(url,method,function(option){return data})

注意:
url:可以是字符串,也可以是正则表达式
method:post,get,put,delete
option内部:(url请求地址、method请求方法、body请求参数)

mockjs可以用来做随机

下面简单列举几种

  1. 数字

    整数:“num|1-100”
    小数点:“price|25-50.2-3”:1

  2. 字符串随机

    文字"score|1-5":“⭐”
    中文本标题:“title”:“@ctitle(8,14)”
    中文段落:“description”:“@cparagraph”

  3. 布尔值:“isLog|1”: true

  4. 数组:“friend|2-10”: [“小红”, “小蓝”, “小黄”](输出2-10遍)

  5. 对象:“des|2”: { “eye”: 1, “hand”: 2, “leg”: 2 }

  6. 其他常用的如图:

在这里插入图片描述
其他还有很多其他的随机,
具体请参考mockjs官网:http://mockjs.com/examples.html

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Mock.js 是一个用于模拟 HTTP 请求和数据的 JavaScript 库,它可以帮助你在单元测试或集成测试中替换真实的 API 调用。在 TypeScript 和 Vue.js 中全局使用 Mock.js,你可以以下几个步骤来设置: 1. **安装依赖**: 使用 npm 或 yarn 安装 `mockjs` 和可能的 TypeScript 配置库,如 `@types/mockjs`: ```bash npm install mockjs typescript @types/mockjs --save-dev # 或者 yarn add mockjs typescript @types/mockjs --dev ``` 2. **创建全局mock实例**: 在你的项目入口文件(通常为 `main.ts`)中,导入并配置 mockjs: ```typescript import * as mock from 'mockjs'; // 创建全局mock对象 const mockData = mock.data; ``` 3. **在Vue组件中使用mock数据**: 在你的 Vue 组件里,你可以使用 `mockData` 来生成随机数据或定义特定的响应: ```typescript export default { data() { return { apiResponse: mockData('{"status":0,"msg":"成功","data":[]}', { status: 200 }) // 假设这是一个 API 调用 }; }, }; ``` 这里 `mockData` 接收一个字符串模板(JSON格式)和可选的选项对象,用于定制返回的数据。 4. **在测试中使用mock数据**: 在测试文件中,你可以继续使用这个全局的 mock 数据,例如在 `vue-test-utils` 或 `jest` 测试框架下: ```typescript import { shallowMount } from '@vue/test-utils'; import YourComponent from '@/components/YourComponent.vue'; test('YourComponent mock test', async () => { const wrapper = shallowMount(YourComponent); expect(wrapper.vm.apiResponse).toEqual({ /*期望的数据格式*/ }); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值