Vue3+TypeScript集成Mock

安装依赖

bash 复制代码
pnpm install -D vite-plugin-mock mock.js

注册插件

vite.config.ts

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

原代码 defineConfig({...}) 现在要改成 defineConfig(() => {return{...}}) 参考网址:github.com/vbenjs/vite...

创建假接口

/mock/user.ts

ts 复制代码
// 用户信息数据,createUserList:此函数执行会返回一个数组,数组里面包含两个用户信息
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: '系统管理员',
      roles: ['系统管理员'],
      buttons: ['cuser.detail', 'cuser.user'],
      routes: ['home'],
      token: 'System Token',
    },
  ]
}
//对外暴露一个数组:数组里面包含两个接口
//登录假的接口
//获取用户信息的假的接口
export default [
  // 用户登录接口
  {
    url: '/api/user/login',//请求地址
    method: 'post',//请求方式
    response: ({ body }) => {
      //获取请求体携带过来的用户名与密码
      const { username, password } = body;
      //调用获取用户信息函数,用于判断是否有此用户
      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

bash 复制代码
pnpm i axios

使用测试

/main.ts 临时测试

ts 复制代码
...
import axios from 'axios'
axios({
  url: '/api/user/login',
  method: 'post',
  data: {
    username: 'admin',
    password: '111111'
  }
})
app.mount('#app')
相关推荐
叫我阿柒啊11 小时前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
烛阴13 小时前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
拜无忧17 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
冰冷的bin17 小时前
【React Native】点赞特效动画组件FlowLikeView
react native·react.js·typescript
Bug生产工厂1 天前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
叫我阿柒啊2 天前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices
烛阴2 天前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript
定栓2 天前
Typescript入门-类型断言讲解
前端·javascript·typescript
Thetimezipsby2 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
流影ng2 天前
【TypeScript】闭包
typescript