详解vue3结合ts项目中使用mockjs

 更新时间:2023年07月05日 14:44:59   作者:黑萝卜不黑  
这篇文章主要为大家介绍了vue3结合ts项目中使用mockjs示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前后端分离的开发模式

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

安装mock

npm install mockjs --save-dev

创建mock文件夹

mock下创建index.ts、types.ts 以及你需要使用到的模块的.ts文件。

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'

以上就是详解vue3结合ts项目中使用mockjs的详细内容,更多关于vue3+ts使用mockjs的资料请关注脚本之家其它相关文章!

相关文章

  • 基于Vue SEO的四种方案(小结)

    基于Vue SEO的四种方案(小结)

    这篇文章主要介绍了基于Vue SEO的四种方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 详解Vue中的基本语法和常用指令

    详解Vue中的基本语法和常用指令

    Vue.js 是一套构建用户界面的框架,**只关注视图层**,它不仅易于上手,还便于与第三方库或既有项目整合。这篇文章主要介绍了vue 的基本语法和常用指令,需要的朋友可以参考下
    2019-07-07
  • vue element-ui使用required进行表单校验时自定义提示语问题

    vue element-ui使用required进行表单校验时自定义提示语问题

    这篇文章主要介绍了vue element-ui使用required进行表单校验时自定义提示语问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue.js搭建移动端购物车界面

    Vue.js搭建移动端购物车界面

    这篇文章主要为大家详细介绍了Vue.js搭建移动端购物车界面,重点介绍基本结构和数据渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue自定义指令介绍(2)

    Vue自定义指令介绍(2)

    这篇文章主要为大家详细介绍了Vue自定义指令,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue如何实现el-select下拉选项的懒加载

    vue如何实现el-select下拉选项的懒加载

    这篇文章主要介绍了vue如何实现el-select下拉选项的懒加载,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3数据更新,页面没有同步更新的问题及解决

    Vue3数据更新,页面没有同步更新的问题及解决

    这篇文章主要介绍了Vue3数据更新,页面没有同步更新的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • element中使用formdata进行上传文件的方法

    element中使用formdata进行上传文件的方法

    本文主要介绍了elementUI中使用formdata进行上传文件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • Vue.js 插件开发详解

    Vue.js 插件开发详解

    本文会通过一个简单的vue-toast插件,来帮助了解掌握插件的开发和使用。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • 使用开源Cesium+Vue实现倾斜摄影三维展示功能

    使用开源Cesium+Vue实现倾斜摄影三维展示功能

    这篇文章主要介绍了使用开源Cesium+Vue实现倾斜摄影三维展示,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07

最新评论