Mock的基本使用

• 前言
• 一、官方文档
• 二、mock的简单使用：
• 二、搭配 vite 插件使用

做网站、成都网站设计,成都做网站公司-创新互联已向上1000家企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。

---

前言通过 Mock 我们可以便捷的生成大量模拟数据，有助于我们在前后端分离的开发模式中前端做网络请求测试。摆脱后端接口未给出时前端的数据只能自己不断写死数据的窘境； 下面中介绍Mock的基本使用和配合 vite插件实现更真实的请求响应

---

一、官方文档

1、MockJS

2、vite-plugin-mock

二、mock的简单使用：

项目结构：

mockJS博客
├─ .gitignore
├─ index.html
├─ package-lock.json
├─ package.json
├─ public
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  ├─ components
│  ├─ main.ts
│  ├─ mockTeat.ts
│  ├─ style.css
│  └─ vite-env.d.ts
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts

• 安装 Mock

npm i  mockjs -S

• 创建文件用以存储 mock 数据，以下创建文件 “src/mockTeat.ts” 举例：

import mockJS from "mockjs";

let data = mockJS.mock({success: true,
    // 随机生成100条数据，数据中包含id，name(随机中文名)，image(随机头像)
    // 更多数据占位符定义规范，可查阅官方文档 MockJS
    "data|100": [
        {"id|+1": 0,
            name: "@cname",
            image: mockJS.Random.image(),

        }
    ]
})

// 设置请求接口和请求方法进行拦截响应
mockJS.mock('/api/users', 'post', () =>{return data
})

• 导入 需要做拦截的 响应文件中，以下直接全局导入 main.ts中 举例：

import './mockTeat'

• 发送请求模拟：

• 效果：
  

注意：mock进行的拦截响应在浏览器的开发工具网络项中是 看不到 的

二、搭配 vite 插件使用

• 搭配 “vite-plugin-mock” 使用可以更真实的模拟请求，进行的拦截响应在浏览器的开发工具网络项中 看到

项目结构：

mockJS博客
├─ .gitignore
├─ index.html
├─ mock
│  ├─ mock.ts
│  └─ mockData
│     └─ home.ts
├─ package-lock.json
├─ package.json
├─ public
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  ├─ components
│  ├─ main.ts
│  ├─ style.css
│  └─ vite-env.d.ts
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts

• 安装 Mock 与 vite-plugin-mock

npm i  mockjs -S
npm i vite-plugin-mock -D

• 创建文件用以存储 mock 数据，以下创建文件 “mock” 举例：

1、mock/mockData/home.ts

import mockJS from "mockjs";

export const userList = mockJS.mock({success: true,
    "data|100": [
        {"id|+1": 0,
            name: "@cname",
            image: mockJS.Random.image(),
        }
    ]
})

2、mock/mock.ts

import {userList } from "./mockData/home";

module.exports = [
    {method: "post",
        url: '/api/users',
        response: ({body }) =>{return {userList
            }
        }
    }
]

• 在 “vite.config.ts” 中引入并配置插件：

import {defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({command, mode }) =>({plugins: [
    vue(),
    viteMockServe({  // 设置模拟.ts 文件的存储文件夹
      mockPath: 'mock',  
      // 设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能                     
      localEnabled: command === 'serve'      
    })
  ]
}))

• 发送请求模拟：

• 效果：
  
  

提示：文章到此结束，文章仅为个人学习记录，若有不足还请大家指出。

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

文章名称：Mock的基本使用-创新互联
URL分享：http://kswjz.com/article/iseds.html