11-Mock.js模拟接口数据

Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列

✅01-初始化 Vite 项目
✅02-配置 Vite2 环境变量
✅03-Vite2 配置及说明
✅04-Vue3 使用 SCSS
✅05-Vue3 路由配置
✅06-TypeScript 配置及说明
✅07-Vue3 使用 axios
✅08-Vue3 axios 对象封装
✅09-ESLint 配置及说明
✅10-ESLint 与 Prettier 集成配置及说明
✅11-Mock.js 模拟接口数据
✅12-Vite2 引入 Element-Plus 框架
✅13-渐变+透明样式实现清爽登录页
✅14-Element-Plus 实现后台管理系统布局
✅15-Pinia 实现 store 状态管理
✅16-Vue3 动态路由权限控制

---

源码地址：GitHub / 码云

---

Mock.js 模拟接口数据

🎯 目标

引入 Mock.js ，模拟生成后端数据。

😴 功课

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

• 根据数据模板生成模拟数据。
• 模拟 Ajax 请求，生成并返回模拟数据。
• 基于 HTML 模板生成模拟数据。

具体使用和配置 官方文档 很详细，并且也不难，我就不再重复一遍了。

🍸 准备

安装依赖

npm install -S mockjs @types/mockjs

调整文件&目录

在 src 目录下创建 mock 文件夹，用来存放 mock 文件。

mock 文件目录结构如下：

📁 src

----📁 mock

--------📁 sys

------------📄 user.ts

--------📄 index.ts

在 src 目录下创建 api 文件夹，用来存放 api 文件。

api 文件目录结构如下：

📁 src

----📁 api

--------📁 sys

------------📄 user.ts

添加 components/demos/Mock.vue 文件，用来测试 mock。

🌈 Coding

API 接口调用文件

在 /src/api/user.ts 编写后端 CRUD 接口调用方法：

import http from '@/utils/http/index'

export default {
  // ↓分页查询
  page: (params?: any) => {
    return http.get('/sys/user', params)
  },
  // ↓新增
  add: (data?: any) => {
    return http.post('/sys/user', data)
  },
  // ↓修改
  modify: (data?: any) => {
    return http.put('/sys/user', data)
  },
  // ↓删除
  del: (id: number | string, data?: any) => {
    return http.delete('/sys/user/' + id, data)
  },
}

Demo 组件

在 Mock.vue 中调用后台接口：

<template>
  <!-- ↓Mock请求demo -->
  <div>
    <h2>Mock请求</h2>
    <button @click="userPage">mock分页查询</button>
    <button @click="addUser">mock新增</button>
    <button @click="modifyUser">mock修改</button>
    <button @click="delUser">mock删除</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import userApi from '@/api/sys/user'

export default defineComponent({
  name: 'Mock',
  setup() {
    // ↓分页
    const userPage = () => {
      userApi.page({ current: 1, size: 10 }).then((response: any) => {
        console.log(response)
      })
    }
    // ↓新增
    const addUser = () => {
      userApi.add({ username: 'zhangsan', name: '张三', email: 'zhangsan@163.com' }).then((response: any) => {
        console.log(response)
      })
    }
    // ↓修改
    const modifyUser = () => {
      userApi.modify({ id: 2, username: 'lisi', name: '李四', email: 'lisi@163.com' }).then((response: any) => {
        console.log(response)
      })
    }
    // ↓删除
    const delUser = () => {
      userApi.del(2).then((response: any) => {
        console.log(response)
      })
    }

    return {
      userPage,
      addUser,
      modifyUser,
      delUser,
    }
  },
})
</script>

Demo 汇聚

将 Mock.vue 导入 Home.vue：

<template>
  <Env />
  <Router />
  <Axios />
  <Mock />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Env from '@/components/demos/Env.vue'
import Router from '@/components/demos/Router.vue'
import Axios from '@/components/demos/Axios.vue'
import Mock from '@/components/demos/Mock.vue'

export default defineComponent({
  name: 'Home',
  components: {
    Env,
    Router,
    Axios,
    Mock,
  },
})
</script>

Mock 数据

在 /src/mock/user.ts 中 mock user api 的数据，后端请求和 mock 匹配时，请求会被 Mock 拦截，代码如下：

import Mock from 'mockjs'

// ↓mock数据
const data = Mock.mock({
  'list|1-10': [
    {
      id: '@INCREMENT()',
      username: '@STRING("lower", 6, 24)',
      name: '@CNAME',
      email: '@EMIAL',
    },
  ],
})

export default [
  // ↓分页
  {
    url: new RegExp('/sys/user'),
    type: 'get',
    result: () => {
      return {
        code: 200,
        data: data.list,
        message: '请求成功',
      }
    },
  },
  // ↓新增
  {
    url: new RegExp('/sys/user'),
    type: 'post',
    result: (config: any) => {
      const obj = JSON.parse(config.body)
      obj.id = data.list.length + 1
      data.list.unshift(obj)
      return {
        code: 200,
        data: data.list,
        message: '新增成功',
      }
    },
  },
  // ↓修改
  {
    url: new RegExp('/sys/user'),
    type: 'put',
    result: (config: any) => {
      const obj = JSON.parse(config.body)
      for (let i = 0; i < data.list.length; i++) {
        const item = data.list[i]
        if (item.id === obj.id) {
          data.list[i] = obj
        }
      }
      return {
        code: 200,
        data: data.list,
        message: '修改成功',
      }
    },
  },
  // ↓删除
  {
    url: new RegExp('/sys/user'),
    type: 'delete',
    result: (config: any) => {
      const arr = config.url.split('/')
      const id = parseInt(arr[arr.length - 1])
      data.list = data.list.filter((item: any) => item.id !== id)
      return {
        code: 200,
        data: data.list,
        message: '删除成功',
      }
    },
  },
]

Mock 聚合

在 /src/mocks/index.ts 聚合 mock ，作为统一入口：

import Mock from 'mockjs'
import userMock from './sys/user'

userMock.forEach((item) => {
  Mock.mock(item.url, item.type, item.result)
})

引入 Mock

在 main.ts 中引入 所有mock：

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index'

import '@/mock/index'

createApp(App).use(router).mount('#app')

🎭 结果

• 页面效果
  
• 调用 CRUD 接口，请求被 Mock 拦截，控制台打印接口响应数据。
  
  
  
  

---

本文为博主原创文章，任何个人、团体、机构转载和摘录，请注明出处。