vue3+ts项目中使用mockjs

简介: vue3+ts项目中使用mockjs

前后端分离的开发模式,前端需要向后端请求数据(ajax请求),但实际开发过程中,前后端会约定一份接口文档,但前后端开发进度并不一致,当后端没有完善接口功能时,前端需要在本地模拟数据返回,此时需要使用到mockjs。

安装mock
npm install mockjs --save-dev
创建mock文件夹
mock下创建index.ts、types.ts 以及你需要使用到的模块的.ts文件。

mock文件夹

inde.ts文件代码:

import Mock from 'mockjs'
import {
    MockParams } from './types'
import api from './api'

// 需要遍历的请求
const mocks = [...api]

// 设置200-2000毫秒延时请求数据
Mock.setup({
   
  timeout: '200-2000'
})

// 接口拦截
export function mockRequest() {
   
  let i: MockParams
  for (i of mocks) {
   
    Mock.mock(new RegExp(i.url), i.type || 'get', i.response)
  }
}

types.ts文件代码:

// 定义参数类型
export interface MockParams {
   
  url: string
  type: string
  data?: any
  params?: any
  response(option?: any): Record<string, unknown>
}

api.ts文件代码:

const tokens = {
   
  admin: {
   
    password: 123456,
    token: 'admin-token'
  },
  editor: {
   
    password: 123456,
    token: 'editor-token'
  }
}

// get请求从config.url获取参数,post从config.body中获取参数
function paramObj(url) {
   
  const search = url.split('?')[1]
  if (!search) {
   
    return {
   }
  }
  return JSON.parse(
    '{"' +
      decodeURIComponent(search)
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"') +
      '"}'
  )
}

const api = [
  // 登陆接口
  {
   
    url: '/user/login',
    type: 'get',
    response: (config) => {
   
      const {
    username } = paramObj(config.url)
      const token = tokens[username].token
      if (token) {
   
        return {
   
          code: 0,
          message: '操作成功',
          data: {
   
            token: token
          }
        }
      }
      return {
   
        code: 1,
        message: '用户信息错误,请重试~',
        data: {
   }
      }
    }
  }
]
export default api

最后在main.ts引入

/**
 * 测试环境下 引入自定义的mockRequest
 * 因为mockRequest不是默认导出的:export default{}
 * 所以引入时需要加大括号,这种可以引入多个
 */
if (process.env.NODE_ENV === 'development') {
   
  const {
    mockRequest } = require('../mock')
  mockRequest()
}

在shims-vue.d.ts中添加声明

declare module 'mockjs'
相关文章
|
4天前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
81 59
|
4天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
12 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
13 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
9 2
|
4天前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
9 0
|
5天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
4天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
20小时前
|
JavaScript
理解 Vue 的 setup 应用程序钩子
【10月更文挑战第3天】`setup` 函数是 Vue 3 中的新组件选项,在组件创建前调用,作为初始化逻辑的入口。它接收 `props` 和 `context` 两个参数,内部定义的变量和函数需通过 `return` 暴露给模板。`props` 包含父组件传入的属性,`context` 包含组件上下文信息。`setup` 可替代 `beforeCreate` 和 `created` 钩子,并提供类似 `data`、`computed` 和 `methods` 的功能,支持逻辑复用和 TypeScript 类型定义。
19 11
|
4天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
下一篇
无影云桌面