Vue3+TypeScript集成Mock的方法

更新時間：2025年04月24日 09:35:13 作者：碼農(nóng)張3

這篇文章主要介紹了Vue3+TypeScript集成Mock的方法,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

mock.js用來做什么

在項目開發(fā)中，會通過調(diào)用接口來獲取數(shù)據(jù)，然后進行渲染?，F(xiàn)在前后端分離開發(fā)，有時后端并不能夠及時開發(fā)完成接口，這個時候我們就可以通過mock.js來模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒有開發(fā)出來時獨立開發(fā)，使項目可以正常進行，節(jié)約了寶貴時間，等到后端接口編寫完畢后，再替換成真正的接口就方便快捷很多。

安裝依賴

pnpm install -D vite-plugin-mock mock.js

注冊插件

vite.config.ts

...
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
...
export default defineConfig(() => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        // mockPath: 'mock', // 默認
        enable: true,
      }),
    ],
  }
})

原代碼 defineConfig({...}) 現(xiàn)在要改成 defineConfig(() => {return{...}})
參考網(wǎng)址：https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md

創(chuàng)建假接口

/mock/user.ts

// 用戶信息數(shù)據(jù)，createUserList:此函數(shù)執(zhí)行會返回一個數(shù)組,數(shù)組里面包含兩個用戶信息
function createUserList() {
  return [
    {
      userId: 1,
      avatar:
        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      username: 'admin',
      password: '111111',
      desc: '平臺管理員',
      roles: ['平臺管理員'],
      buttons: ['cuser.detail'],
      routes: ['home'],
      token: 'Admin Token',
    },
    {
      userId: 2,
      avatar:
        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      username: 'system',
      password: '111111',
      desc: '系統(tǒng)管理員',
      roles: ['系統(tǒng)管理員'],
      buttons: ['cuser.detail', 'cuser.user'],
      routes: ['home'],
      token: 'System Token',
    },
  ]
}
//對外暴露一個數(shù)組:數(shù)組里面包含兩個接口
//登錄假的接口
//獲取用戶信息的假的接口
export default [
  // 用戶登錄接口
  {
    url: '/api/user/login',//請求地址
    method: 'post',//請求方式
    response: ({ body }) => {
      //獲取請求體攜帶過來的用戶名與密碼
      const { username, password } = body;
      //調(diào)用獲取用戶信息函數(shù),用于判斷是否有此用戶
      const checkUser = createUserList().find(
        (item) => item.username === username && item.password === password,
      )
      //沒有用戶返回失敗信息
      if (!checkUser) {
        return { code: 201, data: { message: '賬號或者密碼不正確' } }
      }
      //如果有返回成功信息
      const { token } = checkUser
      return { code: 200, data: { token } }
    },
  },
  // 獲取用戶信息
  {
    url: '/api/user/info',
    method: 'get',
    response: (request) => {
      //獲取請求頭攜帶token
      const token = request.headers.token;
      //查看用戶信息是否包含有次token用戶
      const checkUser = createUserList().find((item) => item.token === token)
      //沒有返回失敗的信息
      if (!checkUser) {
        return { code: 201, data: { message: '獲取用戶信息失敗' } }
      }
      //如果有返回成功信息
      return { code: 200, data: { checkUser } }
    },
  },
]

安裝 axios

pnpm i axios

使用測試

/main.ts 臨時測試

...
import axios from 'axios'
axios({
  url: '/api/user/login',
  method: 'post',
  data: {
    username: 'admin',
    password: '111111'
  }
})
app.mount('#app')

到此這篇關(guān)于Vue3+TypeScript集成Mock的方法的文章就介紹到這了,更多相關(guān)Vue TypeScript集成Mock內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: