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'
相关文章
|
2天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
1天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
1天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
1天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
4天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
14 2
|
4天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
11 0
|
5天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
2天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
20 9
|
1天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
1天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。